Überprüfen Sie die Telefonnummern im Web mit der Web-OTP-API

Helfen Sie Benutzern mit OTPs, die per SMS empfangen wurden

7. Oktober 2019
Aktualisiert 14. September 2020

¿Qué es la API von Web OTP?

En estos días, la mayoría de las Personen en el mundo poseen un dispositivo móvil y los desarrolladores suelen usar números de teléfono como identificador para los usuarios de sus servicios.

Hay una variedad de formas de verificar los números de teléfono, pero una contraseña de un solo uso (OTP) generada aleatoriamente enviada por SMS es una de las más comunes. Enviar este código de vuelta al Server del desarrollador demuestra el control del número de teléfono.

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

• Número de teléfono como identificador del Nutzername. Bei der Anmeldung für einen neuen Dienst werden auf einigen Websites anstelle einer E-Mail-Adresse eine Telefonnummer abgefragt und als Kontokennung verwendet.
• Bestätigung in zwei Schritten. Wenn Sie sich anmelden, werden Sie auf einer Website zusätzlich zu einem Kennwort oder einem anderen Wissensfaktor nach einem einmaligen Code gefragt, der per SMS gesendet wird, um die Sicherheit zu erhöhen.
• Zahlungsbestätigung. Wenn ein Benutzer eine Zahlung vornimmt, kann das Anfordern eines eindeutigen Codes per SMS dazu beitragen, die Absicht der Person zu überprüfen.

El proceso actual crea fricciones para los usuarios. Encontrar una OTP dentro de un mensaje SMS, luego copiarlo y pegarlo en el formulario es engorroso, lo que reduce las tasas de Umwandlung en los recorridos críticos del usuario. Aliviar esto ha sido una solicitud de muchos de los desarrolladores globales más importantes para la web. Android tiene eine API, die genau das tut. Das tut es auch
ios
y
Safari.

La API Web OTP permite que su aplicación reciba mensajes con formato especial vinculados al origen de su aplicación. A partir de esto, puede obtener una OTP mediante Programmierung a partir de un mensaje SMS y verificar un número de teléfono para el usuario más fácilmente.

Tatsächlicher Zustand

In der folgenden Tabelle wird der aktuelle Status der Web-OTP-API erläutert.

Er ging vorbei	Bedingung
1. Erstellen Sie einen Erklärer	Fertigstellen
2. Erstellen Sie eine erste Entwurfsspezifikation	Fertigstellen
3. Sammeln Sie Feedback und wiederholen Sie das Design	Fertigstellen
4. Herkunftsnachweis	Fertigstellen
5. Starten Sie	Chrom 84

Änderungen gegenüber früheren Versionen

Die ersten Versionen dieser API wurden als SMS-Empfänger bezeichnet. Wenn Sie mit dieser Version der API vertraut sind, berücksichtigen Sie die vorgenommenen Änderungen. Zu den Verbesserungen der SMS-Empfänger-API gehören:

• Das SMS-Nachrichtenformat ist jetzt auf WebKit ausgerichtet.
• Die Webseite erhält nur einen OTP-Code, unabhängig von anderen Elementen in der Nachricht.
• El código hash de la aplicación del Browser ya no es necesario en el mensaje.

Sehen Sie es in Aktion

Angenommen, ein Benutzer möchte seine Telefonnummer mit einer Website überprüfen. Die Website sendet eine Textnachricht per SMS an den Benutzer, und der Benutzer gibt das OTP aus der Nachricht ein, um den Besitz der Telefonnummer zu überprüfen.

Mit der Web-OTP-API sind diese Schritte für den Benutzer so einfach wie eine Berührung, wie im Video gezeigt. Wenn die Textnachricht eintrifft, wird ein unteres Blatt angezeigt, in dem der Benutzer aufgefordert wird, seine Telefonnummer zu überprüfen. Nach dem Klicken auf die prüfen
Auf dem unteren Blatt fügt der Browser das OTP in das Formular ein und das Formular wird gesendet, ohne dass der Benutzer drücken muss Folgen Sie, fahren Sie fort.

Der gesamte Vorgang ist in der folgenden Abbildung dargestellt.

Versuchen die Demo usted mismo. No solicita su número de teléfono ni envía un SMS a su dispositivo, pero puede enviar uno desde otro dispositivo copiando el texto que se muestra en la demostración. Esto funciona porque no importa quién Sein el remitente cuando se utiliza la API de Web OTP.

