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

Web siteleri, Chrome 93 sürümünden itibaren telefon numaralarını masaüstü Chrome'dan doğrulayabilir.

Yi Gu
Eiji Kitamura

WebOTP, kullanıcıların mobil web sitesine telefon numarası doğrulama kodu girmelerine yardımcı olur. ve uygulamalar arasında geçiş yapmadan tek dokunuşla. Chrome 93 bu işlevselliği olduğunu da söyleyebiliriz. Daha fazla bilgi edinmek için okumaya devam edin.

Giriş

SMS OTP'leri (tek kullanımlık şifreler) genellikle telefon numaralarının doğrulanması için kullanılır. Örneğin, kimlik doğrulamada ikinci bir adım veya web üzerinden ödemeleri doğrulama. Ancak, masaüstünden cep telefonuna geçiş sırasında SMS'in açılması, orijinal web sitesindeki OTP'yi ezberleyip girerek masaüstünde zorlukları da artırıyor. Bu şekilde hata yapmak kolaydır ve riskler, kimlik avı saldırıları.

WebOTP API, web sitelerine bir SMS mesajından tek kullanımlık şifreyi programatik olarak alın ve Kullanıcılar için uygulamalar arasında geçiş yapmadan tek bir dokunuşla formu otomatik olarak doldurabilirsiniz. SMS'in belirli bir biçimi vardır ve kaynağa bağlıdır. Bu nedenle, kimlik avı web sitelerinin OTP'yi çalması riskini de artırır.

WebOTP API iş başında.

WebOTP'de henüz desteklenmeyen bir kullanım alanı, telefon numarasını hedeflemektir doğrulama isteklerinizi karşılayan bir web API yalnızca telefon özellikleri olan cihazlarda çalışır. Şimdi API kullanıcılara yardımcı olmak için diğer cihazlardan alınan SMS'lerin dinlenmesini destekler Chrome 93'te masaüstünde telefon numarası doğrulamasını tamamlayın.

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 şu adımları uygulayın:

  1. https://web-otp-demo.glitch.me/ adresine gidin. masaüstü. Doğrula düğmesini tıklayın.
  2. İkinci bir telefondan ekrandaki kısa mesajı Android cihaz.
  3. SMS Android cihaza iletildiğinde masaüstündeki telefon numarasını doğrulamak istiyorsunuz. Şu işlem için Gönder'e basın: onayla.
  4. Masaüstünde, Android cihaza gönderilen doğrulama kodu otomatik olarak dolduruldu.

WebOTP API'nin işleyiş şekli

WebOTP API'nin nasıl çalıştığına göz atalım:

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

SMS mesajı, kaynaklara bağlı tek seferlik kodlar kullanılarak biçimlendirilmelidir.

Your OTP is: 123456.

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

Son satırın, önüne bir @ bağlanacak kaynak içerdiğine dikkat edin ve ardından # ile başlayan OTP.

Kısa mesaj geldiğinde, bir bilgi çubuğu açılır ve kullanıcıdan için bu kişinin telefon numarasını doğrulaması gerekir. Kullanıcı Verify düğmesini tıkladıktan sonra, tarayıcı OTP'yi siteye otomatik olarak yönlendirir ve navigator.credentials.get(). Daha sonra web sitesi OTP'yi ayıklar ve adımları uygulayın.

WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleden daha fazla bilgi edinebilirsiniz.

WebOTP API'yi masaüstünde kullanma

SMS yoluyla telefon numarası doğrulama işlemi yaygın olarak kullanılır ve platformdan bağımsızdır. Herhangi bir amaçla kullanılabilir mobil cihazlardaki kılıflar masaüstü cihazlar için de geçerli olmalıdır.

WebOTP API'yi masaüstünde kullanmak mobil cihazlardakiyle aynıdır. Böylece web siteleri aynı kodu platformlar genelinde dağıtabilir.

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

Bu özellik, Chrome Senkronizasyonu tarafından desteklendiğinden şu anda Chrome'da yalnızca çalışır. iOS veya iPad OS'te SMS alma ve aktarma Chrome'da desteklenmez.

Chromium dışındaki tarayıcı motorları WebOTP API'yi uygulamaz ancak Safari aynı SMS biçimini paylaşır input[autocomplete="one-time-code"] desteği var. Safari'de bir Kullanıcı, kaynağa bağlı bir SMS gönderdiğinde iMessage otomatik senkronizasyonunu etkinleştirdiyse iOS veya iPadOS'te tek seferlik kod biçimi eşleşen kaynakla geliyorsa ileti macOS'e yönlendirilir. Kullanıcı giriş alanına odaklanırsa Safari kullanıcıya girmesi için OTP'yi önerir.

Geri bildirim

Geri bildiriminiz, WebOTP API'yi daha iyi hale getirmemiz için çok değerlidir. Deneyin ve bunu bize bildirin düşünmenizi sağlar.

Fotoğraf: Luis Villasmil açık Lansmanı kaldır