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 zur Bestätigung einer Telefonnummer verwendet, z. B. als zweiter Schritt bei der Authentifizierung oder zur Bestätigung von Zahlungen im Web. 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. So können leicht Fehler 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

  • Einen Desktop- oder Laptop-Computer (Windows, Mac, Linux oder ChromeOS)
  • Ein Android-Smartphone mit der Version 20.30.12 oder höher der Google Play-Dienste
  • Chrome 93 oder höher, sowohl auf Computern als auch auf Mobilgeräten Chrome 93 Beta ist seit Ende Juli 2021 verfügbar.
  • Sie müssen sich sowohl im Chrome-Desktop als auch im mobilen Chrome mit demselben Google-Konto anmelden. Beispielsweise über https://myaccount.google.com/ oder https://mail.google.com. Die Synchronisierung muss nicht aktiviert werden.
  • Melden Sie sich auf Ihrem Android-Gerät über „Einstellungen -> Google“ in Android an.
  • Chrome 93 muss der Standardbrowser auf dem Android-Gerät sein.
  • Chrome 93 muss auf dem Android-Gerät entweder im Vordergrund oder im Hintergrund ausgeführt werden.

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

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

Wenn die SMS 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. So können Websites 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 Senden von SMS auf iOS- oder iPadOS-Geräten 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