Kaynaklar arası iframe'lerde OTP formlarını WebOTP API ile doldurma

WebOTP API, artık iframe'lerden OTP'ler alabilir.

Eiji Kitamura
Yi Gu
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.

WebOTP API.

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.
ziyaret edin.
Etkin bir iframe içinde WebOTP API'si.

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, # öncesinde 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. daha karmaşık hale getirebilirsiniz.

  • 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 uygulanmaya başlanacağı anlamına gelir.

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

Fotoğraf: rupixen.com, Unsplash'te