1. Gehen https://web-otp.glitch.me in Chrome 84 oder höher auf einem Android-Gerät.
2. Senden Sie die folgende SMS vom anderen Telefon an Ihr Telefon.

@ web-otp.glitch.me #12345

Haben Sie die SMS erhalten und die Nachricht zur Eingabe des Codes im Eingabebereich gesehen? So funktioniert die OTP-Web-API für Benutzer.

Die Verwendung der Web-OTP-API besteht aus drei Teilen:

• A richtig kommentiert Etikette
• JavaScript en su aplicación web
• Formatierte Textnachricht per SMS.

Ich werde das abdecken Tag zuerst.

Schreiben Sie a Etikette

Web OTP en sí mismo funciona sin ninguna anotación HTML, pero para la compatibilidad entre Browser, le recomiendo que agregue autocomplete = "Einmalcode" zum Tag, an dem der Benutzer ein OTP eingeben soll.

Auf diese Weise kann Safari 14 oder höher vorschlagen, dass der Benutzer den Vorgang automatisch abschließt
Feld mit einem OTP, wenn sie eine SMS mit dem unter Formatieren der SMS-Nachricht beschriebenen Format empfangen, auch wenn diese nicht mit Web-OTP kompatibel ist.

HTML

<form>
<Eingang Autocomplete="one-time-code" erforderlich/>
<Eingang Art="einreichen">
</form>

Verwenden Sie die Web-OTP-API

Da Web-OTP einfach ist, kopieren Sie einfach den folgenden Code und fügen Sie ihn ein. Ich werde dich durch das führen, was sowieso los ist.

JavaScript

wenn ('OTPCredential' im Fenster) {
Fenster.addEventListener('DOMContentLoaded', und => {
const Eingang = Dokument.querySelector('input[autocomplete="one-time-code"]');
wenn (!Eingang) Rückkehr;
const ac = new AbortController();
const form = Eingang.closest('form');
wenn (form) {
form.addEventListener('submit', und => {
ac.abort();
});
}
Navigator.Referenzen.erhalten({
otp: { Transport:['SMS'] },
Signal: ac.Signal
}).then(otp => {
Eingang.Wert = otp.code;
wenn (form) form.einreichen();
}).catch(err => {
console.Log(err);
});
});
}

Funktionserkennung

Die Funktionserkennung ist dieselbe wie bei vielen anderen APIs. Hören
DOMContentLoaded Das Veranstaltung esperará a que el árbol DOM esté listo para realizar consultas.

JavaScript

wenn ('OTPCredential' im Fenster) {
Fenster.addEventListener('DOMContentLoaded', und => {
const Eingang = Dokument.querySelector('input[autocomplete="one-time-code"]');
wenn (!Eingang) Rückkehr;
…
const form = Eingang.closest('form');
…
});
}

Verarbeiten Sie das OTP

Die Web-OTP-API selbst ist ziemlich einfach. Benutzen
navigator.credentials.get ()

um das OTP zu bekommen. Web OTP fügt eine neue hinzu otp Option zu dieser Methode. Es hat nur eine Eigenschaft: Transport, dessen Wert ein Array mit der Zeichenfolge sein muss 'SMS'.

