Weryfikowanie numeru telefonu na komputerze za pomocą interfejsu WebOTP API

Od wersji 93 przeglądarki Chrome witryny mogą weryfikować numery telefonów z Chrome na komputery.

Yi Gu
Eiji Kitamura

WebOTP pomaga użytkownikom wpisywać kod weryfikacyjny numeru telefonu w witrynie mobilnej jednym kliknięciem bez przełączania się między aplikacjami. W Chrome 93 ta funkcja jest dostępna także na komputery. Aby dowiedzieć się więcej, czytaj dalej.

Wprowadzenie

SMS-owe kody OTP (hasła jednorazowe) są często używane do weryfikacji numeru telefonu, na przykład jako drugi krok uwierzytelniania lub do weryfikacji płatności w internecie. Jednak cały proces przełączania się z komputera na telefon, otwierania aplikacji SMS, zapamiętywania i wprowadzania kodu OTP na pierwotnej stronie internetowej na komputerze powoduje dodatkowe trudności. W taki sposób łatwo popełnić błąd, a metoda ta jest podatna na ataki phishingowe.

Interfejs WebOTP API umożliwia witrynom automatyczne pobieranie hasła jednorazowego z SMS-a i automatyczne wypełnianie formularzy przez użytkowników jednym kliknięciem bez przełączania aplikacji. SMS ma określony format i jest powiązany z pochodzącym z niego źródłem, co zmniejsza ryzyko kradzieży kodu OTP przez strony phishingowe.

WebOTP API w działaniu.

Jednym z takich przypadków jest wysyłanie żądań weryfikacji numeru telefonu z urządzenia zdalnego (np. komputera stacjonarnego lub laptopa). Interfejs API działa tylko na urządzeniach, które mają funkcję telefoniczną. Interfejs API obsługuje teraz odbieranie SMS-ów na innych urządzeniach, aby ułatwić użytkownikom weryfikację numeru telefonu na komputerze w Chrome 93.

WebOTP API na komputerach.

Wypróbuj

Wymagania wstępne

Prezentacja

Aby wypróbować ten płynny proces weryfikacji numeru telefonu na komputerze, wykonaj te czynności:

  1. Na komputerze otwórz stronę https://web-otp-demo.glitch.me/. Kliknij przycisk Zweryfikuj.
  2. Wysłać SMS-a, który był na ekranie, z drugiego telefonu na urządzenie z Androidem.
  3. Gdy SMS zostanie dostarczony na urządzenie z Androidem, pojawi się okno z prośbą o potwierdzenie numeru telefonu na komputerze. Aby zatwierdzić, naciśnij Prześlij.
  4. Na komputerze kod weryfikacyjny wysłany na urządzenie z Androidem powinien zostać automatycznie wstawiony w polu tekstowym.

Jak działa interfejs WebOTP API

Zobaczmy, jak działa interfejs WebOTP API:

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

Wiadomość SMS musi być sformatowana za pomocą kodów jednorazowych powiązanych z pochodzącym urządzeniem.

Your OTP is: 123456.

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

Zauważ, że ostatni wiersz zawiera źródło, które ma być powiązane, poprzedzone znakiem @, a następnie klucz OTP poprzedzony znakiem #.

Gdy nadejdzie SMS, pojawi się pasek informacyjny z prośbą o potwierdzenie numeru telefonu. Gdy użytkownik kliknie przycisk Verify, przeglądarka automatycznie przekaże kod OTP do witryny i rozwiąże adres navigator.credentials.get(). Witryna może wyodrębnić kod OTP i dokończyć proces weryfikacji.

Więcej informacji znajdziesz w artykule Weryfikacja numerów telefonów w internecie za pomocą interfejsu WebOTP API.

Jak korzystać z interfejsu WebOTP API na komputerze

Weryfikacja za pomocą numeru telefonu przez SMS-a jest powszechnie stosowana i niezależna od platformy. Wszystkie przypadki użycia na urządzeniach mobilnych powinny być stosowane na komputerach.

Korzystanie z interfejsu WebOTP na komputerze jest takie samo jak na urządzeniu mobilnym, więc witryny mogą wdrażać ten sam kod na różnych platformach.

Obsługa przeglądarek i współdziałanie

Ta funkcja korzysta z synchronizacji Chrome, więc obecnie działa tylko w tej przeglądarce. Odbieranie i przesyłanie SMS-ów w Chrome na iOS lub iPadOS nie jest obsługiwane.

Silniki przeglądarek inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari udostępnia ten sam format SMS-ów z wsparciem input[autocomplete="one-time-code"]. W Safari, o ile użytkownik ma włączoną automatyczną synchronizację iMessage, gdy na iOS lub iPadOS dotrze SMS zawierający kod jednorazowy z powiązanym źródłem, wiadomość zostanie przekierowana do macOS. Jeśli użytkownik skupi się na polu tekstowym, Safari zaproponuje mu kod OTP.

Prześlij opinię

Twoja opinia jest dla nas bezcenna, ponieważ pomaga nam ulepszać interfejs WebOTP API. Wypróbuj go i powiedz nam, co o nim myślisz.

Zdjęcie: Luis Villasmil na Unsplash