Sprawdzone metody dotyczące formularzy jednorazowych SMS-ów

Dowiedz się, jak zoptymalizować formularz SMS-a z kodem weryfikacyjnym i ulepszyć wrażenia użytkownika.

Eiji Kitamura

Prośba o podanie hasła jednorazowego przesłanego SMS-em jest częstym sposobem na potwierdzenie numeru telefonu użytkownika. SMS-owy kod OTP ma kilka zastosowań:

  • Uwierzytelnianie dwuskładnikowe. Oprócz nazwy użytkownika i hasła można użyć kodu OTP w SMS-ie jako mocnego sygnału, że konto należy do osoby, która otrzymała SMS-a z kodem OTP.
  • Weryfikacja numeru telefonu Niektóre usługi używają numeru telefonu jako głównego identyfikatora użytkownika. W takich usługach użytkownicy mogą podać swój numer telefonu i kod OTP otrzymany SMS-em, aby potwierdzić swoją tożsamość. Czasami jest on połączony z kodem PIN, aby stanowiło to uwierzytelnianie dwuskładnikowe.
  • Odzyskiwanie konta. Jeśli użytkownik utraci dostęp do konta, musi istnieć sposób na jego odzyskanie. Wysyłanie e-maila na zarejestrowany adres e-mail lub SMS-a z hasłem jednorazowym na numer telefonu to najpopularniejsze metody odzyskiwania konta.
  • Potwierdzenie płatności W systemach płatności niektóre banki lub wydawcy kart kredytowych ze względów bezpieczeństwa wymagają dodatkowej weryfikacji płatnika. W tym celu często używa się SMS-a z kodem OTP.

W tym poście przedstawiamy sprawdzone metody tworzenia formularzy SMS OTP do wyżej wymienionych zastosowań.

Lista kontrolna

Aby zapewnić użytkownikom jak najlepsze wrażenia podczas korzystania z kodów SMS OTP:

  • Używaj elementu <input> z:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Użyj @BOUND_DOMAIN #OTP_CODE jako ostatniego wiersza SMS-a z kodem OTP.
  • Użyj interfejsu WebOTP API.

Używanie elementu <input>

Korzystanie z formularza z elementem <input> to najważniejsza sprawdzona metoda, ponieważ działa we wszystkich przeglądarkach. Nawet jeśli inne sugestie z tego posta nie zadziałają w pewnej przeglądarce, użytkownik będzie mógł ręcznie wpisać i przesłać kod OTP.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

Oto kilka pomysłów, które pomogą Ci w najlepszy sposób wykorzystać funkcje przeglądarki w polu tekstowym.

type="text"

Ponieważ kody OTP to zwykle 5- lub 6-cyfrowe numery, użycie w polu tekstowym tagu type="number" może wydawać się intuicyjne, ponieważ zmienia klawiaturę w telefonie na klawiaturę numeryczną. Nie zalecamy tego, ponieważ przeglądarka oczekuje, że pole wprowadzania będzie zawierać liczbę całkowitą, a nie ciąg liczb. Może to spowodować nieoczekiwane działanie. Gdy użyjesz type="number", obok pola tekstowego wyświetlą się przyciski w górę i w dół. Ich naciśnięcie spowoduje zwiększenie lub zmniejszenie liczby i może usunąć poprzedzające zera.

Zamiast tego użyj pola type="text". W tym przypadku klawiatura mobilna nie będzie zawierać tylko cyfr, ale to nie problem, ponieważ następna wskazówka dotycząca korzystania z funkcji inputmode="numeric" załatwi sprawę.

inputmode="numeric"

Aby zmienić klawiaturę mobilną na klawiaturę z tylko cyframi, kliknij inputmode="numeric".

