Telefonnummern im Web mit der WebOTP API bestätigen

Nutzern mit per SMS gesendeten OTPs helfen

Eiji Kitamura

Was ist die WebOTP API?

Heutzutage besitzen die meisten Menschen weltweit ein Mobilgerät. häufig Telefonnummern als Kennung für die Nutzer der Dienste verwenden.

Es gibt verschiedene Möglichkeiten, Telefonnummern zu bestätigen. das per SMS gesendete Einmalpasswort (OTP) ist eines der am häufigsten verwendeten Geräte. Code wird gesendet zurück an den Server des Entwicklers zeigt die Kontrolle über die Telefonnummer.

Diese Idee wird bereits in vielen Szenarien eingesetzt, um Folgendes zu erreichen:

• Telefonnummer als Kennung für den Nutzer. Wenn Sie sich für ein neues werden Sie auf einigen Websites nach einer Telefonnummer statt nach einer E-Mail-Adresse gefragt. verwenden Sie sie als Konto-ID.
• Bestätigung in zwei Schritten: Bei der Anmeldung wird auf einer Website nach einem Einmalcode gefragt die per SMS zusätzlich zu einem Passwort oder einem anderen Wissensfaktor gesendet werden, Sicherheit.
• Zahlungsbestätigung: Wenn ein Nutzer eine Zahlung ausführt, können Sie mit einem einmaligen Code, der per SMS gesendet wird, die Absicht der Person bestätigen.

Der aktuelle Prozess schafft Hürden für die Nutzenden. OTP in einer SMS finden ist umständlich, da das Kopieren und Einfügen in das Formular umständlich ist. Conversion-Raten in kritischen User Journeys. Es hat sich lange gedauert, von den größten Entwicklern weltweit. Android verfügt über eine API, die genau diese Aufgabe erfüllt. Genauso iOS und Safari:

Mit der WebOTP API kann Ihre App speziell formatierte Nachrichten empfangen, die an Ihrer App-Domain. Damit können Sie programmatisch ein OTP aus einer SMS abrufen. Nachricht senden und eine Telefonnummer für den Nutzer einfacher bestätigen.

Beispiele ansehen

Angenommen, ein Nutzer möchte seine Telefonnummer auf einer Website bestätigen. Website sendet dem Nutzer eine SMS per SMS und der Nutzer gibt das OTP über das um die Inhaberschaft der Telefonnummer zu bestätigen.

Mit der WebOTP API sind diese Schritte für den Nutzer genauso einfach wie die im Video gezeigt werden. Beim Eintreffen der Textnachricht wird am unteren Rand ein Fenster eingeblendet. und fordert den Nutzer auf, seine Telefonnummer zu bestätigen. Nachdem Sie auf die Schaltfläche Bestätigen unten auf der Seite, fügt der Browser das OTP in das Formular ein wird gesendet, ohne dass der Nutzer auf Weiter klicken muss.

Der gesamte Prozess ist im Bild unten dargestellt.

</ph> <ph type="x-smartling-placeholder">

Probieren Sie die Demo selbst aus. Sie fragt nicht nach Ihre Telefonnummer eingeben oder eine SMS an Ihr Gerät senden, Sie können aber eine von ein anderes Gerät verwenden, indem Sie den Text aus der Demo kopieren. Das funktioniert, weil es egal, wer der Sender ist, wenn Sie die WebOTP API verwenden.

1. Rufen Sie in Chrome 84 https://web-otp.glitch.me auf oder später auf einem Android-Gerät.
2. Senden Sie die folgende SMS von einem anderen Telefon an Ihr Telefon.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Hast du die SMS erhalten und dazu aufgefordert, den Code in das Eingabefeld einzugeben? So funktioniert die WebOTP API für Nutzer.

Die Verwendung der WebOTP API besteht aus drei Teilen:

• Ein richtig annotiertes <input>-Tag
• JavaScript in Ihrer Webanwendung
• Formatierter Nachrichtentext, der per SMS gesendet wurde.

Zuerst spreche ich über das <input>-Tag.

<input>-Tags mit Anmerkungen versehen

WebOTP selbst funktioniert ohne HTML-Anmerkungen, aber für browserübergreifende empfehle ich dringend, autocomplete="one-time-code" Das <input>-Tag, in das Sie erwarten, dass der Nutzer ein OTP eingibt.

Dadurch kann Safari 14 oder höher dem Nutzer vorschlagen, das <input> automatisch auszufüllen mit einem OTP, wenn sie eine SMS in dem Format erhalten, das unter SMS-Nachricht formatieren beschrieben wird, obwohl WebOTP nicht unterstützt wird.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

