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). 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 sitelerinin bir SMS mesajından tek kullanımlık şifreyi programatik olarak almasını ve uygulamayı değiştirmeden kullanıcılar için tek bir dokunuşla otomatik olarak forma girmesini sağlar. SMS özel olarak biçimlendirilir ve kaynağa bağlıdır. Bu nedenle, kimlik avı yapan web sitelerinin OTP'yi çalma ihtimalini de azaltır.

WebOTP'de henüz desteklenmeyen bir kullanım alanı, iFrame içindeki bir kaynağı hedefliyordu. Bu genellikle, özellikle 3D Secure ile birlikte, ödeme onayı için kullanılır. Kaynaklar arası iframe'leri destekleyecek ortak biçime sahip WebOTP API, artık Chrome 91'den itibaren iç içe yerleştirilmiş kaynaklara bağlı OTP'leri kullanıma sunuyor.

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 API ile web'de telefon numaralarını doğrulama başlıklı makalede WebOTP'nin temel özelliklerini öğrenin.

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.
  • Kredi kartı numarası girildikten sonra, entegre ödeme sağlayıcı, iFrame içinde bank.example adlı sağlayıcıdan hızlı ödeme için kullanıcıdan 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 kaynak farklı bir iFrame'den 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 kaynaklar arası iframe'de kullanmak için yerleştirici, istenmeyen davranışları önlemek amacıyla otp kimlik bilgileri izin politikası aracılığıyla bu API'ye erişim izni vermelidir. 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ı belirtme ile ilgili diğer örnekleri inceleyin.

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

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

Talep ve kullanıcı deneyimindeki karmaşıklıklar nedeniyle aşağıdaki senaryonun da 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 kaynakla birlikte kaynakla bağlı tek kullanımlık kod biçimi içeren bir SMS gelir gelmez klavye, OTP'yi giriş alanına girmenizi önerir.

Safari, Nisan 2021'den itibaren % kullanan benzersiz bir SMS biçimiyle iframe'i desteklemektedir. Ancak spesifikasyon tartışması bunun yerine @ konusunu ele aldığından, desteklenen SMS biçiminin de aynı şekilde uygulanacağını umuyoruz.

Geri bildirim

Geri bildirimleriniz WebOTP API'nin daha iyi hale getirilmesi açısından çok önemlidir. Hemen deneyin ve düşüncelerinizi bize iletin.

Kaynaklar

Fotoğraf: rupixen.com, Unsplash'te