Od wersji 93 przeglądarki Chrome witryny mogą weryfikować numery telefonów z Chrome na komputery.
WebOTP pomaga użytkownikom wpisywać na stronie mobilnej kod weryfikacyjny numeru telefonu 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.
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 z możliwością wykonywania połączeń telefonicznych. 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.
Wypróbuj
Wymagania wstępne
- Komputer stacjonarny lub laptop (z systemem Windows, Mac, Linux lub ChromeOS).
- telefon z Androidem z Usługami Google Play w wersji 20.30.12 lub nowszej.
- Chrome w wersji 93 lub nowszej na komputerze, laptopie i urządzeniu mobilnym. Chrome 93 w wersji beta jest dostępny od końca lipca 2021 roku.
- Musisz zalogować się na to samo konto Google w Chrome na komputerze i w Chrome na telefonie. Na przykład na stronie https://myaccount.google.com/ lub https://mail.google.com. Nie musisz włączać synchronizacji.
- Na urządzeniu z Androidem musisz się zalogować w sekcji „Ustawienia > Google”.
- Przeglądarka Chrome 93 musi być domyślną przeglądarką na urządzeniu z Androidem.
- Chrome 93 musi działać na urządzeniu z Androidem na pierwszym planie lub w tle.
Prezentacja
Aby wypróbować ten płynny proces weryfikacji numeru telefonu na komputerze, wykonaj te czynności:
- Na komputerze otwórz stronę https://web-otp-demo.glitch.me/. Kliknij przycisk Zweryfikuj.
- Wysłać SMS-a, który był na ekranie, z drugiego telefonu na urządzenie z Androidem.
- Gdy SMS zostanie dostarczony na urządzenie z Androidem, pojawi się okno z pytaniem, czy chcesz zweryfikować numer telefonu na komputerze. Aby zatwierdzić, naciśnij Prześlij.
- 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 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 odpowiednim ź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