WebOTP API, artık iframe'lerden OTP'ler alabilir.
SMS OTP'leri (tek kullanımlık şifreler) genellikle telefon numaralarının doğrulanmasında kullanılır. Örneğin, kimlik doğrulamada ikinci bir adım veya web üzerinden ödemeleri doğrulama. Ancak tarayıcı ile SMS uygulaması arasında geçiş yaparken (kopyalayıp yapıştırarak veya manuel olarak) OTP girmek, hata yapmayı kolaylaştırır ve kullanıcı deneyimini zorlaştırır.
WebOTP API, web sitelerine programatik olarak bir SMS mesajından tek kullanımlık şifreyi alın ve girin kullanıcılara tek bir dokunuşla otomatik olarak uygulamasını indirin. SMS özel olarak biçimlendirildiğinden ve kaynağa bağlıdır. Bu nedenle, kimlik avı web sitelerinin OTP'yi çalma ihtimalini de artırır.
WebOTP'de henüz desteklenmeyen bir kullanım alanı, bir kaynağı hedeflemektir. bir çerçevedir. Bu genellikle ödeme onayı için kullanılır. 3D Secure ile çalışır. Ortak ortak bir kökler arası desteği destekleyecek biçim iframe'ler, WebOTP API artık Chrome 91'den itibaren iç içe yerleştirilmiş kaynaklara bağlanan OTP'ler.
WebOTP API'nin işleyiş şekli
WebOTP API'nin kendisi yeterince basittir:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
SMS mesajı, kaynak sınıra sahip tek seferlik olacak şekilde biçimlendirilmelidir. ekleyebilirsiniz.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Son satırda, önüne eklenecek kaynağı içerdiğine dikkat edin.
@
ve ardından #
ile devam eden 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.
Kaynaklar arası iframe'lerin kullanım alanları
Kaynaklar arası iframe'deki bir forma OTP girmek ödemede yaygın olarak kullanılır senaryoları ele alacağız. Bazı kredi kartı veren kuruluşlar, Ödeme yapan tarafın özgünlüğünü kontrol etmek. Buna 3D Secure denir ve form, genellikle aynı sayfadaki bir iframe içinde gösterilir. Bu sayfa, ödeme akışı sağlanmalıdır.
Örneğin:
- Bir kullanıcı, kredi kartıyla ayakkabı satın almak için
shop.example
adresini ziyaret eder. - Entegre ödeme sağlayıcı, kredi kartı numarasını girdikten sonra bir
iFrame içinde
bank.example
tarafından gönderilen formda kullanıcıdan hızlı ödeme için telefon numarası. bank.example
, şunu yapabilmesi için kullanıcıya OTP içeren bir SMS gönderir: kimliğini doğrulamak için bu kodu girebilir.
Kaynaklar arası iframe'den WebOTP API'yi kullanma
WebOTP API'yi kaynaklar arası iframe içinden kullanmak için iki işlem yapmanız gerekir şeyler:
- SMS metninde hem üst çerçeve kaynağına hem de iframe kaynağına açıklama ekleyin mesajını alırsınız.
- Kaynaklar arası iframe'in OTP almasına izin vermek için izin politikasını yapılandırın kullanıcıya gönderebilirsiniz.
Demoyu şu adresten kendiniz deneyebilirsiniz: https://web-otp-iframe-demo.stackblitz.io.
SMS kısa mesajına bağlantı kaynakları not ekle
WebOTP API bir iframe'den çağrıldığında, SMS kısa mesajı
@
ile başlayan üst çerçeve kaynağını ve ardından, #
öncesinden gelen OTP'yi ekleyin
ardından @
geldiği iframe kaynağı gelir.
@shop.example #123456 @bank.exmple
İzin Politikasını Yapılandırma
WebOTP'yi kaynaklar arası iframe'de kullanmak için yerleştiren, buna erişim izni vermelidir İstenmeyen erişimleri önlemek için otp kimlik bilgileri izin politikası aracılığıyla API gösterir. Genellikle bu hedefe ulaşmanın iki yolu vardır:
- (HTTP Başlığı aracılığıyla):
Permissions-Policy: otp-credentials=(self "https://bank.example")
- iframe
allow
özelliği aracılığıyla:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
İzin politikası belirtme ile ilgili diğer örnekleri inceleyin ziyaret edin.
Uyarılar
İç içe yerleştirme seviyeleri
Chrome şu anda yalnızca kaynaklar arası iframe'lerden gelen WebOTP API çağrılarını desteklemektedir üst öğe zincirinde en fazla bir benzersiz kaynak içermeyen. şu senaryoları inceleyin:
- a.com -> b.com
- a.com -> b.com.tr -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com.tr -> c.com
b.com'da WebOTP kullanımı desteklenir ancak c.com'da kullanımı desteklenmez.
Aşağıdaki senaryonun da talep yetersizliği nedeniyle desteklenmediğini unutmayın. karmaşık şeylere odaklanın.
- a.com -> b.com.tr -> a.com (WebOTP API'sini çağırır)
Birlikte çalışabilirlik
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,
Kaynağa bağlı tek seferlik kod biçimi içeren SMS, eşleşen
klavye, OTP'nin giriş alanına girilmesini önerir.
Nisan 2021'den itibaren Safari,
%
değerleridir.
Ancak spesifikasyon tartışması @
ile devam ettiğinden,
desteklenen SMS biçiminin uygulanma süreci de yaygınlaşacaktır.
Geri bildirim
Geri bildirimleriniz WebOTP API'yi daha iyi hale getirmek için çok değerli. Devam edip deneyin ve bunu bize bildirin düşünmenizi sağlar.
Kaynaklar
- Web OTP ile web'de telefon numaralarını doğrulama API
- SMS OTP formu en iyi uygulamaları
- WebOTP API
- Kaynaklara bağlı tek seferlik kodlar SMS gönder
Fotoğraf: rupixen.com, Unsplash'te