WebOTP API verwenden

Da WebOTP einfach ist, reicht das Kopieren und Einfügen des folgenden Codes Job. Ich erkläre Ihnen, was ohnehin passiert.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Funktionserkennung

Die Funktionserkennung ist dieselbe wie bei vielen anderen APIs. Läuft gerade Das Ereignis DOMContentLoaded wartet, bis die DOM-Struktur abgefragt werden kann.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

OTP verarbeiten

Die WebOTP API selbst ist einfach genug. Verwenden Sie navigator.credentials.get() um das OTP zu erhalten. WebOTP fügt dieser Methode eine neue otp-Option hinzu. Es enthält nur Eine Eigenschaft: transport, deren Wert ein Array mit dem String 'sms' sein muss.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Dadurch wird der Berechtigungsablauf des Browsers ausgelöst, wenn eine SMS eingeht. Wenn die Berechtigung wird das zurückgegebene Promise mit einem OTPCredential-Objekt aufgelöst.

Inhalt des abgerufenen OTPCredential-Objekts

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

Übergeben Sie als Nächstes den OTP-Wert in das Feld <input>. Formular direkt senden entfällt den Schritt, bei dem Nutzende auf eine Schaltfläche tippen müssen.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

Nachricht wird abgebrochen

Falls der Nutzer manuell ein OTP eingibt und das Formular absendet, kannst du das get()-Aufruf mithilfe einer AbortController-Instanz im options-Objekt.

<ph type="x-smartling-placeholder"></ph> JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

SMS formatieren

Die API selbst sollte einfach genug aussehen. Sie sollten jedoch einige Dinge beachten. bevor Sie es verwenden. Die Nachricht muss gesendet werden nach navigator.credentials.get() wird aufgerufen und muss auf dem Gerät empfangen werden wobei get() aufgerufen wurde. Schließlich muss die Mitteilung die folgenden Anforderungen erfüllen: Formatierung:

• Die Nachricht beginnt mit einem (optionalen) für Menschen lesbaren Text, der eine Zahl zwischen vier und zehn enthält. Alphanumerischer String mit mindestens einer Zahl aus der letzten Zeile für die URL und das OTP.
• Der Domainteil der URL der Website, die die API aufgerufen hat, muss vorangestellt werden von @.
• Die URL muss ein Pfundzeichen ('#') gefolgt vom OTP enthalten.

Beispiel:

Your OTP is: 123456.

@www.example.com #123456

Hier einige Beispiele:

Demos

Probiere verschiedene Botschaften in der Demo aus: https://web-otp.glitch.me

Sie können ihn auch verzweigen und Ihre Version erstellen: https://glitch.com/edit/#!/web-otp.

WebOTP über einen ursprungsübergreifenden iFrame verwenden

Die Eingabe eines SMS-OTP in einen ursprungsübergreifenden iFrame wird normalerweise für Zahlungen verwendet insbesondere bei 3D Secure. Ein gemeinsames Format für liefert die WebOTP API OTPs, die an verschachtelte Ursprünge gebunden sind. Beispiel:

• Ein Nutzer besucht shop.example, um mit einer Kreditkarte ein Paar Schuhe zu kaufen.
• Nach Eingabe der Kreditkartennummer zeigt der integrierte Zahlungsanbieter eine von bank.example in einem iFrame, in dem der Nutzer aufgefordert wird, seine um schnell bezahlen zu können.
• bank.example sendet dem Nutzer eine SMS mit einem OTP, damit er um ihre Identität zu bestätigen.

Wenn Sie die WebOTP API in einem ursprungsübergreifenden iFrame verwenden möchten, müssen Sie zwei Schritte ausführen:

• Im SMS-Text sowohl den Ursprung des Top-Frames als auch den iFrame-Ursprung annotieren angezeigt.
• Berechtigungsrichtlinie so konfigurieren, dass der ursprungsübergreifende iFrame das OTP empfangen kann direkt von den Nutzenden.

Sie können die Demo unter folgendem Link ausprobieren: https://web-otp-iframe-demo.stackblitz.io.

bound-Ursprung in der SMS-Textnachricht annotieren

Wenn die WebOTP API aus einem iFrame aufgerufen wird, muss die SMS-Textnachricht den Top-Frame-Ursprung mit vorangestelltem @ gefolgt von dem OTP mit vorangestelltem # einschließen und dem iFrame-Ursprung in der letzten Zeile @ vorangestellt.

