Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API

Pomoc dla użytkowników korzystających z haseł jednorazowych otrzymywanych SMS-em

Eiji Kitamura

Czym jest interfejs WebOTP API?

Obecnie większość osób na świecie ma urządzenia mobilne, a deweloperzy często wykorzystują numery telefonów jako identyfikatory użytkowników swoich usług.

Jest wiele sposobów weryfikacji numerów telefonów, jednak są one generowane losowo Hasło jednorazowe wysyłane SMS-em jest najczęściej stosowane. Wysyłam ten kod do serwera dewelopera, potwierdza, że ma kontrolę nad numerem telefonu.

Ten pomysł jest już wdrażany w wielu sytuacjach w celu osiągnięcia:

  • Numer telefonu jako identyfikator użytkownika. Podczas rejestrowania nowego konta do usługi, niektóre strony proszą o numer telefonu zamiast adresu e-mail i używać go jako identyfikatora konta.
  • Weryfikacja dwuetapowa. Podczas logowania witryna prosi o jednorazowy kod wysyłana w wiadomości SMS jako uzupełnienie hasła lub innych informacji zwiększających wiedzę, zabezpieczeń.
  • Potwierdzenie płatności. Gdy użytkownik dokonuje płatności, prosząc o Jednorazowy kod wysłany SMS-em może pomóc w weryfikacji zamiarów danej osoby.

Obecny proces utrudnia użytkownikom. Znajdowanie hasła jednorazowego w SMS-ie a następnie skopiowanie i wklejenie w formularzu jest uciążliwe, na najważniejszych ścieżkach użytkowników. Łagodzenie tego problemu wielu największych deweloperów z całego świata. Android ma interfejs API do tego celu. Podobnie jak iOS oraz Safari:

WebOTP API pozwala aplikacji otrzymywać specjalnie sformatowane wiadomości powiązane z w domenie Twojej aplikacji. Dzięki temu możesz automatycznie uzyskać hasło jednorazowe z SMS-a. weryfikację numeru telefonu użytkownika.

Zobacz, jak to działa

Załóżmy, że użytkownik chce zweryfikować swój numer telefonu na stronie internetowej. Witryna wysyła do użytkownika wiadomość SMS, a użytkownik wpisuje hasło jednorazowe z karty aby zweryfikować własność numeru telefonu.

Dzięki interfejsowi WebOTP API wykonanie czynności jest proste – wystarczy jedno kliknięcie. co widać w tym filmie. Gdy otrzymasz SMS-a, pojawi się plansza dolna. i prosi użytkownika o zweryfikowanie numeru telefonu. Po kliknięciu przycisku Zweryfikuj na dole strony, przeglądarka wkleja hasło jednorazowe do formularza, a nie musi kliknąć przycisku Dalej.

Cały proces przedstawiono na ilustracji poniżej.

Diagram interfejsu WebOTP API