JavaScript

    …
    Navigator.Referenzen.erhalten({
      otp: { Transport:['SMS'] }
      …
    }).then(otp => {
    …

Dies aktiviert den Browser-Berechtigungsfluss, wenn eine SMS-Nachricht eintrifft. Wenn die Erlaubnis erteilt wird, wird das zurückgegebene Versprechen mit a gelöst OTPCredential Objekt.

Inhalt de obtenido OTPCredential Objekt

{
code: "123456" 
Art: "otp"  
}

Übergeben Sie dann den OTP-Wert an Landschaft. Durch das direkte Senden des Formulars entfällt der Schritt, bei dem der Benutzer auf eine Schaltfläche tippen muss.

JavaScript

    …
    Navigator.Referenzen.erhalten({
      otp: { Transport:['SMS'] }
      …
    }).then(otp => {
      Eingang.Wert = otp.code;
      wenn (form) form.einreichen();
    }).catch(err => {
      console.Error(err);
    });
    …

Brechen Sie die Nachricht ab

Falls der Benutzer manuell ein OTP eingibt und das Formular sendet, kann er das Formular abbrechen
erhalten () Anruf mit einem AbortController Instanz in der Optionen

Objekt.

JavaScript

    …
    const ac = new AbortController();
    …
    wenn (form) {
      form.addEventListener('submit', und => {
        ac.abort();
      });
    }
    …
    Navigator.Referenzen.erhalten({
      otp: { Transport:['SMS'] },
      Signal: ac.Signal
    }).then(otp => {
    …

Formatieren Sie die SMS-Nachricht

Die API selbst sollte einfach erscheinen, aber es gibt einige Dinge zu wissen, bevor Sie sie verwenden. Die Nachricht muss danach gesendet werden
navigator.credentials.get () wird aufgerufen und muss auf dem Gerät empfangen werden, auf dem erhalten () hieß. Schließlich muss die Nachricht das folgende Format haben:

• El mensaje comienza con texto legible por humanos (opcional) dejando la última línea para la Url y la OTP.
• Dem Host-Teil der Website-URL, der die API aufgerufen hat, muss vorangestellt werden @.
• Die URL muss ein Nummernzeichen enthalten ('#') gefolgt von der OTP.

Zum Beispiel:

Your OTP is: 123456.
@www.example.com #123456

Population

Probieren Sie verschiedene Nachrichten mit der Demo aus:
https://web-otp.glitch.me

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

Häufig gestellte Fragen

Wo melde ich Fehler in der Chrome-Bereitstellung?

Haben Sie einen Fehler bei der Chrome-Implementierung gefunden?

• Einen Fehler einreichen
  https://new.crbug.com. Geben Sie so viele Details wie möglich an, einfache Anweisungen zum Reproduzieren und Einrichten Komponenten (bearbeiten) zu Blinken> WebOTP.

Wie kann ich mit dieser Funktion helfen?

¿Está pensando en utilizar la API de Web OTP? Su apoyo público nos ayuda a priorizar las funciones y muestra a otros proveedores de navegadores lo importante que es darles soporte. Enviar un Tweet zu @Cromodev mit
#webotp und lassen Sie uns wissen, wo und wie Sie es verwenden.

Was sind die Unterschiede zur SMS-Empfänger-API?

Stellen Sie sich die Web-OTP-API als eine weiterentwickelte Version der SMS-Empfänger-API vor. Die OTP-Web-API weist einige signifikante Unterschiede zur SMS-Empfänger-API auf.

• Das erwartete Textformat für die SMS-Nachricht hat sich geändert.
• Es ist nicht mehr erforderlich, dass eine Anwendungs-Hash-Zeichenfolge in der SMS-Nachricht enthalten ist.
• Die aufgerufene Methode ist jetzt navigator.credentials.get () lieber als
  navigator.sms.receive ().
• das erhalten () Empfangen Sie nur das OTP anstelle der gesamten SMS wie
  erhalten () tat vor.
• Es ist jetzt möglich, den Anruf an abzubrechen erhalten ().

Ist diese API mit verschiedenen Browsern kompatibel?

Chromium und WebKit waren sich einig das SMS-Textnachrichtenformat y Apple hat die Safari-Unterstützung dafür angekündigt ab iOS 14 und macOS Big Sur. Obwohl Safari die Web-OTP-JavaScript-API beim Kommentieren nicht unterstützt Eingang Element mit autocomplete = ["Einmalcode"]Die Standardtastatur schlägt automatisch vor, dass Sie das OTP eingeben, wenn die SMS-Nachricht dem Format entspricht.

Ist es sicher, SMS als Authentifizierungsform zu verwenden?

Während SMS OTP nützlich ist, um eine Telefonnummer zu überprüfen, wenn sie zum ersten Mal bereitgestellt wird, sollte die Überprüfung der Telefonnummer per SMS sorgfältig verwendet werden, um sich erneut zu authentifizieren, da Betreiber Telefonnummern entführen und recyceln können. Web-OTP ist ein praktischer Wiederherstellungs- und Wiederherstellungsmechanismus, der jedoch von Diensten mit zusätzlichen Faktoren kombiniert werden muss, z. B. einer Wissensherausforderung oder der Verwendung von
Webauthentifizierungs-API
für eine starke Authentifizierung.