Best Practices für SMS-OTP-Formulare

Hier erfährst du, wie du dein OTP-Formular für SMS optimieren und die Nutzerfreundlichkeit verbessern kannst.

Eiji Kitamura

Es ist eine gängige Methode, die Telefonnummer eines Nutzers zu bestätigen, indem er gebeten wird, das per SMS gesendete OTP (einmaliges Passwort) anzugeben. Es gibt einige Anwendungsfälle für SMS-OTP:

  • 2-Faktor-Authentifizierung Neben dem Nutzernamen und Passwort kann ein SMS-OTP als starkes Signal dafür verwendet werden, dass der Inhaber des Kontos die Person ist, die das SMS-OTP erhalten hat.
  • Bestätigung der Telefonnummer Einige Dienste verwenden eine Telefonnummer als primäre Kennung des Nutzers. Bei solchen Diensten können Nutzer ihre Telefonnummer und den per SMS erhaltenen OTP eingeben, um ihre Identität zu bestätigen. Manchmal wird er mit einer PIN kombiniert, um eine Bestätigung in zwei Schritten zu ermöglichen.
  • Kontowiederherstellung Wenn ein Nutzer keinen Zugriff mehr auf sein Konto hat, muss es eine Möglichkeit geben, es wiederherzustellen. Gängige Methoden zur Kontowiederherstellung sind das Senden einer E-Mail an die registrierte E-Mail-Adresse oder eines SMS-OTP an die Telefonnummer des Nutzers.
  • Zahlungsbestätigung: In Zahlungssystemen verlangen einige Banken oder Kreditkartenaussteller aus Sicherheitsgründen eine zusätzliche Authentifizierung des Zahlungspflichtigen. Zu diesem Zweck wird in der Regel ein SMS-OTP verwendet.

In diesem Beitrag werden Best Practices für das Erstellen eines SMS-OTP-Formulars für die oben genannten Anwendungsfälle erläutert.

Checkliste

So kannst du die Nutzerfreundlichkeit des SMS-OTPs optimieren:

  • Verwenden Sie das <input>-Element mit:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Verwenden Sie @BOUND_DOMAIN #OTP_CODE als letzte Zeile der OTP-SMS.
  • Verwenden Sie die WebOTP API.

<input>-Element verwenden

Die Verwendung eines Formulars mit einem <input>-Element ist die wichtigste Best Practice, da es in allen Browsern funktioniert. Auch wenn andere Vorschläge aus diesem Beitrag in einem Browser nicht funktionieren, kann der Nutzer das OTP manuell eingeben und senden.

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

Im Folgenden finden Sie einige Ideen, wie Sie die Browserfunktionen für ein Eingabefeld optimal nutzen können.

type="text"

Da OTPs in der Regel fünf- oder sechsstellige Zahlen enthalten, kann die Verwendung von type="number" für ein Eingabefeld intuitiv erscheinen, da die Mobiltelefontastatur dadurch nur noch Zahlen enthält. Dies wird nicht empfohlen, da der Browser in einem Eingabefeld eine Zählzahl und keine Sequenz mehrerer Zahlen erwartet. Dies kann zu unerwartetem Verhalten führen. Wenn Sie type="number" verwenden, werden neben dem Eingabefeld Auf- und Ab-Schaltflächen angezeigt. Wenn Sie diese Schaltflächen drücken, wird die Zahl erhöht oder verringert und es werden möglicherweise vorangestellte Nullen entfernt.

Verwenden Sie stattdessen type="text". Dadurch wird die mobile Tastatur nicht nur in eine Zahlentastatur umgewandelt. Das ist aber in Ordnung, da der nächste Tipp zur Verwendung von inputmode="numeric" diese Aufgabe übernimmt.

inputmode="numeric"

Mit inputmode="numeric" können Sie die mobile Tastatur auf Zahlen umstellen.

