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

Typowym sposobem potwierdzenia numeru telefonu użytkownika jest prośba o podanie hasła jednorazowego przesłanego SMS-em. SMS-owy kod OTP ma kilka zastosowań:

  • Uwierzytelnianie dwuskładnikowe. Oprócz nazwy użytkownika i hasła można użyć kodu SMS OTP jako mocnego sygnału, że właścicielem konta jest osoba, która otrzymała kod SMS 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ą wpisać 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: ze względów bezpieczeństwa niektóre banki i wydawcy kart kredytowych wymagają od płatnika dodatkowego uwierzytelnienia. 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ć jak największą wygodę korzystania z hasła jednorazowego przesłanego SMS-em, wykonaj te czynności:

  • 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 oraz może usunąć poprzedzające zera.

Zamiast tego użyj pola type="text". Nie spowoduje to zmiany klawiatury mobilnej w samych cyfrach, ale nic się nie stało, bo następna wskazówka dotycząca korzystania z funkcji inputmode="numeric" jest już poprawna.

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 haker był używany w przeszłości, gdy usługa inputmode="numeric" nie była powszechnie obsługiwana. 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 tylko w Safari w wersji 12 oraz w nowszych wersjach na iOS, iPadOS i macOS, ale zdecydowanie zalecamy korzystanie z niej, ponieważ jest to łatwy sposób na ulepszenie działania haseł jednorazowych w SMS-ach 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 za pomocą SMS-ów.

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 określona w SMS-ie, sugestia kodu OTP nie będzie widoczna. Zmniejsza to także ryzyko ataków phishingowych i przejęcia konta.
  • Przeglądarka będzie teraz mogła niezawodnie wyodrębnić hasło jednorazowe bez polegania na tajemniczych i niepewnych metodach heurystycznych.

Jeśli strona używa identyfikatora autocomplete="one-time-code", Safari z iOS w wersji 14 lub nowszej zaproponuje hasło jednorazowe zgodnie z podanymi wyżej regułami.

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. Po przekazaniu hasła jednorazowego do JavaScriptu witryna może użyć go w formularzu lub wysłać POST 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. 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.