Best Practices für SMS-OTP-Formulare

Erfahre, wie du dein SMS-OTP-Formular optimieren und die Nutzerfreundlichkeit verbessern kannst.

Eiji Kitamura

Eine gängige Methode zur Bestätigung der Telefonnummer eines Nutzers ist die Eingabe des per SMS zugestellten OTP (Einmalpasswort). Es gibt einige Anwendungsfälle für SMS-OTP:

  • 2-Faktor-Authentifizierung: Neben dem Nutzernamen und dem Passwort kann das SMS-OTP auch als starkes Signal dafür verwendet werden, dass das Konto der Person gehört, die das SMS-OTP erhalten hat.
  • Bestätigung der Telefonnummer: Einige Dienste verwenden eine Telefonnummer als primäre Kennung des Nutzers. In solchen Diensten können Nutzer ihre Telefonnummer und das per SMS empfangene OTP eingeben, um ihre Identität zu bestätigen. Manchmal wird er zu einer 2-Faktor-Authentifizierung mit einer PIN kombiniert.
  • Kontowiederherstellung: Wenn ein Nutzer keinen Zugriff mehr auf sein Konto hat, muss eine Möglichkeit zur Wiederherstellung vorhanden sein. Häufige Methoden zur Kontowiederherstellung sind das Senden einer E-Mail an die registrierte E-Mail-Adresse oder ein SMS-OTP an die Telefonnummer.
  • Zahlungsbestätigung In Zahlungssystemen fordern einige Banken oder Kreditkartenaussteller aus Sicherheitsgründen eine zusätzliche Authentifizierung vom Zahlungspflichtigen an. Zu diesem Zweck wird in der Regel ein SMS-OTP verwendet.

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

Checkliste

So sorgen Sie dafür, dass das SMS-OTP für Nutzer optimal funktioniert:

  • 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, die Sie befolgen können, 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 dafür sorgen können, dass ein Eingabefeld die Browserfunktion optimal nutzt.

type="text"

Da OTPs normalerweise aus fünf- oder sechsstelligen Zahlen bestehen, mag die Verwendung von type="number" für ein Eingabefeld intuitiv erscheinen, da die Tastatur auf Mobilgeräten dadurch nur in Zahlen geändert wird. Dies wird nicht empfohlen, da der Browser davon ausgeht, dass ein Eingabefeld eine zählbare Zahl und keine Folge aus mehreren Zahlen enthält. Dies kann zu unerwartetem Verhalten führen. Wenn Sie type="number" verwenden, werden neben dem Eingabefeld Schaltflächen zum Auf- und Abwärtszählen angezeigt. Durch Drücken dieser Tasten wird die Zahl erhöht oder verringert und unter Umständen die vorangehenden Nullen entfernt.

Verwenden Sie stattdessen type="text". Die mobile Tastatur wird dadurch zwar nicht nur in Zahlen umgewandelt, das ist aber in Ordnung, da der nächste Tipp für die Verwendung von inputmode="numeric" genau das macht.

inputmode="numeric"

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

Einige Websites verwenden type="tel" für OTP-Eingabefelder, da die Tastatur des Mobilgeräts außerdem nur Zahlen (einschließlich * und #) enthält, wenn es hervorgehoben wird. Dieser Hack wurde in der Vergangenheit verwendet, als inputmode="numeric" nicht allgemein unterstützt wurde. Seit Firefox unterstützt wird inputmode="numeric", besteht keine Notwendigkeit, den semantisch falschen type="tel"-Hack zu verwenden.

autocomplete="one-time-code"

Mit dem Attribut autocomplete können Entwickler angeben, welche Berechtigung der Browser hat, um Unterstützung durch die automatische Vervollständigung zu bieten. Außerdem wird der Browser über die Art der Informationen informiert, die im Feld erwartet werden.

Mit autocomplete="one-time-code" wird jedes Mal, wenn ein Nutzer eine SMS-Nachricht erhält, während ein Formular geöffnet ist, das Betriebssystem das OTP in der SMS heuristisch parsen und die Tastatur schlägt dem Nutzer das OTP vor, das der Nutzer eingeben muss. Sie funktioniert nur unter Safari 12 und höher unter iOS, iPadOS und macOS, wird aber dringend empfohlen, da es eine einfache Möglichkeit ist, die SMS-OTP-Funktion auf diesen Plattformen zu verbessern.

„autocomplete="one-time-code"“ in Aktion.

autocomplete="one-time-code" verbessert die Nutzererfahrung. Sie können jedoch noch mehr tun, indem Sie sicherstellen, dass die SMS dem an den Ursprung gebundenen Nachrichtenformat entspricht.

SMS-Text formatieren

Verbessern Sie die Nutzerfreundlichkeit bei der Eingabe eines OTP durch Ausrichtung auf die Spezifikation ursprungsgebundene einmalige Codes, die per SMS gesendet werden.

Die Formatierungsregel ist einfach: Beende die SMS mit der Empfängerdomain mit vorangestelltem @ und dem OTP mit vorangestelltem #.

Beispiel:

Your OTP is 123456

@web-otp.glitch.me #123456

Die Verwendung eines Standardformats für OTP-Nachrichten macht das Extrahieren von Codes aus ihnen einfacher und zuverlässiger. Durch die Verknüpfung von OTP-Codes mit Websites wird es schwieriger, Nutzer dazu zu bringen, schädlichen Websites einen Code zu senden.

Die Verwendung dieses Formats bietet einige Vorteile:

  • Das OTP ist an die Domain gebunden. Wenn sich der Nutzer in anderen Domains als der in der SMS angegebenen Domain befindet, wird der OTP-Vorschlag nicht angezeigt. So verringern Sie auch das Risiko von Phishing-Angriffen und Kontodiebstahl.
  • Der Browser ist jetzt in der Lage, das OTP zuverlässig zu extrahieren, ohne auf mysteriöse und unzuverlässige 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.

Von diesem SMS-Format profitieren auch andere Browser als Safari. Chrome, Opera und Vivaldi unter Android unterstützen auch die Regel für ursprungsgebundene einmalige Codes 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 empfangen wurde. Durch Aufrufen von navigator.credentials.get() mit dem Typ otp (OTPCredential), wobei transport sms enthält, wartet die Website auf eine SMS, die den ursprungsgebundenen Einmalcodes entspricht, und dem Nutzer Zugriff gewährt wird. Sobald das OTP an JavaScript übergeben wurde, kann es von der Website in einem Formular verwendet oder direkt an den Server gesendet werden.

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

Ausführliche Informationen zur Verwendung der WebOTP API finden Sie unter Telefonnummern im Web mit der WebOTP API überprüfen. Sie können auch das folgende Snippet kopieren und einfügen. Für das <form>-Element müssen die Attribute action und method korrekt festgelegt sein.

// 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 auf Unsplash.