Weryfikowanie numeru telefonu na komputerze za pomocą interfejsu WebOTP API

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

Yi Gu
Eiji Kitamura

WebOTP pomaga użytkownikom wpisywać kod weryfikacyjny numeru telefonu w witrynie mobilnej jednym kliknięciem, bez konieczności przełączania się między aplikacjami. Chrome w wersji 93 obejmuje też komputery. Czytaj dalej, aby dowiedzieć się więcej.

Wstęp

SMS-y jednorazowe (hasła jednorazowe) są zwykle używane do weryfikacji numeru telefonu, na przykład jako drugiego etapu uwierzytelniania lub do weryfikacji płatności w internecie. Cały proces przechodzenia z komputerów na urządzenia mobilne, otwierania aplikacji do SMS-ów, zapamiętywania i wpisania hasła jednorazowego w pierwotnej witrynie z powrotem na komputery zwiększa jednak pewne problemy. Łatwo popełnić błąd i jest on narażony na ataki phishingowe.

Interfejs WebOTP API umożliwia witrynom automatyczne uzyskiwanie jednorazowego hasła z SMS-a i automatyczne wypełnianie formularza jednym kliknięciem bez przełączania aplikacji. SMS ma określony format i jest powiązany ze źródłem, dzięki czemu zmniejsza ryzyko kradzieży hasła przez strony wyłudzające informacje.

Interfejs WebOTP API w działaniu.

Jednym z przypadków użycia, który nie został jeszcze obsługiwany w WebOTP, jest kierowanie żądań weryfikacji numeru telefonu z komputera zdalnego lub laptopa – interfejs API działa tylko na urządzeniach wyposażonych w telefony. Interfejs API obsługuje teraz nasłuchiwanie SMS-ów odebranych na innych urządzeniach, aby ułatwić użytkownikom weryfikację numeru telefonu w Chrome 93 na komputerze.

Interfejs WebOTP API na komputerze.

Wypróbuj

Wymagania wstępne

Pokaz

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

  1. Otwórz stronę https://web-otp-demo.glitch.me/ na komputerze. Kliknij przycisk Zweryfikuj.
  2. Wyślij na urządzenie z Androidem dokładną treść SMS-a, która była widoczna na ekranie z drugiego telefonu.
  3. Po dostarczeniu SMS-a do urządzenia z Androidem pojawi się okno z pytaniem, czy chcesz zweryfikować numer telefonu z pulpitu. Naciśnij Prześlij, aby zatwierdzić prośbę.
  4. Na komputerze kod weryfikacyjny wysłany na urządzenie z Androidem powinien być automatycznie wpisany 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 zwią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 zostanie poprzedzone znakiem @, po którym następuje hasło jednorazowe poprzedzone znakiem #.

Gdy otrzymasz SMS-a, wyświetli się pasek informacyjny z prośbą o potwierdzenie numeru telefonu. Gdy użytkownik kliknie przycisk Verify, przeglądarka automatycznie przekaże hasło jednorazowe do witryny i zablokuje navigator.credentials.get(). Witryna może wtedy wyodrębnić hasło jednorazowe i zakoń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 używana i nie zależy od platformy. Wszystkie przypadki użycia na urządzeniach mobilnych powinny dotyczyć komputerów.

Używanie WebOTP API na komputerach jest takie samo jak na urządzeniach mobilnych, więc witryny mogą 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 OS nie jest obsługiwane w Chrome.

Wyszukiwarki inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari udostępnia ten sam format SMS ze swoją obsługą input[autocomplete="one-time-code"]. Jeśli w Safari użytkownik ma włączoną automatyczną synchronizację iMessage, w przypadku iOS lub iPadOS SMS z kodem jednorazowym o poszczególnym źródle zostanie przekazany do macOS. Gdy użytkownik zaznaczy pole do wprowadzania tekstu, Safari zaproponuje mu hasło jednorazowe.

Prześlij opinię

Twoja opinia pomoże nam ulepszyć interfejs WebOTP API. Wypróbuj go i daj nam znać, co o nim myślisz.

Zdjęcie: Luis Villasmil w witrynie Unsplash