Sprawdzone metody dotyczące formularzy jednorazowych SMS-ów

Eiji Kitamura

Często prosi się użytkownika o podanie jednorazowego hasła (OTP) w SMS-ie, aby potwierdzić jego tożsamość. Przykłady zastosowań jednorazowych kodów SMS:

  • Uwierzytelnianie dwuskładnikowe. Oprócz nazwy użytkownika i hasła jednorazowy kod SMS może być silnym sygnałem, że konto należy do osoby, która otrzymała ten kod.
  • Potwierdzanie numeru telefonu Niektóre usługi używają numeru telefonu jako głównego identyfikatora użytkownika. W takich usługach użytkownicy mogą wpisać swój numer telefonu i kod OTP otrzymany w SMS-ie, aby potwierdzić swoją tożsamość. Czasami jest on łączony z kodem PIN, aby utworzyć uwierzytelnianie dwuskładnikowe.
  • Odzyskiwanie konta. Jeśli użytkownik straci dostęp do konta, musi mieć możliwość jego odzyskania. Wysyłanie e-maila na zarejestrowany adres e-mail lub SMS-a z hasłem jednorazowym na numer telefonu to popularne 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ą od płatnika dodatkowego uwierzytelnienia. W tym celu często używa się jednorazowego hasła SMS.

Poniżej znajdziesz sprawdzone metody tworzenia formularzy z kodem OTP SMS w tych przypadkach użycia.

Lista kontrolna

Aby zapewnić użytkownikom jak najlepsze wrażenia z korzystania z jednorazowego hasła SMS, wykonaj te czynności:

  • Użyj elementu <input> z tymi elementami:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Użyj @BOUND_DOMAIN #OTP_CODE jako ostatniego wiersza wiadomości SMS 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 działają w niektórych przeglądarkach, użytkownik nadal 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 pełni wykorzystać funkcje przeglądarki w przypadku pola wprowadzania.

type="text"

Kody OTP to zwykle 5- lub 6-cyfrowe numery, więc użycie type="number" w polu wejściowym może wydawać się intuicyjne, ponieważ zmienia klawiaturę mobilną na klawiaturę numeryczną. Nie jest to zalecane, ponieważ przeglądarka oczekuje, że pole wejściowe będzie liczbą, a nie ciągiem wielu liczb, co może powodować nieoczekiwane zachowania. Użycie type="number" powoduje wyświetlenie przycisków w górę i w dół obok pola wprowadzania. Naciśnięcie tych przycisków zwiększa lub zmniejsza liczbę i może usuwać zera poprzedzające.

Zamiast niej używaj zasady type="text". Nie spowoduje to, że klawiatura mobilna będzie zawierać tylko cyfry, ale to nie problem, ponieważ następna wskazówka dotycząca używania inputmode="numeric" to umożliwia.

inputmode="numeric"

Użyj inputmode="numeric", aby zmienić klawiaturę mobilną na klawiaturę z samymi cyframi.

Niektóre witryny używają type="tel" w polach wprowadzania haseł jednorazowych, ponieważ po zaznaczeniu tego pola klawiatura mobilna przełącza się na tryb wpisywania tylko cyfr (w tym * i #). Ten sposób był używany w przeszłości, gdy inputmode="numeric" nie było powszechnie obsługiwane. Odkąd Firefox zaczął obsługiwaćinputmode="numeric", nie musisz już stosować niepoprawnego semantycznie obejścia type="tel".

autocomplete="one-time-code"

autocomplete umożliwia deweloperom określenie, jakie uprawnienia ma przeglądarka w zakresie pomocy w autouzupełnianiu, i informuje ją o rodzaju informacji oczekiwanych w polu.

autocomplete="one-time-code" – gdy użytkownik otrzyma SMS-a podczas otwartego formularza, system operacyjny heurystycznie przeanalizuje kod OTP w SMS-ie, a klawiatura zaproponuje użytkownikowi wpisanie tego kodu. Działa tylko w przeglądarce Safari 12 i nowszej na urządzeniach z iOS, iPadOS i macOS, ale zdecydowanie zalecamy korzystanie z niej, ponieważ jest to lepszy sposób na poprawę wygody korzystania z SMS-ów OTP na tych platformach.

autocomplete="one-time-code" w trakcie działania.

autocomplete="one-time-code" poprawia komfort użytkowników, ale możesz zrobić więcej, dbając o to, aby wiadomość SMS była zgodna z formatem wiadomości powiązanej z nadawcą.

Atrybuty opcjonalne

Atrybuty opcjonalne:

Więcej wskazówek znajdziesz w naszych sprawdzonych metodach dotyczących formularzy logowania.

Formatowanie tekstu SMS-a

Zwiększ wygodę użytkowników podczas wpisywania kodu OTP, dostosowując go do specyfikacji kodów jednorazowych powiązanych z pochodzeniem, które są dostarczane przez SMS.

Podstawowa reguła formatowania jest następująca: zakończ wiadomość SMS domeną odbiorcy poprzedzoną znakiem @, a kodem OTP poprzedzonym znakiem #.

Na przykład:

Your OTP is 123456

@web-otp.glitch.me #123456

Standardowy format wiadomości z kodem OTP ułatwia i usprawnia wyodrębnianie kodu. Powiązanie kodów OTP z witrynami utrudnia nakłonienie użytkowników do podania kodu w szkodliwych witrynach.

Precyzyjne reguły formatowania

Precyzyjne reguły to:

  • Wiadomość zaczyna się od (opcjonalnego) tekstu czytelnego dla człowieka, który zawiera 4–10-znakowy ciąg alfanumeryczny z co najmniej jedną cyfrą. Ostatnia linia jest zarezerwowana na adres URL i kod OTP.
  • Część adresu URL witryny, która wywołała interfejs API, musi być poprzedzona znakiem @.
  • Adres URL musi zawierać znak #, a po nim kod OTP. Liczba znaków nie może przekraczać 140.

Używanie tego formatu ma kilka zalet:

  • Hasło jednorazowe będzie powiązane z domeną. Jeśli użytkownik jest w domenie innej niż ta podana w SMS-ie, sugestia kodu OTP się nie pojawi. Zmniejsza to również ryzyko ataków phishingowych i przejęcia konta.
  • Przeglądarka będzie teraz mogła niezawodnie wyodrębniać kody OTP bez polegania na niejasnych i niestabilnych heurystykach.

Gdy witryna używa autocomplete="one-time-code", Safari w systemie iOS 14 lub nowszym będzie sugerować kod OTP zgodnie z tymi regułami.

Ten format wiadomości SMS jest korzystny również dla przeglądarek innych niż Safari. Chrome, Opera i Vivaldi na Androidzie również obsługują regułę jednorazowych kodów powiązanych z pochodzeniem 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. Wywołując funkcję navigator.credentials.get() z parametrem otp typu OTPCredential, gdzie transport zawiera sms, witryna będzie czekać na dostarczenie SMS-a zgodnego z kodami jednorazowymi powiązanymi z pochodzeniem i przyznanie dostępu przez użytkownika. Gdy kod OTP zostanie przekazany do JavaScriptu, witryna może użyć go 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.

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: Pamiętaj, aby w pliku <form> ustawić 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);
    });
  });
}