Weryfikowanie numeru telefonu na komputerze za pomocą interfejsu WebOTP API

Od Chrome 93 witryny mogą weryfikować numery telefonów z poziomu Chrome na komputerze.

Yi Gu
Eiji Kitamura

WebOTP pomaga użytkownikom wpisać kod weryfikacyjny numeru telefonu w witrynie mobilnej jednym dotknięciem bez przełączania się między aplikacjami. Chrome 93 rozszerza tę funkcję na również na komputerze. Czytaj dalej, aby dowiedzieć się więcej.

Wprowadzenie

Hasła jednorazowe przesyłane SMS-em są zwykle używane do weryfikacji numeru telefonu, na przykład jako drugi etap uwierzytelniania lub do weryfikacji płatności w internecie. Jednak cały proces przechodzenia z komputera na telefon komórkowy, otwarcie wiadomości SMS, zapamiętywanie i wpisywanie hasła jednorazowego w oryginalnej witrynie. co utrudnia ich realizację. W ten sposób łatwo jest popełnić błędy i jest on narażony na ataków phishingowych.

Interfejs WebOTP API umożliwia witrynom: programowo uzyskać hasło jednorazowe z wiadomości SMS oraz automatycznie wypełniać formularz dla użytkowników jednym kliknięciem bez przełączania się między aplikacjami. SMS ma określony format i jest powiązany z źródłem, więc ogranicza występowanie błędów jest ryzyko kradzieży hasła jednorazowego przez witryny wyłudzające informacje.

WebOTP API w akcji.

Jednym z przypadków użycia, które nie jest jeszcze obsługiwane przez WebOTP, jest kierowanie na numer telefonu żądań weryfikacji z komputera zdalnego lub laptopa – Interfejs API działa tylko na urządzeniach z funkcjami telefonicznymi. Teraz interfejs API obsługuje nasłuchiwanie SMS-ów odebranych na innych urządzeniach, aby pomóc użytkownikom podczas weryfikacji numeru telefonu w Chrome 93 na komputerze.

WebOTP API na komputerze.

Wypróbuj

Wymagania wstępne

Prezentacja

Aby samodzielnie wypróbować tę bezproblemową procedurę weryfikacji numeru telefonu na komputerze, wykonaj te czynności:

  1. Otwórz stronę https://web-otp-demo.glitch.me/ na na komputerze. Kliknij przycisk Zweryfikuj.
  2. Wyślij tego samego SMS-a, który był widoczny na ekranie, z drugiego telefonu do urządzenie z Androidem,
  3. Po dostarczeniu SMS-a na urządzenie z Androidem pojawi się okno z pytaniem, czy jeśli chcesz zweryfikować numer telefonu na komputerze. Kliknij Prześlij, aby zatwierdzić.
  4. Na komputerze kod weryfikacyjny wysłany na urządzenie z Androidem powinien w polu do wprowadzania danych.

Jak działa interfejs WebOTP API

Przyjrzyjmy się, jak działa interfejs WebOTP API:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

SMS musi być sformatowany za pomocą kodów jednorazowych powiązanych ze źródłem.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

Zwróć uwagę, że ostatni wiersz zawiera źródło, które ma być poprzedzone tagiem @ po którym następuje hasło jednorazowe i #.

Po odebraniu wiadomości SMS pojawia się pasek informacyjny z prośbą o podanie numeru zweryfikować swój numer telefonu. Gdy użytkownik kliknie przycisk Verify, przeglądarka automatycznie przekazuje hasło jednorazowe do witryny i usuwa navigator.credentials.get() Następnie witryna może wyodrębnić hasło jednorazowe i dokończyć proces weryfikacji.

Więcej informacji znajdziesz w artykule Weryfikowanie numerów telefonów w internecie przy użyciu interfejsu WebOTP API.

Jak używać interfejsu WebOTP API na komputerze

Weryfikacja numeru telefonu za pomocą SMS-a jest powszechnie stosowana i niezależna od platformy. Dowolne użycie na urządzeniach mobilnych.

Korzystanie z interfejsu WebOTP API na komputerach przebiega tak samo jak na urządzeniach mobilnych, żeby witryny mogły wdrażać ten sam kod na różnych platformach.

Obsługa i interoperacyjność przeglądarek

Ta funkcja korzysta z Synchronizacji Chrome, więc obecnie działa tylko w Chrome. Odbieranie i przesyłanie SMS-ów w systemie operacyjnym iOS lub iPad nie jest obsługiwane w Chrome.

Chociaż przeglądarki inne niż Chromium nie implementują interfejsu WebOTP API, Safari używa tego samego formatu SMS-ów. dzięki wsparciu input[autocomplete="one-time-code"]. W przeglądarce Safari, użytkownik włączył automatyczną synchronizację iMessage, gdy SMS zawierający kod źródłowy w systemie iOS lub iPadOS otrzymuje format kodu jednorazowego, jest przekazywana do systemu macOS. Jeśli użytkownik zaznaczy pole do wprowadzania danych, Safari zasugeruje hasło jednorazowe, które użytkownik może wpisać.

Prześlij opinię

Twoja opinia pomoże nam ulepszać interfejs WebOTP API. Wypróbuj i daj nam znać co myślisz.

Zdjęcie: Luis Villasmil włączono Niepochlebne