WebOTP API ile telefon numaralarını web'de doğrulayın

SMS ile gönderilen OTP'leri olan kullanıcılara yardımcı olun

WebOTP API nedir?

Günümüzde, dünyada çoğu insan mobil cihaza sahip ve geliştiriciler, hizmetlerinin kullanıcıları için tanımlayıcı olarak telefon numaralarını kullanıyor.

Telefon numaralarını doğrulamanın çeşitli yolları vardır ancak SMS ile gönderilen rastgele oluşturulmuş tek kullanımlık şifre (OTP) en yaygın yöntemlerden biridir. Bu kodun geliştiricinin sunucusuna geri gönderilmesi, telefon numarasının kontrolünü gösterir.

Bu fikir, aşağıdakileri başarmak için birçok senaryoda kullanılıyor:

• Kullanıcının tanımlayıcısı olarak telefon numarası. Bazı web siteleri, yeni bir hizmete kaydolurken e-posta adresi yerine telefon numarası ister ve bu bilgiyi hesap tanımlayıcısı olarak kullanır.
• İki adımlı doğrulama. Bir web sitesi oturum açarken daha fazla güvenlik için şifre veya başka bir bilgi faktörüne ek olarak SMS ile gönderilen tek seferlik bir kod ister.
• Ödeme onayı. Kullanıcı ödeme yaparken SMS ile gönderilen tek seferlik bir kod istemek kullanıcının niyetini doğrulamaya yardımcı olabilir.

Mevcut süreç kullanıcılar için sorun oluşturuyor. SMS mesajında bir OTP bulmak, ardından bunu kopyalayıp forma yapıştırmak zahmetlidir ve kritik kullanıcı yolculuklarındaki dönüşüm oranlarını düşürür. Bu sürecin hafifletilmesi, birçok büyük küresel geliştiricilerin web için uzun zamandır talep ettiği bir istekti. Android, tam olarak bunu yapan bir API'ye sahiptir. iOS ve Safari de öyle.

WebOTP API, uygulamanızın alan adına bağlı özel biçimlendirilmiş mesajlar almasına olanak tanır. Bu sayede, programlı bir şekilde SMS mesajından OTP alabilir ve kullanıcının telefon numarasını daha kolay bir şekilde doğrulayabilirsiniz.

İşleyiş şeklini görün

Bir kullanıcının, bir web sitesi üzerinden telefon numarasını doğrulamak istediğini varsayalım. Web sitesi, kullanıcıya SMS üzerinden bir kısa mesaj gönderir ve kullanıcı, telefon numarasının sahibi olduğunu doğrulamak için mesajdaki OTP'yi girer.

WebOTP API'de bu adımlar, videoda gösterildiği gibi kullanıcı için bir kez dokunmak kadar kolaydır. Kısa mesaj geldiğinde bir alt sayfa açılır ve kullanıcıdan telefon numarasını doğrulamasını ister. Alt sayfadaki Doğrula düğmesini tıkladıktan sonra, tarayıcı OTP'yi forma yapıştırır ve form, kullanıcının Devam'a basmasına gerek kalmadan gönderilir.

Tüm süreç aşağıdaki resimde gösterilmektedir.

Demoyu kendiniz deneyin. Telefon numaranızı istemez veya cihazınıza SMS göndermez, ancak demoda görüntülenen metni kopyalayarak başka bir cihazdan SMS gönderebilirsiniz. WebOTP API'yi kullanırken gönderenin kim olduğu önemli olmadığı için bu yöntem işe yarar.

1. Chrome 84'te https://web-otp.glitch.me adresine veya daha sonra, bir Android cihazda adresine gidin.
2. Telefonunuza başka bir telefondan aşağıdaki SMS mesajını gönderin.

Your OTP is: 123456.

@web-otp.glitch.me #12345

SMS'i aldınız ve kodu giriş alanına girmenizi isteyen istemi gördünüz mü? WebOTP API kullanıcılar için bu şekilde çalışır.

WebOTP API'nin kullanımı üç bölümden oluşur:

• Düzgün şekilde ekli bir <input> etiketi
• Web uygulamanızdaki JavaScript
• SMS ile gönderilen biçimlendirilmiş mesaj metni.

İlk olarak <input> etiketini ele alacağım.

<input> etiketine ek açıklama ekleme

WebOTP'nin kendisi herhangi bir HTML ek açıklaması olmadan çalışır, ancak tarayıcılar arası uyumluluk için kullanıcının OTP girmesini beklediğiniz <input> etiketine autocomplete="one-time-code" eklemenizi önemle tavsiye ederiz.

Bu şekilde Safari 14 veya sonraki sürümler, WebOTP'yi desteklemese bile SMS mesajını biçimlendirme bölümünde açıklanan biçimde bir SMS aldığında kullanıcıya <input> alanını OTP ile otomatik olarak doldurmasını önerebilir.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