Your verification code is 123456

@shop.example #123456 @bank.exmple

Berechtigungsrichtlinie konfigurieren

Um WebOTP in einem ursprungsübergreifenden iFrame zu verwenden, muss der Einbettungscode Zugriff darauf gewähren API über die Berechtigungsrichtlinie „otp-credentials“, um unbeabsichtigte Eingaben zu vermeiden verhalten. Im Allgemeinen gibt es zwei Möglichkeiten, dieses Ziel zu erreichen:

über HTTP-Header:

Permissions-Policy: otp-credentials=(self "https://bank.example")

über das iFrame-Attribut allow:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Weitere Beispiele zum Angeben einer Berechtigungsrichtlinie

WebOTP auf dem Computer verwenden

In Chrome unterstützt WebOTP das Abhören von SMS, die auf anderen Geräten empfangen wurden, um Nutzern bei der Bestätigung der Telefonnummer auf dem Computer helfen.

Dafür muss sich der Nutzer auf beiden Geräten im selben Google-Konto anmelden. Chrome für Computer und Chrome für Android.

Entwickler müssen lediglich die WebOTP API auf ihrer Desktop-Website implementieren, wie auf ihrer mobilen Website, aber es gibt keine besonderen Tricks. erforderlich.

Weitere Informationen finden Sie im Hilfeartikel Telefonnummer auf dem Computer mit der WebOTP API bestätigen.

FAQ

Das Dialogfeld wird nicht angezeigt, obwohl ich eine korrekt formatierte Nachricht sende. Woran liegt das?

Beim Testen der API gibt es einige Einschränkungen:

• Wenn die Telefonnummer des Absenders in der Kontaktliste des Empfängers enthalten ist, Die API wird aufgrund des Designs der zugrunde liegenden SMS User Consent API nicht ausgelöst.
• Wenn Sie ein Arbeitsprofil auf Ihrem Android-Gerät verwenden und das WebOTP nicht funktionieren, versuchen Sie, Chrome in Ihrem privaten Profil zu installieren und zu verwenden d.h. demselben Profil, über das Sie SMS empfangen.

Überprüfen Sie im Format, ob Ihre SMS richtig formatiert ist.

Ist diese API zwischen verschiedenen Browsern kompatibel?

Chromium und WebKit haben sich auf das SMS-Format geeinigt und Apple unterstützt Safari ab iOS 14 und macOS Big Sur. Obwohl Safari die WebOTP JavaScript API nicht unterstützt, input-Element mit autocomplete=["one-time-code"], der Standardeinstellung, annotieren Tastatur schlägt automatisch vor, dass Sie das OTP eingeben, wenn die SMS-Nachricht den Anforderungen entspricht. mit dem Format.

Ist es sicher, SMS zur Authentifizierung zu verwenden?

Das OTP per SMS ist nützlich, um eine Telefonnummer zu bestätigen, wenn diese an erster Stelle steht. angegeben ist, muss die Bestätigung der Telefonnummer per SMS vorsichtig für die Erneute Authentifizierung, da Telefonnummern von den Mobilfunkanbietern gehackt und wiederverwendet werden können. WebOTP ist ein bequemer Mechanismus zur erneuten Authentifizierung und Wiederherstellung, aber Dienste sollten kombinieren Sie sie mit zusätzlichen Faktoren, wie z. B. einer Wissensherausforderung, oder verwenden Sie Web Authentication API für eine starke Authentifizierung.

Wo kann ich Fehler bei der Chrome-Implementierung melden?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden?

• Fehler melden unter https://new.crbug.com. Gib so viele Details wie möglich, einfache Anweisungen zum Reproduzieren Setzen Sie Components auf Blink>WebOTP.

Wie kann ich bei dieser Funktion helfen?

Möchten Sie die WebOTP API verwenden? Ihre öffentliche Unterstützung hilft uns, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen. Sende einen Tweet mit dem Hashtag an @ChromiumDev #WebOTP und teilen Sie uns mit, wo und wie Sie sie nutzen.

Ressourcen

• Best Practices für das OTP-Formular für SMS
• Telefonnummer auf dem Computer mit der WebOTP API bestätigen
• OTP-Formulare mit der WebOTP API in ursprungsübergreifenden iFrames ausfüllen
• Yahoo! Durch die passwortfreie Authentifizierung konnte JAPAN die Anzahl der Anfragen um 25 % reduzieren und die Anmeldezeit um das 2,6-Fache beschleunigen.