Telefonnummer auf dem Computer mithilfe der WebOTP API bestätigen

Ab Chrome 93 können Websites Telefonnummern aus der Computerversion von Chrome bestätigen.

Yi Gu
Eiji Kitamura

Mit WebOTP können Nutzer mit nur einmal tippen einen Bestätigungscode für eine Telefonnummer auf einer mobilen Website eingeben, ohne zwischen Apps wechseln zu müssen. In Chrome 93 wird diese Funktionalität auch auf Desktop-Computer ausgeweitet. Lesen Sie weiter, um mehr zu erfahren.

Einleitung

SMS-OTPs (Einmalpasswörter) werden häufig verwendet, um eine Telefonnummer zu verifizieren, z. B. als zweiter Schritt bei der Authentifizierung oder um Zahlungen im Web zu verifizieren. Der gesamte Vorgang des Wechsels vom Computer zum Mobilgerät, das Öffnen der SMS-App, das Auswendiglernen und das Eingeben des OTP auf der ursprünglichen Website auf der Desktopversion sorgt jedoch für Probleme. Auf diese Weise können schnell Fehler passieren 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 mit nur einem Tippen automatisch ausfüllen, ohne die App zu wechseln. Die SMS haben ein bestimmtes Format und sind an den Ursprung gebunden. So verringern Sie das Risiko, dass auch Phishing-Websites das OTP stehlen.

WebOTP API in Aktion.

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

WebOTP API für Computer.

Ausprobieren

Voraussetzungen

Demo

Wenn Sie diesen Ablauf zur nahtlosen Bestätigung der Telefonnummer selbst auf dem Computer ausprobieren möchten, gehen Sie so vor:

  1. Rufen Sie auf dem Computer https://web-otp-demo.glitch.me/ auf. Klicken Sie auf die Schaltfläche Bestätigen.
  2. Sendet die Textnachricht, 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 Desktop bestätigen möchten. Klicken Sie auf Senden, um die Anfrage zu genehmigen.
  4. Auf dem Desktop sollte der an das Android-Gerät gesendete Bestätigungscode automatisch in das Eingabefeld eingetragen 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 muss mit den ursprungsgebundenen Einmalcodes formatiert werden.

Your OTP is: 123456.

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

Die letzte Zeile enthält den Ursprung, an den ein @ gebunden werden soll, gefolgt von dem OTP mit vorangestelltem #.

Wenn die SMS eingeht, wird eine Infoleiste angezeigt und der Nutzer wird aufgefordert, seine Telefonnummer zu bestätigen. Nachdem der Nutzer auf die Schaltfläche Verify geklickt hat, leitet der Browser automatisch das OTP an die Website weiter und löst das navigator.credentials.get()-Objekt auf. Die Website kann dann das OTP extrahieren und die Überprüfung abschließen.

Weitere Informationen finden Sie unter Telefonnummern im Web mit der WebOTP API bestätigen.

WebOTP API auf dem Desktop verwenden

Die Bestätigung der Telefonnummer per SMS ist weit verbreitet und unabhängig von der Plattform. Alle Anwendungsfälle auf Mobilgeräten sollten auch auf Desktop-Geräte anwendbar sein.

Die Verwendung der WebOTP API auf dem Computer funktioniert genauso wie auf Mobilgeräten, sodass Websites denselben Code auf verschiedenen Plattformen bereitstellen können.

Browserunterstützung und Interoperabilität

Diese Funktion wird durch die Chrome-Synchronisierung unterstützt, sodass sie momentan nur mit Chrome funktioniert. Das Empfangen und Übertragen von SMS wird auf iOS-Geräten und dem iPad OS in Chrome nicht unterstützt.

Während die WebOTP API nicht in anderen Browser-Engines als Chromium implementiert ist, verwendet Safari das gleiche SMS-Format wie die input[autocomplete="one-time-code"]-Unterstützung. Solange ein Nutzer in Safari die automatische Synchronisierung von iMessage aktiviert hat, wird die Nachricht an macOS weitergeleitet, wenn eine SMS mit einem ursprungsgebundenen Einmalcodeformat mit dem übereinstimmenden Ursprung unter iOS oder iPadOS eingeht. Wenn sich der Nutzer auf das Eingabefeld konzentriert, schlägt Safari ihm das OTP vor, das er eingeben muss.

Feedback

Ihr Feedback ist von unschätzbarem Wert für die Verbesserung der WebOTP API. Probieren Sie sie aus und lassen Sie uns wissen, was Sie davon halten.

Foto von Luis Villasmil auf Unsplash