Od Chrome 93 strony mogą weryfikować numery telefonów z poziomu Chrome na komputerze.
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.
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.
Wypróbuj
Wymagania wstępne
- Komputer stacjonarny lub laptop (Windows, Mac, Linux lub ChromeOS).
- Telefon z Androidem i Usługami Google Play w wersji 20.30.12 lub nowszej.
- Chrome w wersji 93 lub nowszej, zarówno na komputerze stacjonarnym, jak i laptopie lub urządzeniu mobilnym. Chrome 93 w wersji beta będzie dostępny pod koniec lipca 2021 r.
- Musisz zalogować się na to samo konto Google w Chrome na komputerze i w przeglądarce mobilnej. 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 zalogować się na urządzeniu z Androidem, klikając „Ustawienia -> Google”.
- Chrome 93 musi być domyślną przeglądarką na urządzeniu z Androidem.
- Chrome 93 musi działać na pierwszym planie lub w tle na urządzeniu z Androidem.
Pokaz
Aby samodzielnie wypróbować tę bezproblemową weryfikację numeru telefonu na komputerze, wykonaj te czynności:
- Otwórz stronę https://web-otp-demo.glitch.me/ na komputerze. Kliknij przycisk Zweryfikuj.
- Wyślij na urządzenie z Androidem dokładną treść SMS-a, która była widoczna na ekranie z drugiego telefonu.
- 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ę.
- 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