Niektóre witryny używają znaku type="tel" w przypadku pól wprowadzania hasła jednorazowego, ponieważ po jego naciśnięciu klawiatura mobilna wyświetla tylko cyfry (w tym * i #). Ten sposób był używany w przeszłości, gdy inputmode="numeric" nie był szeroko obsługiwany. Odkąd Firefox obsługuje inputmode="numeric", nie trzeba używać nieprawidłowego semantycznie kodu type="tel".

autocomplete="one-time-code"

Atrybut autocomplete pozwala deweloperom określić, jakie uprawnienia musi mieć przeglądarka, aby zapewnić pomoc w autouzupełnianiu, oraz informuje przeglądarkę o typie informacji oczekiwanych w polu.

W przypadku autocomplete="one-time-code", gdy użytkownik otrzyma SMS-a, gdy aplikacja jest otwarta, system operacyjny przeanalizuje kod OTP w SMS-ie za pomocą heurystyki, a klawiatura zaproponuje użytkownikowi wpisanie tego kodu. Działa ona tylko w Safari 12 lub nowszej wersji na iOS, iPadOS i macOS, ale zdecydowanie zalecamy jej używanie, ponieważ jest to łatwy sposób na poprawę działania SMS-owego kodu weryfikacyjnego na tych platformach.

`autocomplete="one-time-code"` w działaniu.

autocomplete="one-time-code" zwiększa komfort użytkowników, ale możesz zrobić więcej, aby zadbać o to, aby SMS-y były zgodne z formatem wiadomości z podaniem źródła.

Formatowanie tekstu SMS-a

Ulepsz wrażenia użytkowników podczas wpisywania kodu OTP, dostosowując się do specyfikacji kodów jednorazowych przesyłanych przez SMS.

Reguła formatowania jest prosta: kończ wiadomość SMS domeną odbiorcy poprzedzoną znakiem @, a kod OTP poprzedzony znakiem #.

Na przykład:

Your OTP is 123456

@web-otp.glitch.me #123456

Używanie standardowego formatu wiadomości z hasłem jednorazowym ułatwia i czyni bardziej niezawodnym wyodrębnianie kodów. Powiązanie kodów OTP z witrynami utrudnia użytkownikom podanie kodu w szkodliwych witrynach.

Korzystanie z tego formatu ma kilka zalet:

  • Hasło jednorazowe zostanie powiązane z domeną. Jeśli użytkownik jest w innej domenie niż ta, która została podana w SMS-ie, sugestia kodu OTP nie będzie widoczna. Pozwala to też zmniejszyć ryzyko ataków phishingowych i potencjalnych przejęć konta.
  • Przeglądarka będzie teraz mogła niezawodnie wyodrębnić hasło jednorazowe bez polegania na tajemniczych i niepewnych metodach heurystycznych.

Gdy strona korzysta z autocomplete="one-time-code", Safari w wersji 14 lub nowszej zaproponuje kod OTP zgodnie z podanymi wyżej zasadami.

Ten format wiadomości SMS jest też przydatny w przypadku przeglądarek innych niż Safari. Chrome, Opera i Vivaldi na Androidzie obsługują też regułę dotyczącą kodów jednorazowych powiązanych z domeną za pomocą interfejsu WebOTP API, ale nie za pomocą autocomplete="one-time-code".

Korzystanie z interfejsu WebOTP API

Interfejs WebOTP API zapewnia dostęp do kodu OTP otrzymanego w SMS-ie. Gdy wywołasz navigator.credentials.get() z typem otp (OTPCredential), gdzie transport zawiera sms, strona internetowa będzie czekać na SMS-a z kodem jednorazowym zgodnym z kodem źródłowym, który zostanie dostarczony i zaakceptowany przez użytkownika. Gdy kod OTP zostanie przekazany do JavaScript, witryna może go użyć w formularzu lub przesłać bezpośrednio na serwer.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API w działaniu.

Więcej informacji o używaniu interfejsu WebOTP API znajdziesz w artykule Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API. Możesz też skopiować i wkleić ten fragment kodu. (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 na Unsplash.