Best Practices für SMS-OTP-Formulare

Hier erfahren Sie, wie Sie Ihr SMS-OTP-Formular optimieren und die Nutzerfreundlichkeit verbessern können.

Eiji Kitamura

Es ist eine gängige Methode, die Telefonnummer eines Nutzers zu bestätigen, indem er gebeten wird, das per SMS übermittelte 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 sie 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.
  • Zahlungsbestätigung: In Zahlungssystemen fordern einige Banken oder Kreditkartenaussteller aus Sicherheitsgründen eine zusätzliche Authentifizierung des Zahlungspflichtigen an. SMS-OTP wird häufig zu diesem Zweck 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 sind, erscheint die Verwendung von type="number" für ein Eingabefeld intuitiv, da dadurch die mobile Tastatur nur auf Zahlen umgestellt wird. 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"

Verwenden Sie inputmode="numeric", um die mobile Tastatur in eine reine Zahlentastatur umzuwandeln.

Einige Websites verwenden type="tel" für OTP-Eingabefelder, da dadurch die mobile Tastatur beim Fokus nur auf Zahlen (einschließlich * und #) umgestellt wird. Dieser Hack wurde in der Vergangenheit verwendet, als inputmode="numeric" noch nicht weithin unterstützt wurde. Da inputmode="numeric" in Firefox unterstützt wird, ist der semantisch falsche type="tel"-Hack nicht mehr erforderlich.

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.

Wenn ein Nutzer mit autocomplete="one-time-code" eine SMS erhält, während ein Formular geöffnet ist, analysiert das Betriebssystem das OTP in der SMS heuristisch und die Tastatur schlägt dem Nutzer das OTP zur Eingabe 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 nachrichtsformat 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 Sie OTP-Codes mit Websites verknüpfen, ist es schwieriger, Nutzer dazu zu bringen, einen Code auf schädlichen Websites anzugeben.

Die Verwendung dieses Formats bietet einige Vorteile:

  • Der 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 fehleranfällige 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 in einer SMS-Nachricht empfangen wurde. 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.