Telefonnummer auf dem Computer mithilfe der WebOTP API bestätigen

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

Mit WebOTP können Nutzer auf einer mobilen Website in ohne zwischen Apps zu wechseln. Chrome 93 erweitert diese Funktionalität auf Desktop-Computer. Lesen Sie weiter, um zusätzliche Informationen zu erhalten!

Einführung

SMS-OTPs (Einmalpasswörter) werden in der Regel zur Bestätigung einer Telefonnummer verwendet, Dies kann beispielsweise ein zweiter Authentifizierungsschritt oder die Bestätigung von Zahlungen im Internet sein. Der gesamte Ablauf beim Wechsel vom Desktop zum Mobilgerät, beim Öffnen der SMS App, sich das OTP zu merken und es auf der ursprünglichen Website wieder auf dem Computer einzugeben. für Reibungspunkte sorgen. Auf diese Weise können leicht Fehler passieren und Phishingangriffen.

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
. WebOTP API in Aktion

Ein Anwendungsfall, der in WebOTP noch nicht 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 jetzt unterstützt das Abhören von SMS, die auf anderen Geräten empfangen wurden, um Nutzer bei Folgendem zu unterstützen: Telefonnummer in Chrome 93 auf einem Computer bestätigen

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> WebOTP API auf dem Desktop.

Jetzt ausprobieren

Vorbereitung

Demo

Wenn du diese nahtlose Bestätigung deiner Telefonnummer auf dem Computer selbst ausprobieren möchtest, folge diese Schritte:

  1. Rufen Sie https://web-otp-demo.glitch.me/ auf Desktop-Computer. Klicken Sie auf die Schaltfläche Bestätigen.
  2. Senden Sie von einem zweiten Smartphone genau die Textnachricht, die auf dem Bildschirm angezeigt wurde, 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 möchten Sie die Telefonnummer auf dem Desktop bestätigen. Klicken Sie auf Senden, um Genehmigen.
  4. Auf dem Computer sollte der an das Android-Gerät gesendete Bestätigungscode so aussehen: automatisch in das Eingabefeld eingetragen.

Funktionsweise der WebOTP API

Sehen wir uns an, wie die WebOTP API funktioniert:


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

Die SMS-Nachricht muss mit den ursprungsgebundenen Einmalcodes formatiert sein.

Your OTP is: 123456.

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

Beachten Sie, dass die letzte Zeile den Ursprung enthält, dem ein @ vorangestellt werden soll. gefolgt von dem OTP mit vorangestelltem #.

Wenn die SMS eingeht, wird eine Infoleiste eingeblendet, in der der Nutzer aufgefordert wird, ihre Telefonnummer zu bestätigen. Nachdem der Nutzer auf die Schaltfläche Verify geklickt hat, wird der Der Browser leitet das OTP automatisch an die Website weiter und löst das navigator.credentials.get(). Die Website kann dann das OTP extrahieren und des Überprüfungsverfahrens.

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

WebOTP API auf dem Computer verwenden

Die Bestätigung von Telefonnummern per SMS ist weit verbreitet und plattformunabhängig. Beliebige Verwendung Gehäuse auf Mobilgeräten sollten auch für Desktop-Geräte geeignet sein.

Die WebOTP API wird auf dem Computer genauso verwendet wie damit Websites denselben Code auf allen Plattformen bereitstellen können.

Browserunterstützung und Interoperabilität

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

Die WebOTP API wird zwar nicht in anderen Browser-Engines als Chromium implementiert, Safari verwendet dasselbe SMS-Format. mit der input[autocomplete="one-time-code"]-Unterstützung. Solange in Safari ein Nutzer die automatische iMessage-Synchronisierung aktiviert hat, wenn eine SMS mit einer an den Ursprung gebundenen SMS wenn das einmalige Codeformat mit dem übereinstimmenden Ursprung unter iOS oder iPadOS eingeht, wird die Nachricht an macOS weitergeleitet. Wenn die Nutzenden den Fokus auf das Eingabefeld legen, schlägt dem Nutzer das OTP vor.

Feedback

Ihr Feedback ist von unschätzbarem Wert für die Verbesserung der WebOTP API. Jetzt ausprobieren und informieren Sie uns was Sie denken.

Foto von Luis Villasmil am Unsplash