Sprawdzone metody dotyczące formularzy jednorazowych SMS-ów

Dowiedz się, jak zoptymalizować formularz SMS z hasłem jednorazowym i zwiększyć wygodę użytkowników.

Eiji Kitamura

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_CODE jako 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"` w akcji.

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);
, WebOTP API w akcji.

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.