Wypróbuj wersję demonstracyjną. Nie prosi o swojego numeru telefonu lub wysłać SMS-a do urządzenia (ale możesz go wysłać z na innym urządzeniu, kopiując tekst wyświetlany w prezentacji. To działa, ponieważ nie ma znaczenia, kto jest nadawcą, jeśli używany jest interfejs WebOTP API.

  1. Otwórz stronę https://web-otp.glitch.me w Chrome 84 lub później na urządzeniu z Androidem.
  2. Wyślij do telefonu tego SMS-a z innego telefonu.
Your OTP is: 123456.

@web-otp.glitch.me #12345

Czy dotarł do Ciebie SMS i widzisz prośbę o wpisanie kodu w obszarze wprowadzania danych? W ten sposób działa interfejs WebOTP API w przypadku użytkowników.

Korzystanie z interfejsu WebOTP API składa się z 3 części:

  • Tag <input> z prawidłowymi adnotacjami
  • JavaScript w aplikacji internetowej
  • Sformatowany tekst wiadomości wysłany SMS-em.

Najpierw omówię tag <input>.

Dodaj adnotację do tagu <input>

WebOTP działa bez adnotacji HTML, ale na potrzeby różnych przeglądarek zgodności, zalecam dodanie rozszerzenia autocomplete="one-time-code" do w tagu <input>, w którym użytkownik powinien wpisać hasło jednorazowe.

Dzięki temu przeglądarka Safari 14 lub nowsza może sugerować, że użytkownik ma automatycznie uzupełniać pole <input> z hasłem jednorazowym po otrzymaniu SMS-a w formacie opisanym w sekcji Formatowanie wiadomości SMS, mimo że nie obsługuje on protokołu WebOTP.

w kodzie HTML,

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

Użycie interfejsu WebOTP API

WebOTP jest prosty, dlatego samo skopiowanie i wklejenie poniższego kodu pracy. Mimo to pokażę Ci, co się dzieje.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Wykrywanie cech

Wykrywanie cech jest takie samo jak w przypadku wielu innych interfejsów API. Słucham Zdarzenie DOMContentLoaded poczeka na utworzenie drzewa DOM.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

Przetwarzaj hasło jednorazowe

Interfejs WebOTP API jest wystarczająco prosty. Używaj navigator.credentials.get() aby uzyskać hasło jednorazowe. WebOTP dodaje do tej metody nową opcję otp. Ma tylko jedną właściwość: transport, której wartość musi być tablicą z ciągiem znaków 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Spowoduje to uruchomienie przepływu uprawnień przez przeglądarkę po otrzymaniu SMS-a. Jeśli uprawnienia to przyznana, zwrócona obietnica rozwiązuje się z obiektem OTPCredential.

Zawartość uzyskanego obiektu OTPCredential

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

Następnie w polu <input> przekaż wartość hasła jednorazowego. Bezpośrednie przesyłanie formularza wyeliminuje konieczność dotknięcia przycisku.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

Przerywanie wiadomości

Jeśli użytkownik ręcznie wpisze hasło jednorazowe i prześle formularz, możesz anulować get() za pomocą wystąpienia AbortController w obiekcie options.

JavaScript .

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

Formatowanie wiadomości SMS

Sam interfejs API powinien wyglądać na dość prosty, ale jest kilka rzeczy, które należy zanim z niej skorzystasz. Wiadomość musi zostać wysłana po Usługa navigator.credentials.get() jest wywoływana i musi zostać odebrana na urządzeniu gdzie nazwano get(). Pamiętaj też, że wiadomość musi spełniać następujące warunki: formatowanie:

  • Wiadomość zaczyna się od (opcjonalnie) zrozumiałego dla człowieka tekstu zawierającego od 4 do 10 znaków znak alfanumeryczny, z co najmniej jedną cyfrą opuszczającą ostatni wiersz dla adresu URL i hasła jednorazowego.
  • Część adresu URL witryny, która wywołała interfejs API, musi być poprzedzona do @.
  • Adres URL musi zawierać symbol krzyżyka („#”), po którym następuje hasło jednorazowe.

Na przykład:

Your OTP is: 123456.

@www.example.com #123456

Oto złe przykłady:

Przykład nieprawidłowego tekstu SMS-a Dlaczego to nie działa
Here is your code for @example.com #123456 @ powinien być pierwszym znakiem ostatniego wiersza.
Your code for @example.com is #123456 @ powinien być pierwszym znakiem ostatniego wiersza.
Your verification code is 123456

@example.com\t#123456		 Między @host a #code powinien występować 1 spacja.
Your verification code is 123456

@example.com  #123456		 Między @host a #code powinien występować 1 spacja.
Your verification code is 123456

@ftp://example.com #123456		 Nie można podać schematu adresu URL.
Your verification code is 123456

@https://example.com #123456		 Nie można podać schematu adresu URL.
Your verification code is 123456

@example.com:8080 #123456		 Nie można uwzględnić portu.
Your verification code is 123456

@example.com/foobar #123456		 Nie można uwzględnić ścieżki.
Your verification code is 123456

@example .com #123456		 Brak odstępów w domenie.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456		 W domenie nie ma niedozwolonych znaków.
@example.com #123456

Mambo Jumbo		 @host i #code powinny być ostatnim wierszem.
@example.com #123456

App hash #oudf08lkjsdf834		 @host i #code powinny być ostatnim wierszem.
Your verification code is 123456

@example.com 123456		 Brak elementu #.
Your verification code is 123456

example.com #123456		 Brak elementu @.
Hi mom, did you receive my last text Brak @ i #.

Prezentacje

Wypróbuj różne komunikaty w ramach wersji demonstracyjnej: https://web-otp.glitch.me

Możesz też utworzyć rozwidlenie i utworzyć własną wersję: https://glitch.com/edit/#!/web-otp.

Używanie WebOTP z międzyźródłowego elementu iframe

Wpisanie hasła jednorazowego z SMS-a w elemencie iframe z innej domeny jest zwykle używane do płatności zwłaszcza w przypadku zabezpieczeń 3D Secure. Posiadanie wspólnego formatu, który obsługuje między domenami iframe, interfejs WebOTP API dostarcza hasła jednorazowe powiązane z zagnieżdżonymi źródłami. Przykład:

  • Użytkownik odwiedza stronę shop.example, aby kupić buty za pomocą karty kredytowej.
  • Po wpisaniu numeru karty kredytowej zintegrowany dostawca usług płatniczych wyświetla formularza z adresu bank.example w elemencie iframe z prośbą o zweryfikowanie który umożliwia szybką płatność.
  • bank.example wysyła do użytkownika SMS-a z hasłem jednorazowym, aby mógł: podając go w celu weryfikacji tożsamości.

Aby używać interfejsu WebOTP API w międzyźródłowym elemencie iframe, musisz wykonać 2 czynności:

  • Dodaj w tekście SMS-a adnotacje do źródła ramki najwyższego poziomu i punktu początkowego iframe .
  • Skonfiguruj zasadę uprawnień, aby umożliwić elementowi iframe z innych domen otrzymywanie hasła jednorazowego bezpośrednio od użytkownika.
.
Interfejs WebOTP API w elemencie iframe.

Możesz wypróbować wersję demonstracyjną na https://web-otp-iframe-demo.stackblitz.io.

Dodaj adnotacje dotyczące źródeł do wiadomości tekstowej SMS

W przypadku wywołania interfejsu API WebOTP z poziomu elementu iframe wiadomość tekstowa SMS musi zawiera źródło ramki górnej poprzedzone znakiem @, a następnie hasło jednorazowe poprzedzone znakiem # i źródło iframe poprzedzone znakiem @ w ostatnim wierszu.

Your verification code is 123456

@shop.example #123456 @bank.exmple

Skonfiguruj zasady uprawnień

Aby używać WebOTP w międzyźródłowym elemencie iframe, osadzony komponent musi przyznać dostęp do tego Interfejs API wykorzystujący zasady uprawnień otp-credentials, co pozwala uniknąć niezamierzonego zachowanie użytkownika. Ogólnie cel ten można osiągnąć na dwa sposoby:

przez nagłówek HTTP:

Permissions-Policy: otp-credentials=(self "https://bank.example")

przez atrybut iframe allow:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Zobacz więcej przykładów określania zasad uprawnień .

Korzystanie z WebOTP na komputerze

W Chrome WebOTP obsługuje nasłuchiwanie SMS-ów odebranych na innych urządzeniach, pomaga użytkownikom w weryfikacji numeru telefonu na komputerze.

WebOTP API na komputerze.

Ta funkcja wymaga, aby użytkownik zalogował się na to samo konto Google w obu usługach Chrome na komputery i Chrome na Androida.

Wystarczy tylko wdrożyć interfejs WebOTP API w witrynie na komputery, jak w przypadku witryn mobilnych, ale nie ma żadnych specjalnych sztuczek.

Więcej informacji znajdziesz w artykule Weryfikowanie numeru telefonu na komputerze przy użyciu interfejsu WebOTP API.

Najczęstsze pytania

Okno nie pojawi się, mimo że wysyłam wiadomość prawidłowo sformatowaną. Co jest nie tak?

Podczas testowania interfejsu API obowiązują pewne ograniczenia:

  • Jeśli numer telefonu nadawcy znajduje się na liście kontaktów odbiorcy, Interfejs API nie będzie uruchamiany ze względu na projekt interfejsu SMS User Consent API.
  • Jeśli używasz profilu służbowego na urządzeniu z Androidem, a WebOTP nie działa, spróbuj zainstalować Chrome i użyć go na profilu osobistym (tj. tego samego profilu, w którym odbierasz SMS-y).

Sprawdź format, aby upewnić się, że SMS jest poprawnie sformatowany.

Czy ten interfejs API jest zgodny między różnymi przeglądarkami?

Chromium i WebKit uzgodniły format SMS-ów, a firma Apple ogłosiła, że będzie obsługiwać tę funkcję w Safari od wersji iOS 14. oraz macOS Big Sur. Chociaż Safari nie obsługuje interfejsu WebOTP JavaScript API, dodanie adnotacji do elementu input przy użyciu domyślnej wartości autocomplete=["one-time-code"] klawiatura automatycznie sugeruje wpisanie hasła jednorazowego, jeśli SMS jest zgodny z formatem.

Czy używanie SMS-ów do uwierzytelniania jest bezpieczne?

Hasło jednorazowe wysłane SMS-em jest przydatne do weryfikacji numeru telefonu, gdy numer jest używany jako pierwszy podany, weryfikacja numeru telefonu za pomocą wiadomości SMS musi być zachowana z rozwagą ponowne uwierzytelnianie, bo operatorzy mogą przejąć numery telefonów i poddać je recyklingowi. WebOTP to wygodny mechanizm ponownego uwierzytelniania i przywracania danych, ale usługi powinny połączyć ją z dodatkowymi czynnikami, takimi jak wyzwanie wiedzy, Interfejs Web Authentication API do silnego uwierzytelniania.

Gdzie zgłaszać błędy implementacji Chrome?

Czy wystąpił błąd z implementacją Chrome?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje dotyczące odtwarzania ustaw Komponenty na Blink>WebOTP.

Jak mogę pomóc w korzystaniu z tej funkcji?

Czy zamierzasz korzystać z interfejsu WebOTP API? Twoje publiczne wsparcie pomaga nam traktować priorytetowo i pokazuje innym dostawcom przeglądarek, jak ważne jest ich zapewnienie. Wyślij tweeta na adres @ChromiumDev, używając hashtagu #WebOTP. i daj nam znać, gdzie i jak go używasz.

Zasoby