Sprawdzone metody dotyczące formularzy jednorazowych SMS-ów

Dowiedz się, jak zoptymalizować formularz haseł jednorazowych SMS-ów i poprawić wrażenia użytkowników.

Eiji Kitamura

Proszenie użytkownika o podanie hasła jednorazowego przesłanego SMS-em to często stosowany sposób potwierdzenia numeru telefonu użytkownika. Hasło jednorazowe z SMS-ów ma kilka zastosowań:

  • Uwierzytelnianie dwuskładnikowe. Oprócz nazwy użytkownika i hasła, hasła jednorazowe wysyłane SMS-em mogą stanowić silny 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 jako głównego identyfikatora użytkownika. W takich usługach użytkownicy mogą potwierdzać swoją tożsamość, podając swój numer telefonu oraz numer jednorazowy otrzymany SMS-em. Czasami jest ono połączone z kodem PIN, co stanowi uwierzytelnianie dwuskładnikowe.
  • Odzyskiwanie konta. Gdy użytkownik utraci dostęp do swojego konta, musi być jakiś sposób na jego odzyskanie. Częstą metodą odzyskiwania konta jest wysłanie e-maila na zarejestrowany adres e-mail lub wysłanie hasła jednorazowego przesłanego SMS-em na numer telefonu.
  • Potwierdzenie płatności w systemach płatności niektóre banki lub wystawcy kart kredytowych ze względów bezpieczeństwa proszą płatnika o dodatkowe uwierzytelnienie. Powszechnie stosuje się w tym celu hasło jednorazowe z SMS-ów.

W tym poście opisujemy sprawdzone metody tworzenia formularzy haseł jednorazowych SMS-ów w powyższych przypadkach użycia.

Lista kontrolna

Aby zadbać o jak najlepsze wrażenia użytkowników podczas korzystania z hasła jednorazowego przesłanego SMS-em, wykonaj te czynności:

  • Używaj elementu <input> w tych elementach:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Wpisz @BOUND_DOMAIN #OTP_CODE jako ostatni wiersz w SMS-ie z hasłem jednorazowym.
  • Użyj interfejsu WebOTP API.

Używaj elementu <input>

Korzystanie z formularza z elementem <input> to najważniejsza sprawdzona metoda, z której warto skorzystać, ponieważ działa on we wszystkich przeglądarkach. Nawet jeśli inne sugestie z tego posta nie zadział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>

Poniżej znajdziesz kilka pomysłów na jak najlepsze wykorzystanie pola do wprowadzania danych w przeglądarce.

type="text"

Hasła jednorazowe składają się zwykle z 5- lub 6-cyfrowych liczb, więc użycie type="number" w polu do wprowadzania danych może wydawać się intuicyjne, ponieważ powoduje to zmianę klawiatury urządzenia mobilnego na same cyfry. Nie jest to zalecane, ponieważ przeglądarka oczekuje, że pole do wprowadzania danych będzie liczbą, a nie ciągiem wielu liczb, co może spowodować nieoczekiwane działanie. Użycie funkcji type="number" powoduje, że obok pola do wprowadzania danych wyświetlają się przyciski w górę i w dół. Naciśnięcie tych przycisków zwiększa lub zmniejsza liczbę oraz może usunąć poprzedzające zera.

Użyj w zamian zasady type="text". Nie spowoduje to przekształcenia klawiatury mobilnej w cyfry, ale druga wskazówka dotycząca korzystania z inputmode="numeric" spełnia to zadanie.

inputmode="numeric"

Aby zmienić klawiaturę mobilną tylko na cyfry, użyj klawisza inputmode="numeric".

Niektóre strony używają pola type="tel" do wprowadzania hasła jednorazowego, ponieważ powoduje to również zmianę klawiatury urządzenia mobilnego na cyfry (w tym * i #), gdy ją aktywujesz. Ten atak został użyty w przeszłości, gdy usługa inputmode="numeric" nie była powszechnie obsługiwana. Ponieważ Firefox zaczął obsługiwać inputmode="numeric", nie musisz używać niepoprawnego semantyki kodu type="tel".

autocomplete="one-time-code"

autocomplete pozwala deweloperom określić uprawnienia przeglądarki w przypadku wspomagania autouzupełniania, a także informuje przeglądarkę o typie informacji oczekiwanych w tym polu.

Funkcja autocomplete="one-time-code" za każdym razem, gdy użytkownik otrzyma SMS-a, gdy jest otwarty formularz, system operacyjny przeanalizuje hasło jednorazowe w SMS-ie, a klawiatura zaproponuje użytkownikowi wpisanie hasła jednorazowego. Działa on tylko w Safari 12 i nowszych w systemach iOS, iPadOS i macOS, ale zdecydowanie zalecamy korzystanie z niego, ponieważ jest to łatwy sposób na ulepszenie działania haseł jednorazowych SMS-ów na tych platformach.

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

autocomplete="one-time-code" zwiększa komfort użytkowników, ale możesz też sprawdzić, czy SMS-y są zgodne z formatem wiadomości powiązanym ze źródłem.

Formatowanie tekstu SMS-a

Zadbaj o wrażenia użytkowników podczas wpisywania hasła jednorazowego, dopasowując się do jednorazowych kodów powiązanych ze źródłem, które są dostarczane za pomocą SMS-ów.

Reguła formatowania jest prosta: zakończ wysyłanie SMS-a przy użyciu domeny odbiorcy poprzedzonej @ i hasłem jednorazowym poprzedzonym prefiksem #.

Na przykład:

Your OTP is 123456

@web-otp.glitch.me #123456

Używanie standardowego formatu wiadomości z hasłami jednorazowymi ułatwia wyodrębnianie z nich kodów i zwiększa ich niezawodność. Powiązanie kodów jednorazowych z witrynami utrudnia podstępne nakłanianie użytkowników do wpisania kodu do złośliwych witryn.

Stosowanie tego formatu ma kilka zalet:

  • Hasło jednorazowe zostanie powiązane z domeną. Jeśli użytkownik korzysta z innej domeny niż podana w SMS-ie, sugestia hasła jednorazowego nie wyświetli się. Zmniejsza to także ryzyko ataków phishingowych i potencjalnych przejęć kont.
  • Przeglądarka będzie teraz w stanie niezawodnie wyodrębnić hasło jednorazowe bez względu na tajemnicze i niepewne działanie heurystyki.

Gdy strona używa autocomplete="one-time-code", Safari w systemie iOS 14 lub nowszym zaproponuje hasło jednorazowe zgodnie z powyższymi regułami.

Ten format wiadomości SMS jest korzystny również w przeglądarkach innych niż Safari. Chrome, Opera i Vivaldi na Androidzie obsługują też regułę kodów jednorazowych związanych ze źródłem za pomocą interfejsu WebOTP API, ale nie przez autocomplete="one-time-code".

Używanie interfejsu WebOTP API

Interfejs WebOTP API zapewnia dostęp do hasła jednorazowego odebranego w SMS-ie. Wywołując metodę navigator.credentials.get() z typem otp (OTPCredential), gdzie transport zawiera sms, witryna będzie oczekiwać na SMS-a zgodnego z jednorazowymi kodami związanymi ze źródłem, który zostanie dostarczony i przyznawany przez użytkownika. Po przekazaniu hasła jednorazowego do JavaScriptu witryna może go użyć w formularzu lub wysłać go za pomocą POST bezpośrednio na serwer.

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

Aby dowiedzieć się, jak korzystać z interfejsu WebOTP API, przeczytaj artykuł 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, strona Unsplash.