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

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

WebOTP API nedir?

Günümüzde, dünyanın çoğu insanının bir mobil cihazı var 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 kodu tekrar geliştiricinin sunucusuna göndermek, telefon numarasının kontrolünü gösterir.

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

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

Mevcut süreç kullanıcılar açısından sorun oluşturuyor. SMS mesajında bir OTP bulmak, ardından 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 istediğ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 olarak biçimlendirilmiş mesajlar alabilmesini sağlar. Bunu kullanarak, programlı bir şekilde SMS mesajından bir 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 aracılığıyla telefon numarasını doğrulamak istediğini varsayalım. Web sitesi, kullanıcıya SMS yoluyla bir kısa mesaj gönderir ve kullanıcı, telefon numarasının sahipliğini doğrulamak için mesajdaki OTP'yi girer.

WebOTP API ile bu adımlar, videoda gösterildiği gibi kullanıcının tek bir kez dokunması 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 kullanıcının Devam'a basmasına gerek kalmadan form gönderilir.

Tüm sürecin diyagramını aşağıdaki resimde görebilirsiniz.

Demoyu kendiniz deneyin. Telefon numaranızı istemez veya cihazınıza SMS göndermez, ancak demoda gösterilen metni kopyalayarak başka bir cihazdan mesaj 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 veya daha sonra bir Android cihazda https://web-otp.glitch.me adresine gidin.
2. Telefonunuza başka bir telefondan aşağıdaki SMS kısa mesajını gönderin.

Your OTP is: 123456.

@web-otp.glitch.me #12345

SMS'i aldınız ve kodu giriş alanına girmeniz istenir mi? 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 ek açıklamalı 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 seçenek Safari 14 veya sonraki sürümlerin, WebOTP'yi desteklemese bile kullanıcıya SMS mesajını biçimlendirme bölümünde açıklanan biçimdeki bir SMS aldığında <input> alanını otomatik olarak bir OTP ile doldurmasını önermesine olanak tanır.

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ğini dinlemek, DOM ağacının sorgulanmaya 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 de yeterince basittir. OTP'yi almak için navigator.credentials.get() kodunu kullanın. WebOTP, bu yönteme yeni bir otp seçeneği ekler. Yalnızca tek 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.

Alınan OTPCredential nesnesinin içeriği

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

Daha sonra, 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);
    });
    …

Mesaj iptal ediliyor

Kullanıcının manuel olarak bir OTP girip formu göndermesi halinde 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ünebilir ancak kullanmadan önce bilmeniz gereken birkaç şey vardır. Mesaj, navigator.credentials.get() çağrıldıktan sonra gönderilmeli ve get() adlı cihazın çağrıldığı cihaza 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, dört ila on karakterlik bir alfanümerik dizeyle başlar. Bu metinde, URL ve OTP'nin son satırından en az bir sayı ayrılır.
• API'yi çağıran web sitesinin URL'sinin alan adı bölümünün öncesinde @ olmalıdır.
• URL, bir pound işareti ("#") ve ardından OTP 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 dahil edilemiyor.
Your verification code is 123456 @example .com #123456	Alanda boşluk yok.
Your verification code is 123456 @domain-forbiden-chars-#%/:<>?@[] #123456	Alanda yasaklanmış karakterler 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

İsterseniz çatalla oluşturup kendi sürümünüzü de oluşturabilirsiniz: https://glitch.com/edit/#!/web-otp.

Kaynaklar arası iframe'den WebOTP kullanma

Kaynaklar arası iframe'e SMS OTP'si girmek, genellikle ödeme onayı için (özellikle 3D Secure'da) kullanılır. Kaynaklar arası iframe'leri desteklemek için ortak bir biçime sahip olan WebOTP API, iç içe yerleştirilmiş kaynaklara bağlı OTP'ler sunar. Ö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.

Kökler arası iframe içinden WebOTP API'yi kullanmak için iki şey 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.

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

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

WebOTP API bir iframe içinden çağrıldığında, SMS metin mesajında üst çerçeve kaynağının başında @, ardından OTP'nin önünde # ve son satırda @ bulunması gerekir.

Your verification code is 123456

@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ğiyle:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

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

Masaüstünde WebOTP'yi kullanma

Chrome'da WebOTP, kullanıcıların masaüstünde telefon numarası doğrulamasını tamamlamalarına 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ı'nda oturum açmasını gerektirir.

Tüm geliştiricilerin yapması gereken, mobil web sitelerinde olduğu gibi WebOTP API'yi masaüstü web sitelerinde uygulamaktır, ancak özel bir hileye gerek yoktur.

WebOTP API'yi kullanarak masaüstünde telefon numarasını doğrulama başlıklı makaleden daha fazla bilgi edinebilirsiniz.

SSS

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

API'yı 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 User Consent API'nin tasarımı nedeniyle tetiklenmez.
• Android cihazınızda bir iş profili kullanıyorsanız ve WebOTP çalışmıyorsa bunun yerine Chrome'u kişisel profilinize yükleyip kullanmayı deneyin (ör. SMS mesajlarını aldığınız profil).

SMS'inizin doğru şekilde 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, iOS 14 ve macOS Big Sur'da SMS kısa mesaj biçimi konusunda anlaşmaya vardı ve Apple bu biçimi desteklediğini duyurdu. Safari WebOTP JavaScript API'yi desteklemese de input öğesine autocomplete=["one-time-code"] ile ek açıklama eklediğinizde, SMS mesajı biçime uygunsa varsayılan klavye otomatik olarak OTP'yi girmenizi önerir.

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

Bir numara ilk sağlandığında SMS OTP'si telefon numarasının doğrulanması için yararlı 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ğrulama işlemi dikkatli bir şekilde kullanılmalıdır. WebOTP, kullanışlı bir yeniden kimlik doğrulama ve kurtarma mekanizmasıdır ancak hizmetler bu sistemi bilgi yarışması gibi ek faktörlerle birleştirmeli veya güçlü kimlik doğrulama için Web Authentication API'yi 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. Mümkün olduğunca fazla 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 onları desteklemenin ne kadar kritik olduğunu gösterir. #WebOTP hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.

Kaynaklar

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