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

Häufig werden Nutzer dazu aufgefordert, das per SMS erhaltene OTP (Einmalpasswort) anzugeben. um die Telefonnummer eines Nutzers zu bestätigen. Es gibt einige Anwendungsfälle für SMS-OTP:

  • Bestätigung in zwei Schritten: Neben Nutzername und Passwort kann das SMS-OTP auch Dies ist ein deutlicher Hinweis darauf, dass das Konto der Person gehört, die den SMS-OTP.
  • Bestätigung der Telefonnummer: Einige Dienste verwenden eine Telefonnummer als primäre Kennung. In solchen Diensten können Nutzer ihre Telefonnummer und die OTP wurde per SMS zur Bestätigung der Identität empfangen. Manchmal wird es mit einer PIN kombiniert eine 2-Faktor-Authentifizierung.
  • Kontowiederherstellung: Wenn ein Nutzer keinen Zugriff mehr auf sein Konto hat, um es wiederherzustellen. Sie senden eine E-Mail an ihre registrierte E-Mail-Adresse oder eine SMS-OTP an ihre Telefonnummer sind gängige Methoden zur Kontowiederherstellung.
  • Zahlungsbestätigung In Zahlungssystemen verwenden einige Banken oder Kreditkarten Aus Sicherheitsgründen fordern Aussteller 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 OTP-Formulars für SMS erläutert. Cases.

Checkliste

So können Sie das OTP per SMS optimal nutzen:

  • Verwenden Sie das Element <input> mit: <ph type="x-smartling-placeholder">
      </ph>
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Verwende „@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 von Dieser Beitrag funktioniert in manchen Browsern nicht. Der Nutzer kann das OTP trotzdem eingeben und senden. manuell.

<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 sicherstellen können, dass ein Eingabefeld das Beste aus Browserfunktionen.

type="text"

Da OTPs in der Regel fünf- oder sechsstellig sind, sollten Sie type="number" für ein Eingabefeld mag intuitiv erscheinen, weil es den mobilen nur Zahlen anzeigen. Dies wird nicht empfohlen, da der Browser eine in eine zählbare Zahl und nicht eine Folge mehrerer Zahlen ein, was zu unerwartetem Verhalten führen kann. Die Verwendung von type="number" führt zu einer Aufwärts- und Abwärtsursache. die neben dem Eingabefeld angezeigt werden. durch Drücken dieser Tasten erhöht oder verringert die Zahl und entfernt eventuell vorangehende Nullen.

Verwenden Sie stattdessen type="text". Die Mobiltastatur wird dadurch nicht in Zahlen umgewandelt Das ist aber in Ordnung, denn der nächste Tipp zur Verwendung von inputmode="numeric" für diesen Job.

inputmode="numeric"

inputmode="numeric" verwenden , um die Handytastatur auf Zahlen zu stellen.

Einige Websites verwenden type="tel" als OTP-Eingabefelder, Die Handytastatur wird nur auf Zahlen (einschließlich * und #) eingestellt, wenn fokussiert sind. Dieser Hack wurde in der Vergangenheit verwendet, als inputmode="numeric" nicht weithin unterstützt. Seit Firefox inputmode="numeric", ist es nicht notwendig, den semantisch falschen type="tel"-Hack zu verwenden.

autocomplete="one-time-code"

autocomplete können Entwickler angeben, welche Berechtigung der Browser Unterstützung bei der automatischen Vervollständigung bieten und den Browser darüber informieren, Art der Informationen, 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, parst das Betriebssystem das OTP in der SMS heuristisch und schlägt die Tastatur dem Nutzer das OTP vor. Es funktioniert nur mit Safari 12 und später unter iOS, iPadOS und macOS. Wir empfehlen jedoch dringend, es zu verwenden, da es sich um eine eine einfache Möglichkeit, das OTP für SMS auf diesen Plattformen zu verbessern.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
. `complete="one-time-code"` in Aktion.

Mit autocomplete="one-time-code" wird die Nutzererfahrung verbessert, aber es gibt noch mehr zu entdecken indem Sie sicherstellen, dass die SMS der ursprungsgebundenen Nachricht entspricht .

SMS-Text formatieren

Die Eingabe eines OTP ist nutzerfreundlicher, über SMS versendete ursprungsgebundene Einmalcodes Spezifikation zu ändern.

Die Formatierungsregel ist einfach: Die SMS mit der Domain des Empfängers fertigstellen. 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 führt zu einer Extraktion einfacher und zuverlässiger. OTP-Codes werden verknüpft mit Websites erschweren es, Nutzer durch Täuschung dazu zu verleiten, auf schädlichen Websites Code bereitzustellen.

Dieses Format bietet einige Vorteile:

  • Das OTP ist an die Domain gebunden. Nutzer in anderen Domains als das in der SMS-Nachricht angegeben ist, wird der OTP-Vorschlag nicht angezeigt. So verringern Sie auch das Risiko von Phishing-Angriffen und Kontodiebstahl.
  • Der Browser kann das OTP jetzt zuverlässig extrahieren, geheimnisvoller und instabiler Heuristiken.

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

Dieses SMS-Format kommt auch anderen Browsern als Safari zugute. Chrome, Opera und Vivaldi für Android auch die Regel für ursprungsgebundene Einmalcodes mit die WebOTP API, allerdings nicht über autocomplete="one-time-code".

WebOTP API verwenden

Die WebOTP API bietet Zugriff auf das OTP. per SMS erhalten. Durch den Anruf navigator.credentials.get() mit dem Typ otp (OTPCredential), wobei transport die Website sms enthält wartet auf eine SMS, die den ursprungsgebundenen Einmalcodes entspricht, die der Nutzer erhält und ihm Zugriff gewährt. Sobald das OTP an JavaScript übergeben wurde, kann die Website sie in einem Formular verwenden oder sie direkt per POST an den Server senden.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
WebOTP API in Aktion

Detaillierte Informationen zur Verwendung der WebOTP API finden Sie unter Telefonnummern im Web überprüfen mit der WebOTP API oder kopieren Sie das folgende Snippet und fügen Sie es ein. (Machen Sie Achten Sie darauf, dass für das <form>-Element die Attribute action und method korrekt 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 auf Unsplash (Unsplash).