Masaüstünde WebOTP API'yi kullanarak telefon numarasını doğrulama

Chrome 93'ten itibaren web siteleri, masaüstü Chrome'daki telefon numaralarını doğrulayabilir.

WebOTP, kullanıcıların mobil web sitesinde bir telefon numarası doğrulama kodunu uygulamalar arasında geçiş yapmadan tek dokunuşla girmesine yardımcı olur. Chrome 93, bu işlevi masaüstü sürümüne de genişletti. Daha fazla bilgi için okumaya devam edin.

Giriş

SMS OTP'ler (tek kullanımlık şifreler), genellikle bir telefon numarasını doğrulamak için kullanılır (ör. kimlik doğrulamadaki ikinci adım olarak) veya web'deki ödemeleri doğrulamak için kullanılır. Ancak masaüstünden mobil cihaza geçiş, SMS uygulamasını açma, tek kullanımlık şifreyi ezberleyip masaüstündeki orijinal web sitesinde girme işleminin tamamı kullanıcı deneyimini olumsuz etkiler. Bu yöntemle hata yapmak kolaydır ve kimlik avı saldırılarına karşı savunmasızdır.

WebOTP API, web sitelerine tek kullanımlık şifreyi SMS mesajından programatik olarak alma ve kullanıcılar için uygulama değiştirmeden tek bir dokunuşla formu otomatik olarak doldurma olanağı sunar. SMS'nin belirli bir biçimi vardır ve kaynağa bağlıdır. Bu nedenle, kimlik avı yapan web sitelerinin OTP'yi çalmasının riskini de azaltır.

WebOTP API'nin işleyiş şekli.

WebOTP'de henüz desteklenmeyen kullanım alanlarından biri, uzak masaüstü cihaz veya dizüstü bilgisayardan gelen telefon numarası doğrulama isteklerini hedeflemektir. API yalnızca telefon işlevlerine sahip cihazlarda çalışır. API artık kullanıcıların Chrome 93'te masaüstünde telefon numarası doğrulamasını tamamlamasına yardımcı olmak için diğer cihazlarda alınan SMS'leri dinlemeyi destekliyor.

Masaüstünde WebOTP API.

Deneyin

Ön koşullar

Demo

Bu sorunsuz telefon numarası doğrulama akışını masaüstünde kendiniz denemek için aşağıdaki adımları uygulayın:

  1. Masaüstünde https://web-otp-demo.glitch.me/ adresine gidin. Doğrula düğmesini tıklayın.
  2. Ekrandaki kısa mesajı ikinci bir telefondan Android cihaza gönderin.
  3. SMS, Android cihaza gönderildiğinde telefon numarasını masaüstünde doğrulamak isteyip istemediğinizi soran bir iletişim kutusu görünür. Onaylamak için Gönder'e basın.
  4. Masaüstünde, Android cihaza gönderilen doğrulama kodu giriş alanına otomatik olarak doldurulur.

WebOTP API'nin işleyiş şekli

WebOTP API'nin işleyiş şekline göz atalım:

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

SMS mesajı, kaynakla bağlı tek seferlik kodlarla biçimlendirilmelidir.

Your OTP is: 123456.

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

Son satırda, bağlanılacak kaynağın @ ile, ardından OTP'nin # ile başladığına dikkat edin.

Kısa mesaj geldiğinde, kullanıcıdan telefon numarasını doğrulaması istenen bir bilgi çubuğu açılır. Kullanıcı Verify düğmesini tıkladıktan sonra tarayıcı, OTP'yi otomatik olarak siteye yönlendirir ve navigator.credentials.get() değerini çözer. Web sitesi, OTP'yi ayıklayıp doğrulama sürecini tamamlayabilir.

Daha fazla bilgi için WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleyi inceleyin.

WebOTP API'yi masaüstünde kullanma

SMS ile telefon numarası doğrulaması yaygın olarak kullanılan ve platformdan bağımsız bir yöntemdir. Mobil cihazlardaki tüm kullanım alanları masaüstü cihazlar için de geçerli olmalıdır.

WebOTP API'nin masaüstünde kullanımı mobil cihazlarla aynıdır. Bu sayede web siteleri aynı kodu platformlar arasında dağıtabilir.

Tarayıcı desteği ve birlikte çalışabilirlik

Bu özellik Chrome Senkronizasyonu tarafından desteklenmektedir. Bu nedenle, şu anda yalnızca Chrome'da kullanılabilir. iOS veya iPad OS'te Chrome'da SMS alma ve gönderme desteklenmez.

Chromium dışındaki tarayıcı motorları WebOTP API'yi uygulamasa da Safari, input[autocomplete="one-time-code"] desteğiyle aynı SMS biçimini paylaşır. Safari'de, kullanıcı iMessage otomatik senkronizasyonunu açtığı sürece, iOS veya iPadOS'te eşleşen kaynakla birlikte kaynakla bağlı tek kullanımlık kod biçimi içeren bir SMS geldiğinde ileti macOS'e yönlendirilir. Kullanıcı giriş alanına odaklanırsa Safari, kullanıcının girmesi için OTP'yi önerir.

Geri bildirim

Geri bildiriminiz, WebOTP API'yi iyileştirmemiz için çok önemlidir. Özelliği deneyip düşüncelerinizi bizimle paylaşın.

Fotoğraf: Luis Villasmil, Unsplash