SMS OTP’leri (tek seferlik şifreler), örneğin kimlik doğrulamanın ikinci adımı olarak telefon numaralarını doğrulamak veya web’deki ödemeleri doğrulamak için yaygın olarak kullanılır. Ancak tarayıcı ve SMS uygulaması arasında geçiş yapmak, kopyala-yapıştır yapmak veya OTP’ye manuel olarak girmek hata yapmayı kolaylaştırır ve kullanıcı deneyimine sürtünme katar.
WebOTP API, web sitelerine, bir SMS mesajından tek kullanımlık şifreyi programlı olarak alma ve uygulamayı değiştirmeden tek bir dokunuşla kullanıcılar için forma otomatik olarak girme yeteneği sağlar. SMS özel olarak biçimlendirilmiştir ve kaynağa bağlıdır, bu nedenle kimlik avı yapan web sitelerinin OTP’yi çalma şansını da azaltır.
WebOTP’de henüz desteklenmeyen bir kullanım durumu, bir iframe içindeki bir kaynağı hedefliyordu. Bu genellikle ödeme onayı için kullanılır, özellikle de 3D Güvenli. sahip olmak kaynaklar arası iframe’leri desteklemek için ortak biçimWebOTP API artık Chrome 91’den başlayarak yuvalanmış kaynaklara bağlı OTP’ler sağlıyor.
WebOTP API’si nasıl çalışır? #
WebOTP API’sinin kendisi yeterince basittir:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
SMS mesajı, kaynağa bağlı tek seferlik kodlarla biçimlendirilmelidir.
Your OTP is: 123456.ARandomGuy_OnTheWeb-otp.glitch.me #12345
Son satırda, önünde bir a ile bağlanacak orijini içerdiğine dikkat edin. @ ardından OTP ve ardından bir #.
Kısa mesaj geldiğinde, bir bilgi çubuğu açılır ve kullanıcıdan telefon numarasını doğrulamasını ister. kullanıcı tıkladıktan sonra Verify düğmesini tıklattığınızda, tarayıcı OTP’yi otomatik olarak siteye iletir ve navigator.credentials.get(). Web sitesi daha sonra OTP’yi çıkarabilir ve doğrulama işlemini tamamlayabilir.
WebOTP API ile Web’deki telefon numaralarını doğrulama bölümünde WebOTP kullanmanın temellerini öğrenin.
Kaynaklar arası iframe’ler kullanım örnekleri #
Kaynaklar arası bir iframe içindeki bir forma OTP girmek, ödeme senaryolarında yaygın olarak kullanılır. Bazı kredi kartı düzenleyicileri, ödeyenin gerçekliğini kontrol etmek için ek bir doğrulama adımı gerektirir. Buna 3D Secure adı verilir ve form, genellikle ödeme akışının bir parçasıymış gibi aynı sayfada bir iframe içinde gösterilir.
Örneğin:
- Bir kullanıcı ziyaret eder
shop.examplekredi kartı ile ayakkabı almak. - Kredi kartı numarasını girdikten sonra, entegre ödeme sağlayıcısı bir form gösterir.
bank.examplehızlı ödeme için kullanıcıdan telefon numarasını doğrulamasını isteyen bir iframe içinde. bank.examplekimliklerini doğrulamak için girebilmeleri için kullanıcıya OTP içeren bir SMS gönderir.
Kaynaklar arası bir iframe’den WebOTP API’si nasıl kullanılır? #
Kaynaklar arası bir iframe içinden WebOTP API kullanmak için iki şey yapmanız gerekir:
- SMS metin mesajında hem üst çerçeve kaynağına hem de iframe kaynağına açıklama ekleyin.
- Kaynaklar arası iframe’in kullanıcıdan doğrudan OTP almasına izin vermek için izin ilkesini yapılandırın.
Demoyu kendiniz deneyebilirsiniz. https://web-otp-iframe-demo.stackblitz.io.
Sınırlı kökenleri SMS metin mesajına açıklama ekleyin #
WebOTP API’si bir iframe içinden çağrıldığında, SMS metin mesajının başında en üst çerçeve orijini bulunmalıdır. @ ardından OTP’nin ardından # ardından iframe orijini ve ardından @.
Grasshopper176.example #123456 Purbankz.exmple
İzin Politikasını Yapılandır #
Kaynaklar arası bir iframe’de WebOTP kullanmak için, yerleştiren kişinin bu API’ye otp-kimlik bilgileri aracılığıyla erişim izni vermesi gerekir izin politikası istenmeyen davranışlardan kaçınmak için. Genel olarak, bu hedefe ulaşmanın iki yolu vardır:
Permissions-Policy: otp-credentials=(self "
- iframe aracılığıyla
allowbağlanmak:
iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Görmek bir izin politikasının nasıl belirleneceğine dair daha fazla örnek .
Uyarılar #
Yuvalama seviyeleri #
Şu anda Chrome yalnızca çapraz kaynaklar arası iframe’lerden gelen WebOTP API çağrılarını desteklemektedir. birden fazla değil ata zincirindeki benzersiz köken. Aşağıdaki senaryolarda:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
WebOTP’nin b.com’da kullanılması desteklenir ancak c.com’da kullanılması desteklenmez.
Talep eksikliği ve UX karmaşıklıkları nedeniyle aşağıdaki senaryonun da desteklenmediğini unutmayın.
- a.com -> b.com -> a.com (WebOTP API’sini çağırır)
birlikte çalışabilirlik #
Chromium dışındaki tarayıcı motorları WebOTP API’sini uygulamazken, Safari aynısını paylaşır kısa mesaj formatı onunla input[autocomplete="one-time-code"] Destek. Safari’de, kaynağa bağlı tek seferlik kod formatını içeren bir SMS, eşleşen orijine sahip olarak gelir gelmez, klavye OTP’yi giriş alanına girmenizi önerir.
Nisan 2021 itibarıyla Safari, iframe’i şu şekilde destekler: kullanarak benzersiz bir SMS formatı %. Bununla birlikte, spesifikasyon tartışması sona erdiğinde @ bunun yerine, desteklenen SMS formatının uygulanmasının yakınsayacağını umuyoruz.
Geri bildirim #
Geri bildiriminiz, WebOTP API’yi daha iyi hale getirmede paha biçilmezdir, bu yüzden devam edin ve deneyin ve bilmemize izin ver ne düşündüğünü.
Kaynaklar #
fotoğrafı çeken rupixen.com Açık Unsplash