Ab Chrome 93 können Websites Telefonnummern aus der Computerversion von Chrome bestätigen.
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.
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.
Ausprobieren
Voraussetzungen
- Einen Computer oder einen Laptop (Windows, Mac, Linux oder ChromeOS)
- Ein Android-Smartphone mit Google Play-Dienste Version 20.30.12 oder höher.
- Chrome 93 oder höher, auf Computern oder Laptops und Mobilgeräten Die Chrome 93-Betaversion ist seit Ende Juli 2021 verfügbar.
- Sie müssen sich sowohl in der Desktopversion von Chrome als auch in der mobilen Chrome-Version im selben Google-Konto anmelden. Zum Beispiel über https://myaccount.google.com/ oder https://mail.google.com. Die Synchronisierung muss nicht aktiviert werden.
- Auf deinem Android-Gerät musst du dich über „Einstellungen“ -> „Google“ in Android anmelden.
- Auf dem Android-Gerät muss Chrome 93 als Standardbrowser festgelegt sein.
- Chrome 93 muss auf dem Android-Gerät entweder im Vordergrund oder im Hintergrund ausgeführt werden.
Demo
Wenn Sie diesen Ablauf zur nahtlosen Bestätigung der Telefonnummer selbst auf dem Computer ausprobieren möchten, gehen Sie so vor:
- Rufen Sie auf dem Computer https://web-otp-demo.glitch.me/ auf. Klicken Sie auf die Schaltfläche Bestätigen.
- Sendet die Textnachricht, die auf dem Bildschirm angezeigt wurde, von einem zweiten Smartphone an das Android-Gerät.
- 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.
- 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