Einige Websites verwenden type="tel" für OTP-Eingabefelder, da dadurch auch die mobile Tastatur auf Zahlen (einschließlich * und #) umgestellt wird, wenn sie den Fokus erhält. Dieser Hack wurde in der Vergangenheit verwendet, als inputmode="numeric" noch nicht weithin unterstützt wurde. Seit Firefox inputmode="numeric" unterstützt, ist es nicht mehr notwendig, den semantisch falschen type="tel"-Hack zu verwenden.

autocomplete="one-time-code"

Mit dem Attribut autocomplete können Entwickler angeben, welche Berechtigung der Browser für die automatische Vervollständigung hat, und den Browser über die Art der Informationen informieren, die im Feld erwartet werden.

Mit autocomplete="one-time-code" wird jedes Mal, wenn ein Nutzer eine SMS erhält, während ein Formular geöffnet ist, das OTP in der SMS heuristisch geparst und die Tastatur schlägt dem Nutzer das OTP vor. Sie funktioniert nur in Safari 12 und höher auf iOS-, iPadOS- und macOS-Geräten. Wir empfehlen sie jedoch dringend, da sie eine einfache Möglichkeit bietet, die Nutzung von SMS-OTPs auf diesen Plattformen zu verbessern.

`autocomplete="one-time-code"` in Aktion.

autocomplete="one-time-code" verbessert die Nutzerfreundlichkeit. Sie können aber noch mehr tun, indem Sie dafür sorgen, dass die SMS dem nachrichtsgebundenen Format des Ursprungs entspricht.

SMS-Text formatieren

Die Eingabe eines OTP kann für Nutzer optimiert werden, indem Sie die Spezifikation für standortgebundene Einmalcodes, die per SMS gesendet werden einhalten.

Die Formatregel ist einfach: Die SMS-Nachricht muss mit der Domain des Empfängers enden, vor der @ steht, und dem OTP, vor dem # steht.

Beispiel:

Your OTP is 123456

@web-otp.glitch.me #123456

Die Verwendung eines Standardformats für OTP-Nachrichten erleichtert das Extrahieren von Codes aus ihnen und macht es zuverlässiger. Wenn OTP-Codes mit Websites verknüpft sind, ist es schwieriger, Nutzer dazu zu bringen, einen Code auf schädlichen Websites anzugeben.

Die Verwendung dieses Formats bietet einige Vorteile:

  • Das OTP ist an die Domain gebunden. Wenn sich der Nutzer in einer anderen Domain als der in der SMS angegebenen Domain befindet, wird der OTP-Vorschlag nicht angezeigt. Außerdem wird das Risiko von Phishing-Angriffen und potenziellen Kontodiebstählen verringert.
  • Der Browser kann jetzt das OTP zuverlässig extrahieren, ohne auf mysteriöse und fehlerhafte Heuristiken angewiesen zu sein.

Wenn eine Website autocomplete="one-time-code" verwendet, schlägt Safari mit iOS 14 oder höher das OTP gemäß den oben genannten Regeln vor.

Dieses SMS-Nachrichtenformat bietet auch Vorteile für andere Browser als Safari. Chrome, Opera und Vivaldi für Android unterstützen die Regel für an den Ursprung gebundene Einmalcodes auch mit der WebOTP API, jedoch nicht über autocomplete="one-time-code".

WebOTP API verwenden

Die WebOTP API bietet Zugriff auf das OTP, das eine SMS-Nachricht empfangen hat. Wenn navigator.credentials.get() mit dem otp-Typ (OTPCredential) aufgerufen wird, wobei transport sms enthält, wartet die Website, bis eine SMS mit den standortgebundenen Einmalcodes zugestellt wird, und gewährt dem Nutzer dann Zugriff. Nachdem das OTP an JavaScript übergeben wurde, kann es in einem Formular verwendet oder direkt an den Server gesendet werden.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Die WebOTP API in Aktion.

Weitere Informationen zur Verwendung der WebOTP API finden Sie unter Telefonnummern im Web mit der WebOTP API bestätigen. Sie können auch das folgende Snippet kopieren und einfügen. Achten Sie darauf, dass für das <form>-Element die Attribute action und method richtig festgelegt sind.

// 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);
    });
  });
}

Foto von Jason Leung bei Unsplash.