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

WebOTP API artık iframe'lerden OTP alabilir.

Eiji Kitamura
Yi Gu
SMS OTP'ler (tek kullanımlık şifreler), genellikle telefon numaraları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 OTP'yi kopyalayıp yapıştırmak veya manuel olarak girmek için tarayıcı ile SMS uygulaması arasında geçiş yapmak, hata yapmayı kolaylaştırır ve kullanıcı deneyimine zorluk ekler.

WebOTP API, web sitelerine tek kullanımlık şifreyi SMS mesajından programatik olarak alma ve uygulamayı değiştirmeden kullanıcılar için tek bir dokunuşla forma otomatik olarak girme olanağı sunar. SMS özel olarak biçimlendirilir ve kaynağa bağlanır. Bu sayede, kimlik avı yapan web sitelerinin tek kullanımlık şifreyi çalmasının da olasılığı azaltılır.

WebOTP'de henüz desteklenmeyen bir kullanım alanı, iFrame içindeki bir kaynağı hedefliyordu. Bu genellikle ödeme onayı için kullanılır (özellikle 3D Secure ile). Çapraz kaynaklı iframe'leri desteklemek için ortak biçime sahip olan WebOTP API, Chrome 91'den itibaren iç içe yerleştirilmiş kaynaklara bağlı OTP'ler sunmaya başladı.

WebOTP API'nin işleyiş şekli

WebOTP API'nin kendisi oldukça basittir:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

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.

WebOTP'yi kullanmayla ilgili temel bilgileri WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makalede bulabilirsiniz.

Kaynaklar arası iframe'lerin kullanım alanları

Çapraz kaynaklı bir iframe'deki forma tek kullanımlık şifre girmek, ödeme senaryolarında yaygındır. Bazı kredi kartı veren kuruluşlar, ödeme yapan kullanıcının kimliğini doğrulamak için ek bir doğrulama adımı gerektirir. Buna 3D Secure denir ve form genellikle ödeme akışının bir parçasıymış gibi aynı sayfadaki bir iframe içinde gösterilir.

Örneğin:

  • Bir kullanıcı, kredi kartıyla ayakkabı satın almak için shop.example'yi ziyaret eder.
  • Entegre ödeme sağlayıcı, kredi kartı numarasını girdikten sonra bir iframe içinde bank.example'ten gelen ve kullanıcıdan hızlı ödeme için telefon numarasını doğrulamasını isteyen bir form gösterir.
  • bank.example, kullanıcının kimliğini doğrulamak için girebileceği bir OTP içeren bir SMS gönderir.

WebOTP API'yi kaynakta farklı bir iframe'den kullanma

WebOTP API'yi kaynakta farklı bir iFrame içinde kullanmak için iki şey yapmanız gerekir:

  • SMS metin mesajında hem üst çerçeve kaynağını hem de iframe kaynağını ek açıklamayla belirtin.
  • Kaynaklar arası iFrame'in doğrudan kullanıcıdan OTP almasına izin verecek şekilde izin politikasını yapılandırın.
Bir iFrame içinde çalışan WebOTP API.

Demoyu https://web-otp-iframe-demo.stackblitz.io adresinden kendiniz deneyebilirsiniz.

SMS kısa mesajına bağlı kaynakları ek açıklamayla belirtme

WebOTP API bir iFrame'den çağrıldığında SMS metin mesajı, @ ile başlayan üst çerçeve kaynağını, ardından # ile başlayan OTP'yi ve ardından @ ile başlayan iFrame kaynağını içermelidir.

@shop.example #123456 @bank.exmple

İzin Politikası'nı yapılandırma

WebOTP'yi çapraz kaynaklı bir iFrame'de kullanmak için, beklenmedik davranışları önlemek amacıyla yerleşimcinin otp-credentials izin politikası aracılığıyla bu API'ye erişim izni vermesi gerekir. Genel olarak bu hedefe ulaşmanın iki yolu vardır:

  • HTTP üstbilgisi 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ının nasıl belirtileceğiyle ilgili daha fazla örnek

Uyarılar

İç içe yerleştirme seviyeleri

Chrome şu anda yalnızca üst öğe zincirinde en fazla bir benzersiz kaynağı olan çapraz kaynaklı iframe'lerden gelen WebOTP API çağrılarını desteklemektedir. 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 kullanıcı deneyimi karmaşıklıkları nedeniyle aşağıdaki senaryoya da destek verilmediğini unutmayın.

  • a.com -> b.com -> a.com (WebOTP API'yi çağırır)

Birlikte çalışabilirlik

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, eşleşen kaynakla birlikte kaynakla bağlı tek kullanımlık kod biçimi içeren bir SMS gelir gelmez klavye, OTP'yi giriş alanına girmeyi önerir.

Safari, Nisan 2021'den itibaren % kullanan benzersiz bir SMS biçimiyle iframe'i desteklemektedir. Ancak spesifikasyon tartışmasında bunun yerine @ kullanılmasına karar verildiğinden, desteklenen SMS biçiminin uygulanmasının ortak bir noktada buluşacağını umuyoruz.

Geri bildirim

WebOTP API'yi daha iyi hale getirmek için geri bildirimleriniz çok önemlidir. Lütfen API'yi deneyin ve düşüncelerinizi bizimle paylaşın.

Kaynaklar

rupixen.com tarafından Unsplash'ta yayınlanan fotoğraf