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

WebOTP API artık iframe'lerin içinden OTP'leri alabilir.

Eiji Kitamura
Yi Gu
SMS OTP'leri (tek kullanımlık şifreler) genellikle telefon numaralarını doğrulamak için, örneğin kimlik doğrulamanın ikinci adımı olarak veya web'de ödemeleri doğrulamak için kullanılır. Ancak tarayıcı ile SMS uygulaması arasında geçiş yapmak, kopyalayıp yapıştırmak veya OTP'yi manuel olarak girmek için hata yapmayı kolaylaştırır ve kullanıcı deneyimini sadeleştirir.

WebOTP API, web sitelerinin tek kullanımlık şifreyi bir SMS mesajından programlı bir şekilde alabilmesini ve uygulamayı değiştirmeden yalnızca tek bir dokunuşla bu şifreyi kullanıcıların formuna otomatik olarak girmesini sağlar. SMS özel olarak biçimlendirilmiştir ve kaynağa bağlıdır. Bu nedenle, kimlik avı web sitelerinin OTP'yi çalması ihtimalini de azaltır.

WebOTP'de henüz desteklenmeyen kullanım alanlarından biri, iframe içindeki bir kaynağı hedeflemekti. Bu, özellikle 3D Secure ile genellikle ödeme onayı için kullanılır. Kaynaklar arası iframe'leri destekleyen ortak biçime sahip olan WebOTP API, Chrome 91'den itibaren artık iç içe yerleştirilmiş kaynaklara bağlı OTP'leri sunmaktadır.

WebOTP API'nin işleyiş şekli

WebOTP API'nin kendisi yeterince basittir:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

Son satırda, öncesinde bir @, ardından da # ile başlayan OTP ile bağlanacak kaynağı içerdiğine dikkat edin.

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ı Verify düğmesini tıkladıktan sonra, tarayıcı OTP'yi otomatik olarak siteye yönlendirir ve navigator.credentials.get() hatasını çözer. Ardından web sitesi OTP'yi çıkarıp doğrulama işlemini tamamlayabilir.

WebOTP kullanımıyla ilgili temel bilgileri WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleden öğrenebilirsiniz.

Kaynaklar arası iframe'lerin kullanım alanları

Kaynaklar arası iframe içinde bir forma OTP girmek, ödeme senaryolarında yaygındır. Bazı kredi kartı veren kuruluşlar, ödeyen kişinin kimliğini kontrol etmek için ek bir doğrulama adımı uygulanmasını zorunlu tutar. 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 sitesini ziyaret eder.
  • Entegre ödeme sağlayıcı, kredi kartı numarasını girdikten sonra bir iframe içinde bank.example uygulamasından hızlı ödeme için kullanıcıdan telefon numarasını doğrulamasını isteyen bir form gösterir.
  • bank.example, kullanıcıya OTP içeren bir SMS gönderir. Böylece kullanıcı, kimliğini doğrulamak için bu SMS'i girebilir.

Kaynaklar arası iframe'den WebOTP API'yi kullanma

Kaynaklar arası iframe içinden WebOTP API'yi kullanmak için iki işlem yapmanız gerekir:

  • SMS kısa mesajında hem üst çerçevenin kaynağına hem de iframe'in kaynağına ek açıklama ekleyin.
  • Kaynaklar arası iframe'in kullanıcıdan doğrudan OTP almasına izin vermek için izin politikasını yapılandırın.
Bir iframe içindeki WebOTP API çalışırken.

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

SMS kısa mesajına bağlı kaynaklar için not ekleyin

WebOTP API bir iframe içinden çağrıldığında, SMS kısa mesajında üst çerçeve kaynağını, önce @, ardından OTP'yi, # ve ardından @ ifadesini içeren iframe kaynağı yer almalıdır.

@shop.example #123456 @bank.exmple

İzin Politikasını Yapılandır

Kaynaklar arası iframe'de WebOTP'yi kullanmak için yerleştiricinin, istenmeyen davranışları önlemek amacıyla otp-credentials izin politikası aracılığıyla bu API'ye erişim izni vermesi gerekir. 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>

Bir izin politikasının nasıl belirtileceğiyle ilgili diğer örnekleri inceleyin.

Uyarılar

İç içe yerleştirme seviyeleri

Şu anda Chrome yalnızca üst zincirinde birden fazla benzersiz kaynağı olmayan çapraz kaynak iframe'lerden 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

b.com'da WebOTP kullanımı desteklenir, ancak c.com'da desteklenmez.

Aşağıdaki senaryonun da talep eksikliği ve kullanıcı deneyiminin karmaşıklığı nedeniyle desteklenmediğ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 kaynağa sahip kaynağa bağlı tek seferlik kod biçimi içeren bir SMS gelir gelmez klavye, giriş alanına OTP'nin girilmesini önerir.

Nisan 2021'den itibaren Safari, % kullanan benzersiz bir SMS biçimine sahip iframe'i desteklemektedir. Ancak, spesifikasyon tartışması bunun yerine @ ile devam etmekte olduğundan, desteklenen SMS biçiminin uygulanmasının ortak bir noktaya geleceğini umuyoruz.

Geri bildirim

WebOTP API'yi daha iyi hale getirmemizde geri bildirimleriniz kıymetli. Lütfen deneyip düşüncelerinizi bize bildirin.

Kaynaklar

Fotoğraf: rupixen.com tarafından Unsplash'ta