Dowiedz się, jak zoptymalizować formularz SMS z hasłem jednorazowym i zwiększyć wygodę użytkowników.
Często prosimy użytkownika o podanie hasła jednorazowego przesłanego SMS-em. potwierdzania numeru telefonu użytkownika. Hasło jednorazowe przesyłane SMS-em ma kilka zastosowań:
- Uwierzytelnianie dwuskładnikowe. Oprócz nazwy użytkownika i hasła, hasło jednorazowe SMS można jest to wyraźny sygnał, że konto należy do osoby, która otrzymała Hasło jednorazowe SMS.
- Potwierdzanie numeru telefonu. Niektóre usługi używają numeru telefonu użytkownika główny identyfikator klienta. W takich usługach użytkownicy mogą podać swój numer telefonu oraz Hasło jednorazowe otrzymane SMS-em w celu potwierdzenia tożsamości. Czasami jest powiązane z kodem PIN uwierzytelnianie dwuskładnikowe.
- Odzyskiwanie konta. Gdy użytkownik traci dostęp do konta, musi jak można je odzyskać. wysłanie e-maila na zarejestrowany adres e-mail osoby, wysłanie hasła jednorazowego przesłanego SMS-em na numer telefonu to popularne metody odzyskiwania konta.
- Potwierdzenie płatności – w systemach płatności niektóre banki lub karty kredytowe ze względów bezpieczeństwa wydawca żąda od płatnika dodatkowego uwierzytelnienia. Do tego celu zwykle używa się hasła jednorazowego przesłanego SMS-em.
W tym poście opisujemy sprawdzone metody tworzenia formularza z hasłem jednorazowym SMS-em przeznaczonym do opisanych wyżej zastosowań. przypadków.
Lista kontrolna
Aby zapewnić jak największą wygodę korzystania z hasła jednorazowego przesłanego SMS-em, wykonaj te czynności:
- Użyj elementu
<input>razem z tymi elementami:type="text"inputmode="numeric"autocomplete="one-time-code"
- Wpisz
@BOUND_DOMAIN #OTP_CODEjako ostatni wiersz wiadomości z hasłem jednorazowym. - Użyj interfejsu WebOTP API.
Użyj elementu <input>
Używanie formularza z elementem <input> to najważniejsza sprawdzona metoda
który działa we wszystkich przeglądarkach. Nawet jeśli inne sugestie
ten post nie działa w niektórych przeglądarkach, użytkownik wciąż będzie mógł wpisać i przesłać hasło jednorazowe
ręcznie.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
Oto kilka pomysłów na to, jak najlepiej wykorzystać pole do wprowadzania danych. funkcje przeglądarki.
type="text"
Hasło jednorazowe składa się zwykle z 5 lub 6 cyfr, dlatego
Funkcja type="number" w polu do wprowadzania danych może wydawać się intuicyjna, ponieważ zmienia
z klawiatury tylko do cyfr. Nie jest to zalecane, ponieważ przeglądarka oczekuje
pole do wprowadzania danych jest liczbą całkowitą, a nie sekwencją wielu liczb,
co może powodować nieoczekiwane działanie. Użycie opcji type="number" powoduje wzrost lub spadek
przyciski do wyświetlania obok pola wprowadzania; naciskając te przyciski
zwiększa lub zmniejsza liczbę i może usunąć poprzedzające zera.
Użyj w zamian zasady type="text". Nie spowoduje to zamiany klawiatury mobilnej w cyfry
tylko, ale to nie problem, bo następna wskazówka dotycząca korzystania z elementu inputmode="numeric"
tę pracę.
inputmode="numeric"
Użyj formatu inputmode="numeric"
aby zmienić klawiaturę telefonu na same cyfry.
Niektóre strony używają type="tel" do wprowadzania hasła jednorazowego, ponieważ
zmienia klawiaturę telefonu na tylko cyfry (w tym * i #), gdy
skupieni. Ten haker był używany w przeszłości, gdy witryna inputmode="numeric"
nie był powszechnie obsługiwany. Od czasu, gdy Firefox zaczął obsługiwać
inputmode="numeric",
nie musisz stosować nieprawidłowej semantycznej haka type="tel".
autocomplete="one-time-code"
autocomplete
pozwala programistom określić uprawnienia przeglądarki
musi zapewniać pomoc w zakresie autouzupełniania i informuje przeglądarkę o
typ oczekiwanego rodzaju informacji.
W przypadku funkcji autocomplete="one-time-code" za każdym razem, gdy użytkownik otrzymuje SMS-a podczas
systemu operacyjnego, system operacyjny analizuje heurystycznie hasło jednorazowe SMS-a,
klawiatura zasugeruje hasło jednorazowe, które użytkownik może wpisać. Działa tylko w Safari 12 i
później na iOS, iPadOS i macOS, ale zdecydowanie zalecamy korzystanie z nich, ponieważ jest to
jest to prosty sposób na ulepszenie działania haseł jednorazowych SMS na tych platformach.
autocomplete="one-time-code" zwiększa wygodę użytkowników, ale ma też więcej możliwości
co można zrobić, sprawdzając, czy wiadomość SMS jest zgodna z wiadomością powiązaną ze źródłem
.
Formatowanie tekstu SMS-a
Zadbaj o wrażenia użytkowników związane z wpisywaniem haseł jednorazowych, dostosowując jednorazowe kody powiązane ze źródłem, które są dostarczane w SMS-ach. specyfikacji.
Reguła formatu jest prosta: dokończ tworzenie SMS-a w domenie odbiorcy.
przed ciągiem @, a hasło jednorazowe poprzedzone ciągiem #.
Na przykład:
Your OTP is 123456
@web-otp.glitch.me #123456
Użycie standardowego formatu wiadomości OTP ułatwia wyodrębnianie łatwiejsze i bardziej niezawodne. Kojarzenie kodów dla haseł jednorazowych z trudniej jest nakłonić użytkowników do podania kodu złośliwym witrynom.
Stosowanie tego formatu przynosi liczne korzyści:
- Hasło jednorazowe będzie powiązane z domeną. Jeśli użytkownik korzysta z domen innych niż z podanego w SMS-ie, sugestia hasła jednorazowego nie będzie się wyświetlać. Zmniejsza to także ryzyko ataków phishingowych i przejęcia konta.
- Przeglądarka będzie teraz w stanie niezawodnie wyodrębnić hasło jednorazowe bez konieczności tajemniczej i niepewnej heurystyki.
gdy strona używa przeglądarki autocomplete="one-time-code" lub przeglądarki Safari z systemem iOS 14 lub nowszym
zaproponuje hasło jednorazowe zgodnie z powyższymi zasadami.
Ten format SMS-ów jest też przydatny w przeglądarkach innych niż Safari. Chrome, Opera,
oraz Vivaldi na Androidzie obsługują też regułę kodów jednorazowych powiązanych ze źródłem z
za pomocą interfejsu WebOTP API, ale nie za pomocą interfejsu autocomplete="one-time-code".
Użycie interfejsu WebOTP API
Interfejs WebOTP API zapewnia dostęp do hasła jednorazowego.
odebrane w SMS-ie. Przez telefon
navigator.credentials.get()
z typem otp (OTPCredential), gdzie transport zawiera witrynę sms.
będzie czekać na SMS-a zgodnego z kodami jednorazowymi związanymi ze źródłem
dostarczone i przyznane przez użytkownika na dostęp. Po przekazaniu hasła jednorazowego do JavaScriptu
witryna może używać ich w formularzu lub POST bezpośrednio na serwerze.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Szczegółowe informacje o korzystaniu z interfejsu WebOTP API znajdziesz w artykule Weryfikowanie numerów telefonów w internecie
za pomocą interfejsu WebOTP API lub skopiuj i wklej ten fragment kodu. (Marka
upewnij się, że element <form> ma prawidłowo ustawione atrybuty action i method).
// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
Zdjęcie: Jason Leung, w: Odchylenie.