WebOTP API'yi kullanma

WebOTP basit olduğu için aşağıdaki kodu kopyalayıp yapıştırmanız yeterli olur. Neler olduğunu size anlatacağım.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Özellik algılama

Özellik algılama, diğer birçok API ile aynıdır. DOMContentLoaded etkinliği dinlemek, DOM ağacının sorgulamaya hazır olmasını bekler.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

OTP'yi işle

WebOTP API'nin kendisi yeterince basittir. OTP'yi almak için navigator.credentials.get() kullanın. WebOTP, bu yönteme yeni bir otp seçeneği ekler. Yalnızca bir özelliği vardır: transport. Bu özelliğin değeri 'sms' dizesini içeren bir dizi olmalıdır.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Bu, SMS mesajı geldiğinde tarayıcının izin akışını tetikler. İzin verilirse döndürülen söz bir OTPCredential nesnesiyle çözümlenir.

Elde edilen OTPCredential nesnesinin içeriği

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

Ardından, OTP değerini <input> alanına iletin. Formun doğrudan gönderilmesi, kullanıcının bir düğmeye dokunmasını gerektiren adımı ortadan kaldırır.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

İleti iptal ediliyor

Kullanıcının manuel olarak bir OTP girip formu göndermesi durumunda options nesnesinde AbortController örneği kullanarak get() çağrısını iptal edebilirsiniz.

JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

SMS mesajını biçimlendirme

API'nin kendisi yeterince basit görünecektir, ancak kullanmadan önce bilmeniz gereken birkaç şey vardır. Mesaj, navigator.credentials.get() çağrıldıktan sonra gönderilmeli ve get() çağrısı yapılan cihazda alınmalıdır. Son olarak, mesaj aşağıdaki biçimlendirmeye uygun olmalıdır:

• Mesaj, (isteğe bağlı) kullanıcıların okuyabileceği bir metinle başlar. Bu metin, dört ila on karakter uzunluğunda bir alfanümerik dize içerir. URL'nin ve OTP'nin son satırında en az bir sayı kalır.
• API'yi çağıran web sitesinin URL'sinin alan adı kısmından önce @ gelmelidir.
• URL, bir diyez işareti ("#") ve ardından OTP'yi içermelidir.

Örneğin:

Your OTP is: 123456.

@www.example.com #123456

Kötü örnekler:

Bozuk SMS metni örneği	Bu neden işe yaramaz?
Here is your code for @example.com #123456	@ değerinin son satırın ilk karakteri olması beklenir.
Your code for @example.com is #123456	@ değerinin son satırın ilk karakteri olması beklenir.
Your verification code is 123456 @example.com\t#123456	@host ile #code arasında tek bir boşluk olması gerekir.
Your verification code is 123456 @example.com  #123456	@host ile #code arasında tek bir boşluk olması gerekir.
Your verification code is 123456 @ftp://example.com #123456	URL şeması dahil edilemez.
Your verification code is 123456 @https://example.com #123456	URL şeması dahil edilemez.
Your verification code is 123456 @example.com:8080 #123456	Bağlantı noktası dahil edilemiyor.
Your verification code is 123456 @example.com/foobar #123456	Yol eklenemiyor.
Your verification code is 123456 @example .com #123456	Alan adında boşluk yok.
Your verification code is 123456 @domain-forbiden-chars-#%/:<>?@[] #123456	Alan adında yasak karakter bulunmamalıdır.
@example.com #123456 Mambo Jumbo	@host ve #code öğelerinin son satır olması bekleniyor.
@example.com #123456 App hash #oudf08lkjsdf834	@host ve #code öğelerinin son satır olması bekleniyor.
Your verification code is 123456 @example.com 123456	# eksik.
Your verification code is 123456 example.com #123456	@ eksik.
Hi mom, did you receive my last text	@ ve # eksik.

Demolar

Demoyu kullanarak çeşitli mesajlar deneyin: https://web-otp.glitch.me

Bunu çatallayarak da kendi sürümünüzü oluşturabilirsiniz: https://glitch.com/edit/#!/web-otp.

Kaynaklar arası iframe'den WebOTP kullanma

Kaynaklar arası iframe'e SMS OTP'si girmek, özellikle 3D Secure'da ödeme onayı için genellikle kullanılır. Kaynaklar arası iframe'leri destekleyen ortak biçime sahip WebOTP API, iç içe yerleştirilmiş kaynaklara bağlı OTP'leri sunar. Örneğin:

• Kullanıcı, kredi kartıyla ayakkabı satın almak için shop.example adresini ziyaret eder.
• Kredi kartı numarasını girdikten sonra, entegre ödeme sağlayıcı bir iframe içinde bank.example web sitesinden 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 kodu girebilir.

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

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

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

