Od wersji 93 przeglądarki Chrome witryny mogą weryfikować numery telefonów z Chrome na komputery.
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. Czytaj dalej, aby dowiedzieć się więcej.
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 jest 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 nasłuchiwanie SMS-ów otrzymanych na innych urządzeniach, aby pomóc użytkownikom w przeprowadzaniu weryfikacji numeru telefonu w Chrome 93 na komputerze.
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 – zarówno na komputerze, jak i na laptopie oraz na urządzeniach mobilnych. 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”.
- 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.
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.
- Wyślij na urządzenie z Androidem tego samego SMS-a, który był widoczny na ekranie, z drugiego telefonu.
- Gdy SMS zostanie dostarczony na urządzenie z Androidem, pojawi się okno z pytaniem, czy chcesz zweryfikować numer telefonu na komputerze. Aby zatwierdzić, kliknij 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 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. Wszystkie przypadki użycia na urządzeniach mobilnych powinny dotyczyć także komputerów.
Korzystanie z WebOTP API na komputerze przebiega tak samo jak na urządzeniu mobilnym, więc strony internetowe 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.
Mechanizmy przeglądarki inne niż Chromium nie implementują interfejsu WebOTP API, ale Safari korzysta z tego samego formatu SMS co obsługa input[autocomplete="one-time-code"]. W Safari, o ile użytkownik włączył 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 zasugeruje mu kod OTP.
Prześlij opinię
Twoja opinia jest dla nas bezcenna, ponieważ pomaga nam ulepszać interfejs WebOTP API. Wypróbuj go i podziel się z nami swoją opinią.
Zdjęcie: Luis Villasmil na stronie Unsplash