Sprawdzone metody dotyczące formularzy jednorazowych SMS-ów

Eiji Kitamura

Często prosi się użytkownika o podanie hasła jednorazowego, aby potwierdzić jego tożsamość przez wysłanie SMS-a. Przykłady zastosowania haseł jednorazowych wysyłanych SMS-em:

  • Uwierzytelnianie dwuskładnikowe. Oprócz nazwy użytkownika i hasła hasło jednorazowe wysłane SMS-em może być silnym sygnałem, że konto należy do osoby, która otrzymała to hasło.
  • 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 hasło jednorazowe otrzymane 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 utraci dostęp do konta, musi mieć możliwość jego odzyskania. Wysłanie e-maila na zarejestrowany adres e-mail lub hasła jednorazowego SMS-em na numer telefonu to typowe metody odzyskiwania konta.
  • Potwierdzenie płatności W systemach płatności niektóre banki lub wystawcy kart kredytowych ze względów bezpieczeństwa wymagają od płatnika dodatkowego uwierzytelnienia. W tym celu często używa się haseł jednorazowych wysyłanych SMS-em.

Poniżej znajdziesz sprawdzone metody tworzenia formularzy haseł jednorazowych SMS w tych przypadkach użycia.

Lista kontrolna

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

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

Używanie elementu <input>

Używanie 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ł 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, które pomogą Ci w pełni wykorzystać funkcje przeglądarki w polu do wprowadzania danych.

type="text"

Hasła jednorazowe są zwykle liczbami 5- lub 6-cyfrowymi, więc użycie type="number" w polu do wprowadzania danych może wydawać się intuicyjne, ponieważ powoduje zmianę klawiatury mobilnej na klawiaturę numeryczną. Nie zalecamy tego, ponieważ przeglądarka oczekuje, że pole do wprowadzania danych będzie zawierać liczbę policzalną, a nie ciąg wielu liczb, co może powodować nieoczekiwane zachowanie. Użycie type="number" powoduje wyświetlenie przycisków w górę i w dół obok pola do wprowadzania danych. Naciśnięcie tych przycisków zwiększa lub zmniejsza liczbę i może usunąć poprzedzające zera.

Użyj w zamian zasady type="text". Nie spowoduje to, że na klawiaturze mobilnej będą wyświetlane tylko cyfry, ale to nie problem, ponieważ następna wskazówka dotycząca używania inputmode="numeric" właśnie to umożliwia.

inputmode="numeric"

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

Niektóre witryny używają type="tel" w polach do wprowadzania danych dla haseł jednorazowych, ponieważ po zaznaczeniu pola klawiatura mobilna przełącza się na tryb numeryczny (w tym * i #). Ta sztuczka była używana w przeszłości, gdy inputmode="numeric" nie była powszechnie obsługiwana. Od kiedy Firefox zaczął obsługiwać inputmode="numeric", nie trzeba już używać niepoprawnego semantycznie obejścia type="tel".

autocomplete="one-time-code"

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

Dzięki autocomplete="one-time-code", gdy użytkownik otrzyma SMS-a, gdy formularz jest otwarty, system operacyjny przeanalizuje heurystycznie hasło jednorazowe w SMS-ie, a klawiatura zasugeruje hasło jednorazowe do wpisania przez użytkownika. Działa tylko w przeglądarce Safari 12 i nowszych wersjach na iOS, iPadOS i macOS, ale zdecydowanie zalecamy korzystanie z tej metody, ponieważ jest to lepszy sposób na poprawę działania haseł jednorazowych SMS na tych platformach.

autocomplete="one-time-code" w akcji.

autocomplete="one-time-code" poprawia wrażenia użytkownika, ale możesz zrobić więcej, upewniając się, że SMS jest zgodny z formatem wiadomości powiązanej z pochodzeniem.

Atrybuty opcjonalne

Atrybuty opcjonalne:

Więcej porad znajdziesz w naszych sprawdzonych metodach dotyczących formularzy logowania.

Formatowanie tekstu SMS-a

Ułatw użytkownikom wpisywanie haseł jednorazowych, dostosowując się do specyfikacji kodów jednorazowych powiązanych z pochodzeniem dostarczanych przez SMS-y.

Podstawowa reguła formatowania jest taka: wiadomość SMS musi kończyć się domeną odbiorcy poprzedzoną znakiem @ i hasłem jednorazowym poprzedzonym znakiem #.

Na przykład:

Your OTP is 123456

@web-otp.example.com #123456

Standardowy format wiadomości z hasłem jednorazowym ułatwia ich wyodrębnianie i zwiększa niezawodność. Powiązanie kodów OTP z witrynami utrudnia oszukiwanie użytkowników i nakłanianie ich do podawania kodów na szkodliwych stronach.

Precyzyjne reguły formatowania

Precyzyjne reguły to:

  • Wiadomość zaczyna się od (opcjonalnego) tekstu zrozumiałego dla człowieka, który zawiera ciąg alfanumeryczny składający się z 4–10 znaków, w tym co najmniej 1 cyfry. Ostatni wiersz jest przeznaczony na adres URL i hasło jednorazowe.
  • Część domeny adresu URL witryny, która wywołała interfejs API, musi być poprzedzona ciągiem @.
  • Adres URL musi zawierać #, a po nim hasło jednorazowe. Liczba znaków nie może przekraczać 140.

Użycie tego formatu zapewnia kilka korzyści:

  • Hasło jednorazowe zostanie powiązane z domeną. Jeśli użytkownik znajduje się w domenach innych niż określona w SMS-ie, sugestia hasła jednorazowego nie pojawi się. Zmniejsza to też ryzyko ataków phishingowych i potencjalnych przejęć kont.
  • Przeglądarka będzie teraz mogła niezawodnie wyodrębniać hasło jednorazowe bez polegania na tajemniczych i zawodnych heurystykach.

Gdy witryna używa autocomplete="one-time-code", Safari na iOS 14 lub nowszym sugeruje hasło jednorazowe zgodnie z tymi regułami.

Ten format SMS-ów jest też korzystny dla przeglądarek innych niż Safari. Chrome, Opera i Vivaldi na Androidzie również obsługują regułę kodów jednorazowych powiązanych z pochodzeniem za pomocą interfejsu WebOTP API, ale nie przez autocomplete="one-time-code".

Korzystanie z interfejsu WebOTP API

Interfejs WebOTP API zapewnia dostęp do hasła jednorazowego otrzymanego w SMS-ie. Po wywołaniu navigator.credentials.get() z typem otp (OTPCredential), gdzie transport zawiera sms, witryna będzie czekać na SMS-a zgodnego z kodami jednorazowymi powiązanymi z miejscem pochodzenia, który zostanie dostarczony i któremu użytkownik przyzna dostęp. Gdy hasło jednorazowe zostanie przekazane do JavaScriptu, 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);
Interfejs WebOTP API w akcji.

Szczegółowe informacje o korzystaniu z interfejsu WebOTP API znajdziesz w artykule Verify phone numbers on the web with the WebOTP API (Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API). Możesz też skopiować i wkleić 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);
    });
  });
}