Telefonnummer auf dem Computer mithilfe der WebOTP API bestätigen

Ab Chrome 93 können Websites Telefonnummern über Chrome auf dem Computer bestätigen.

Yi Gu
Eiji Kitamura

Mit WebOTP können Nutzer einen Bestätigungscode für eine Telefonnummer auf einer mobilen Website mit nur einem Tippen eingeben, ohne zwischen Apps wechseln zu müssen. In Chrome 93 wird diese Funktion auch auf Computern unterstützt. Lesen Sie weiter, um zusätzliche Informationen zu erhalten!

Einführung

SMS-OTPs (Einmalpasswörter) werden häufig verwendet, um eine Telefonnummer zu bestätigen, z. B. als zweiter Authentifizierungsschritt, oder um Zahlungen im Web zu bestätigen. Der gesamte Ablauf, vom Wechsel vom Computer zum Mobilgerät, dem Öffnen der SMS-App, dem Merken und Eingeben des OTP auf der ursprünglichen Website auf dem Computer, ist jedoch kompliziert. Auf diese Weise können Fehler leicht gemacht werden und es ist anfällig für Phishing-Angriffe.

Mit der WebOTP API können Websites das Einmalpasswort programmatisch aus einer SMS abrufen und das Formular für Nutzer automatisch mit nur einem Tippen ausfüllen, ohne zwischen Apps wechseln zu müssen. Die SMS hat ein bestimmtes Format und ist an den Ursprung gebunden. So wird das Risiko verringert, dass Phishing-Websites das OTP stehlen.

Die WebOTP API in Aktion.

Ein Anwendungsfall, der in WebOTP noch nicht unterstützt wird, ist die Ausrichtung auf Bestätigungsanfragen für Telefonnummern von einem Remote-Desktop-Gerät oder einem Laptop. Die API funktioniert nur auf Geräten mit Telefonfunktionen. Die API unterstützt jetzt das Abhören von SMS, die auf anderen Geräten empfangen werden, um Nutzern die Bestätigung der Telefonnummer auf dem Computer in Chrome 93 zu erleichtern.

WebOTP API auf dem Computer.

Jetzt ausprobieren

Vorbereitung

Demo

So kannst du die nahtlose Bestätigung per Telefonnummer auf einem Computer selbst ausprobieren:

  1. Rufen Sie auf einem Computer https://web-otp-demo.glitch.me/ auf. Klicken Sie auf die Schaltfläche Bestätigen.
  2. Senden Sie die genaue SMS, die auf dem Bildschirm angezeigt wurde, von einem zweiten Smartphone an das Android-Gerät.
  3. Wenn die SMS an das Android-Gerät gesendet wird, wird ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob Sie die Telefonnummer auf dem Computer bestätigen möchten. Drücken Sie auf Senden, um die Genehmigung zu bestätigen.
  4. Auf dem Computer sollte der an das Android-Gerät gesendete Bestätigungscode automatisch in das Eingabefeld eingefügt werden.

Funktionsweise der WebOTP API

So funktioniert die WebOTP API:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

Die SMS-Nachricht muss mit den an den Ursprung gebundenen Einmalcodes formatiert sein.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

Beachten Sie, dass die letzte Zeile den zu bindenden Ursprung enthält, gefolgt von einem @ und dann dem OTP, gefolgt von einem #.

Wenn die Textnachricht eingeht, wird eine Infoleiste eingeblendet, in der der Nutzer aufgefordert wird, seine Telefonnummer zu bestätigen. Nachdem der Nutzer auf die Schaltfläche Verify geklickt hat, leitet der Browser das OTP automatisch an die Website weiter und löst die navigator.credentials.get() auf. Die Website kann dann die OTP extrahieren und den Bestätigungsvorgang abschließen.

Weitere Informationen zum Bestätigen von Telefonnummern im Web mit der WebOTP API

WebOTP API auf dem Computer verwenden

Die Bestätigung per SMS ist weit verbreitet und plattformunabhängig. Alle Anwendungsfälle auf Mobilgeräten sollten auch auf Computern funktionieren.

Die Verwendung der WebOTP API auf dem Computer entspricht der Verwendung auf Mobilgeräten. Websites können also denselben Code plattformübergreifend bereitstellen.

Browserunterstützung und Interoperabilität

Diese Funktion wird von der Chrome-Synchronisierung unterstützt und funktioniert daher derzeit nur in Chrome. Das Empfangen und Übertragen von SMS unter iOS oder iPad OS in Chrome wird nicht unterstützt.

Andere Browser-Engines als Chromium implementieren die WebOTP API nicht. Safari verwendet jedoch dasselbe SMS-Format wie input[autocomplete="one-time-code"]. Wenn ein Nutzer die automatische iMessage-Synchronisierung aktiviert hat, wird in Safari eine SMS, die ein an die Quelle gebundenes Einmalcodeformat enthält, an den übereinstimmenden Ursprung auf iOS oder iPadOS gesendet. Die Nachricht wird dann an macOS weitergeleitet. Wenn der Nutzer den Fokus auf das Eingabefeld legt, schlägt Safari das OTP zur Eingabe vor.

Feedback

Ihr Feedback hilft uns, die WebOTP API zu verbessern. Probieren Sie es aus und teilen Sie uns Ihre Meinung mit.

Foto von Luis Villasmil auf Unsplash