SMS kısa mesajına bağlı kaynaklara ek açıklama ekle

WebOTP API bir iframe içinden çağrıldığında, SMS kısa mesajında üst çerçeve kaynağı, öncesinde @, ardından OTP, # ve son satırda @ ile başlar.

Your verification code is 123456

@shop.example #123456 @bank.exmple

İzin Politikasını Yapılandırın

Kaynaklar arası iframe'de WebOTP kullanmak için yerleştiren kişinin, istenmeyen davranışları önlemek amacıyla otp-kimlik bilgileri izinler politikası aracılığıyla bu API'ye erişim izni vermesi gerekir. Genel olarak 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ının nasıl belirtileceğiyle ilgili daha fazla örnek inceleyin.

Masaüstünde WebOTP'yi kullanma

Chrome'da WebOTP, kullanıcılara masaüstünde telefon numarası doğrulama işlemini tamamlama konusunda yardımcı olmak için diğer cihazlarda alınan SMS'lerin dinlenmesini destekler.

Bu özellik, kullanıcının hem masaüstü Chrome'da hem de Android Chrome'da aynı Google hesabıyla oturum açmasını gerektirir.

Tüm geliştiricilerin, mobil web sitelerinde olduğu gibi WebOTP API'yi masaüstü web sitelerinde de uygulaması gerekir ancak özel yöntemlere gerek yoktur.

Daha fazla bilgi için WebOTP API'yi kullanarak masaüstünde telefon numarasını doğrulama bölümüne bakın.

SSS

Doğru biçimlendirilmiş bir ileti göndermeme rağmen iletişim kutusu görünmüyor. Sorun nedir?

API'yi test ederken dikkat edilmesi gereken birkaç nokta vardır:

• Gönderenin telefon numarası alıcının kişi listesinde yer alıyorsa bu API, temel SMS Kullanıcı Rızası API'sinin tasarımı nedeniyle tetiklenmez.
• Android cihazınızda iş profili kullanıyorsanız ve WebOTP çalışmıyorsa bunun yerine Chrome'u kişisel profilinize yüklemeyi ve kullanmayı deneyin (ör. SMS mesajlarını aldığınız profil).

SMS'inizin doğru biçimlendirilip biçimlendirilmediğini görmek için biçimi tekrar kontrol edin.

Bu API farklı tarayıcılar arasında uyumlu mu?

Chromium ve WebKit, SMS kısa mesaj biçimi üzerinde anlaştı ve iOS 14 ve macOS Big Sur'dan itibaren Safari'nin bu biçimi desteklediğini duyurdu. Safari, WebOTP JavaScript API'yi desteklemese de input öğesine autocomplete=["one-time-code"] ek açıklaması yaparak SMS mesajı biçimle uyumluysa varsayılan klavye otomatik olarak OTP'yi girmenizi önerir.

Kimlik doğrulama yöntemi olarak SMS kullanmak güvenli mi?

SMS OTP, bir telefon numarası ilk sağlandığında doğrulama açısından kullanışlı olsa da, telefon numaraları operatörler tarafından ele geçirilip geri dönüştürülebileceğinden, yeniden kimlik doğrulama için SMS ile telefon numarası doğrulaması dikkatli bir şekilde kullanılmalıdır. WebOTP, kullanışlı bir yeniden kimlik doğrulama ve kurtarma mekanizmasıdır ancak hizmetler, bu yöntemi bilgi sorgulaması gibi ek faktörlerle birleştirmeli veya güçlü kimlik doğrulama için Web Kimlik Doğrulama API'sini kullanmalıdır.

Chrome uygulamasında hataları nereye bildirebilirim?

Chrome'un uygulamasında bir hata buldunuz mu?

• https://new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok ayrıntı ekleyin, yeniden oluşturmaya ilişkin basit talimatları ekleyin ve Bileşenler'i Blink>WebOTP olarak ayarlayın.

Bu özelliğe nasıl yardımcı olabilirim?

WebOTP API'yi kullanmayı düşünüyor musunuz? Herkese açık desteğiniz özellikleri önceliklendirmemize yardımcı olur ve diğer tarayıcı satıcılarına destek vermenin ne kadar kritik olduğunu gösterir. #WebOTP hashtag'ini kullanarak @ChromiumDev'e tweet gönderin ve bunu nerede ve nasıl kullandığınızı bize bildirin.

Kaynaklar

• SMS OTP formu en iyi uygulamaları
• WebOTP API'yi kullanarak masaüstünde telefon numarasını doğrulama
• Kaynaklar arası iframe'ler içindeki OTP formlarını WebOTP API ile doldurma
• Yahoo! JAPAN'ın şifresiz kimlik doğrulaması sorguları %25 azalttı ve oturum açma süresini 2,6 kat hızlandırdı