Vanaf Chrome 93 kunnen websites telefoonnummers verifiëren vanuit desktop Chrome.
WebOTP helpt gebruikers met één tik een telefoonnummerverificatiecode op een mobiele website in te voeren zonder tussen apps te schakelen. Chrome 93 breidt deze functionaliteit ook uit naar desktop. Lees verder voor meer informatie.
Invoering
SMS OTP's (eenmalige wachtwoorden) worden vaak gebruikt om een telefoonnummer te verifiëren, bijvoorbeeld als tweede stap in de authenticatie, of om betalingen op internet te verifiëren. De hele stroom van het overschakelen van desktop naar mobiel, het openen van de sms-app, het onthouden en invoeren van het OTP op de oorspronkelijke website op de desktop zorgt echter voor wrijving. Het is gemakkelijk om op deze manier fouten te maken en het is kwetsbaar voor phishing-aanvallen.
De WebOTP API geeft websites de mogelijkheid om programmatisch het eenmalige wachtwoord uit een sms-bericht te verkrijgen en het formulier voor gebruikers automatisch in te vullen met slechts één tik, zonder van app te wisselen. Het sms-bericht heeft een specifiek formaat en is gebonden aan de herkomst, waardoor het risico wordt verkleind dat phishing-websites ook het OTP stelen.
Eén gebruiksscenario dat nog moet worden ondersteund in WebOTP is het richten van verzoeken om telefoonnummerverificatie vanaf een extern desktopapparaat of een laptop. De API werkt alleen op apparaten met telefoniemogelijkheden. De API ondersteunt nu het luisteren naar sms-berichten die op andere apparaten worden ontvangen om gebruikers te helpen bij het voltooien van de telefoonnummerverificatie op de desktop in Chrome 93.
Probeer het
Vereisten
- Een desktop- of laptopcomputer (Windows, Mac, Linux of ChromeOS).
- Een Android-telefoon met Google Play Services versie 20.30.12 of hoger .
- Chrome 93 of hoger, zowel op desktop of laptop als mobiel. Chrome 93 Bèta is vanaf eind juli 2021 beschikbaar.
- U moet inloggen op hetzelfde Google-account in zowel desktop-Chrome als mobiele Chrome. Bijvoorbeeld via https://myaccount.google.com/ of https://mail.google.com . U hoeft synchronisatie niet in te schakelen.
- Op uw Android-apparaat moet u zich aanmelden bij Android via "Instellingen->Google".
- Chrome 93 moet de standaardbrowser op het Android-apparaat zijn .
- Chrome 93 moet op de voorgrond of op de achtergrond op het Android-apparaat worden uitgevoerd.
Demo
Volg deze stappen om deze naadloze verificatieprocedure voor telefoonnummers zelf op de desktop uit te proberen:
- Ga naar https://web-otp-demo.glitch.me/ op het bureaublad. Klik op de knop Verifiëren .
- Stuur het exacte sms-bericht dat op het scherm stond van een tweede telefoon naar het Android-apparaat.
- Wanneer de sms op het Android-apparaat wordt afgeleverd, verschijnt er een dialoogvenster waarin u wordt gevraagd of u het telefoonnummer op het bureaublad wilt verifiëren. Druk op Verzenden om goed te keuren.
- Op het bureaublad moet de verificatiecode die naar het Android-apparaat wordt verzonden, automatisch worden ingevuld in het invoerveld.
Hoe de WebOTP-API werkt
Laten we eens kijken hoe de WebOTP API werkt:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
Het SMS-bericht moet zijn opgemaakt met de aan de oorsprong gebonden eenmalige codes .
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Merk op dat de laatste regel de oorsprong bevat waaraan moet worden gebonden, voorafgegaan door een @ gevolgd door de OTP voorafgegaan door een # .
Wanneer het sms-bericht binnenkomt, verschijnt er een informatiebalk waarin de gebruiker wordt gevraagd zijn telefoonnummer te verifiëren. Nadat de gebruiker op de knop Verify heeft geklikt, stuurt de browser de OTP automatisch door naar de site en wordt de navigator.credentials.get() opgelost. De website kan vervolgens het OTP extraheren en het verificatieproces voltooien.
Ga voor meer informatie naar Telefoonnummers op internet verifiëren met de WebOTP API .
Hoe de WebOTP API op desktop te gebruiken
Telefoonnummerverificatie via sms wordt veel gebruikt en is platformonafhankelijk. Alle gebruiksscenario's op mobiele apparaten moeten van toepassing zijn op desktopapparaten.
Het gebruik van de WebOTP API op desktop is hetzelfde als op mobiel, zodat websites dezelfde code op verschillende platforms kunnen implementeren.
Browserondersteuning en interoperabiliteit
Deze functie wordt mogelijk gemaakt door Chrome Sync, dus deze werkt momenteel alleen in Chrome. Het ontvangen en verzenden van sms-berichten op iOS of iPad OS in Chrome wordt niet ondersteund.
Hoewel andere browserengines dan Chromium de WebOTP API niet implementeren, deelt Safari hetzelfde sms-formaat met ondersteuning input[autocomplete="one-time-code"] . Wanneer een gebruiker in Safari de automatische synchronisatie van iMessage heeft ingeschakeld, wordt het bericht doorgestuurd naar macOS wanneer een sms met een aan de oorsprong gebonden, eenmalige code-indeling met de overeenkomende oorsprong op iOS of iPadOS arriveert. Als de gebruiker zich op het invoerveld concentreert, zal Safari de OTP voorstellen die de gebruiker moet invoeren.
Feedback
Uw feedback is van onschatbare waarde bij het verbeteren van de WebOTP API. Probeer het uit en laat ons weten wat je ervan vindt.
Foto door Luis Villasmil op Unsplash