Interfejs WebOTP API może teraz otrzymywać hasła jednorazowe z elementów iframe.
SMS-y jednorazowe (hasła jednorazowe) są zwykle używane do weryfikacji numerów telefonów, na przykład jako drugiego etapu uwierzytelniania lub do weryfikacji płatności w internecie. Jednak przełączanie się między przeglądarką a aplikacją do SMS-ów, kopiowanie i wklejanie oraz ręczne wpisywanie hasła jednorazowego ułatwia pomyłki i utrudnia użytkownikom.
Interfejs WebOTP API umożliwia witrynom programowe uzyskiwanie jednorazowego hasła z SMS-a i wpisywanie go automatycznie w formularzu jednym kliknięciem, bez konieczności przełączania się na inną aplikację. SMS-y są specjalnie sformatowane i powiązane ze źródłem danych, co minimalizuje ryzyko kradzieży hasła jednorazowego z wyłudzonych haseł przez witryny wyłudzające informacje.
Jednym z przypadków użycia, który jeszcze nie był obsługiwany w WebOTP, było kierowanie na źródło w elemencie iframe. Zwykle jest on używany do potwierdzania płatności, zwłaszcza w przypadku 3D Secure. Dzięki wspólnemu formatowi do obsługi elementów iframe z innych domen interfejs WebOTP API od Chrome 91 dostarcza teraz pliki OP powiązane z zagnieżdżonymi źródłami.
Jak działa interfejs WebOTP API
Sam interfejs WebOTP API jest wystarczająco prosty:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
SMS musi być sformatowany za pomocą jednorazowych kodów powiązanych ze źródłem.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Zwróć uwagę, że w ostatnim wierszu znajduje się ź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.
Podstawy korzystania z WebOTP znajdziesz w artykule Weryfikowanie numerów telefonów w internecie przy użyciu interfejsu WebOTP API.
Przypadki użycia elementów iframe z innych domen
Wpisywanie hasła jednorazowego w formie elementu iframe z innych domen jest często używane w sytuacjach płatności. Niektórzy wydawcy kart kredytowych wymagają dodatkowej weryfikacji, aby sprawdzić autentyczność płatnika. Nazywa się to 3D Secure i formularz jest zazwyczaj widoczny w elemencie iframe na tej samej stronie, jakby był częścią procesu płatności.
Na przykład:
- Użytkownik odwiedza sklep
shop.example
, aby kupić parę butów za pomocą karty kredytowej. - Po wpisaniu numeru karty kredytowej zintegrowany dostawca usług płatniczych wyświetla w elemencie iframe formularz z usługi
bank.example
z prośbą o potwierdzenie numeru telefonu na potrzeby szybkiej płatności. bank.example
wysyła do użytkownika SMS-a z hasłem jednorazowym, aby mógł on wpisać go w celu potwierdzenia swojej tożsamości.
Jak używać interfejsu WebOTP API z międzyźródłowego elementu iframe
Aby używać interfejsu WebOTP API z międzyźródłowego elementu iframe, musisz zrobić 2 rzeczy:
- W wiadomości tekstowej SMS dodaj adnotacje dotyczące źródła ramki najwyższego poziomu i źródła iframe.
- Skonfiguruj zasady uprawnień tak, aby element iframe z innych domen mógł otrzymywać hasło jednorazowe bezpośrednio od użytkownika.
Możesz ją samodzielnie wypróbować na stronie https://web-otp-iframe-demo.stackblitz.io.
Dodaj adnotacje do elementów źródłowych w SMS-ie
Jeśli zostanie wywołany interfejs WebOTP API z elementu iframe, wiadomość tekstowa SMS musi zawierać źródło ramki najwyższego poziomu poprzedzone znakiem @
, po którym następuje hasło jednorazowe „#
”, po którym następuje źródło elementu iframe poprzedzone znakiem @
.
@shop.example #123456 @bank.exmple
Skonfiguruj zasadę uprawnień
Aby można było używać WebOTP w międzyźródłowym elemencie iframe, umieszczonego elementu musi przyznać dostęp do tego interfejsu API za pomocą zasady uprawnień otp-credentials, co pozwoli uniknąć niezamierzonego zachowania. Ogólnie można osiągnąć ten cel na 2 sposoby:
- przez nagłówek HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- z atrybutu iframe
allow
:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Zobacz więcej przykładów określania zasad uprawnień .
Zastrzeżenia
Poziomy zagnieżdżenia
Obecnie Chrome obsługuje tylko wywołania interfejsu WebOTP API z innych domen iframe, które mają nie więcej niż 1 unikalne źródło w łańcuchu elementów nadrzędnych. W tych sytuacjach:
- a.com -> b.com
- a.pl -> b.pl -> b.pl
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
Używanie WebOTP w domenie b.com jest obsługiwane, ale w c.com już nie.
Ten scenariusz nie jest też obsługiwany ze względu na brak zapotrzebowania i złożoność UX.
- a.com -> b.com -> a.com (wywołuje interfejs WebOTP API).
Interoperacyjność
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"]
. Gdy w Safari dotrze do SMS-a SMS z kodem jednorazowym przypisanym do źródła, klawiatura zasugeruje wpisanie hasła jednorazowego w polu do wprowadzania danych.
Od kwietnia 2021 roku Safari obsługuje elementy iframe z unikalnym formatem SMS-ów za pomocą %
.
Ponieważ jednak dyskusja na temat specyfikacji została zakończona, a zarazem chodzi o @
, mamy nadzieję, że wdrożenie obsługiwanego formatu SMS-ów zostanie scalone.
Prześlij opinię
Twoja opinia pomoże nam ulepszyć interfejs WebOTP API. Wypróbuj go i daj nam znać, co o nim myślisz.
Zasoby
- Weryfikowanie numerów telefonów w internecie za pomocą interfejsu API internetowych haseł jednorazowych
- Sprawdzone metody dotyczące wypełniania formularzy jednorazowych SMS-ów
- Interfejs WebOTP API
- Jednorazowe kody związane z miejscem pochodzenia dostarczane przez SMS-y
Zdjęcie: rupixen.com, Unsplash