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

Kullanıcılara SMS ile alınan tek kullanımlık şifreler konusunda yardımcı olma

Eiji Kitamura

WebOTP API nedir?

Günümüzde dünya üzerindeki çoğu kişinin mobil cihazı var ve geliştiriciler, hizmetlerinin kullanıcılarını tanımlamak için genellikle telefon numaralarını kullanıyor.

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

Bu fikir, aşağıdakileri sağlamak için birçok senaryoda zaten kullanımdadır:

• Kullanıcı için tanımlayıcı olarak telefon numarası. Bazı web siteleri, yeni bir hizmete kaydolurken e-posta adresi yerine telefon numarası ister ve bunu hesap tanımlayıcısı olarak kullanır.
• İki adımlı doğrulama Bir web sitesi, oturum açarken ekstra güvenlik için şifrenin veya diğer bilgi faktörünün yanı sıra SMS ile gönderilen tek kullanımlık bir kod ister.
• Ödeme onayı. Kullanıcı ödeme yaparken SMS ile gönderilen tek kullanımlık bir kod isteğinde bulunmak, 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 tek kullanımlık şifre bulmak, ardından bu şifreyi kopyalayıp forma yapıştırmak zahmetli bir işlemdir ve kritik kullanıcı yolculuklarında dönüşüm oranlarını düşürür. Bu işlemi kolaylaştırmak, dünyanın en büyük geliştiricilerinden birçoğunun web için uzun zamandır istediği bir şeydi. Android'de tam olarak bunu yapan bir API vardır. iOS ve Safari de bu konudaki politikalara uymaktadır.

WebOTP API, uygulamanızın alanına bağlı olarak özel olarak biçimlendirilmiş mesajlar almasını sağlar. Bu sayede, SMS mesajından programatik olarak OTP alabilir ve kullanıcının telefon numarasını daha kolay doğrulayabilirsiniz.

İşleyiş şeklini görün

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

WebOTP API ile bu adımlar, videoda gösterildiği gibi kullanıcı için tek bir dokunuş kadar kolaydır. SMS geldiğinde alt tarafta bir sayfa açılır ve kullanıcıdan telefon numarasını doğrulaması istenir. Alttaki sayfada Doğrula düğmesi tıklandıktan sonra tarayıcı, OTP'yi forma yapıştırır ve kullanıcının Devam'a basması gerekmeden form gönderilir.

Sürecin tamamı aşağıdaki resimde şematik olarak gösterilmiştir.

Demoyu kendiniz deneyin. Telefon numaranızı sormaz veya cihazınıza SMS göndermez. Ancak demoda gösterilen metni kopyalayarak başka bir cihazdan SMS gönderebilirsiniz. Bu, WebOTP API'si kullanılırken gönderenin kim olduğu fark etmediği için işe yarar.

1. Android cihazda Chrome 84 veya sonraki bir sürümde https://web-otp.glitch.me adresine gidin.
2. Başka bir telefondan telefonunuza 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 giriş alanına kodu girme istemini gördünüz mü? WebOTP API'nin kullanıcılar için işleyiş şekli budur.

WebOTP API'yi kullanma üç bölümden oluşur:

• Doğru şekilde ek açıklama eklenmiş bir <input> etiketi
• Web uygulamanızda JavaScript
• SMS ile gönderilen biçimlendirilmiş mesaj metni.

Önce <input> etiketini ele alacağım.

<input> etiketine not ekleme

WebOTP 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, Safari 14 veya sonraki sürümlerin, WebOTP'yi desteklememesine rağmen SMS mesajını biçimlendirme bölümünde açıklanan biçime sahip bir SMS aldığında kullanıcıya <input> alanını bir OTP ile otomatik 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 yeterlidir. Her ne olursa olsun, size süreç boyunca yol göstereceğim.

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 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şleme

WebOTP API'nin kendisi oldukça basittir. OTP'yi almak için navigator.credentials.get() simgesini 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, bir SMS mesajı geldiğinde tarayıcının izin akışını tetikler. İzin verilirse döndürülen söz, bir OTPCredential nesnesi ile çözülür.

Alınan OTPCredential nesnesinin içeriği

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

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

JavaScript

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

İletiyi iptal etme

Kullanıcı manuel olarak bir tek kullanımlık şifre girip formu gönderirse options nesnesinde bir 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ünse de kullanmadan önce bilmeniz gereken birkaç nokta vardır. Mesaj, navigator.credentials.get() çağrıldıktan sonra gönderilmeli ve get() çağrıldığı cihazda alınmalıdır. Son olarak, mesaj aşağıdaki biçime uygun olmalıdır:

• Mesaj, en az bir sayı içeren dört ila on karakterlik bir alfanümerik dize içeren (isteğe bağlı) kullanıcı tarafından okunabilir bir metinle başlar. Son satır URL ve OTP için ayrılır.
• API'yi çağıran web sitesinin URL'sinin alan adının önünde @ olmalıdır.
• URL, pound işareti ("#") ve ardından OTP içermelidir.

Örneğin:

Your OTP is: 123456.

@www.example.com #123456

Aşağıda kötü örnekler verilmiştir:

Demolar

Demoda çeşitli mesajları deneyin: https://web-otp.glitch.me

Ayrıca, bu projeyi çatallayarak kendi sürümünüzü de oluşturabilirsiniz: https://glitch.com/edit/#!/web-otp.

Kaynaklar arası iframe'den WebOTP kullanma

Kaynaklar arası bir iFrame'e SMS OTP girmek, genellikle ödeme onayı için kullanılır (özellikle 3D Secure ile). WebOTP API, çapraz kaynak iFrame'leri desteklemek için ortak bir biçime sahip olduğundan 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'yi ziyaret eder.
• Entegre ödeme sağlayıcı, kredi kartı numarasını girdikten sonra bir iframe içinde bank.example'ten bir form gösterir. Bu formda kullanıcıdan hızlı ödeme için telefon numarasını doğrulaması istenir.
• 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 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.

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

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

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

Your verification code is 123456

@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 üst bilgisi 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

WebOTP'yi masaüstünde kullanma

Chrome'da WebOTP, kullanıcıların masaüstünde telefon numarası doğrulamasını tamamlamasına yardımcı olmak için diğer cihazlarda alınan SMS'leri dinlemeyi destekler.

Bu özellik için kullanıcının hem masaüstü Chrome'da hem de Android Chrome'da aynı Google Hesabı ile oturum açması gerekir.

Tüm geliştiricilerin yapması gereken, mobil web sitelerinde yaptıkları gibi WebOTP API'yi masaüstü web sitelerine uygulamaktır. Bunun için özel bir işlem yapılması gerekmez.

Daha fazla bilgi için WebOTP API'yi kullanarak masaüstünde telefon numarası doğrulama başlıklı makaleyi inceleyin.

SSS

Doğru biçimlendirilmiş bir mesaj gönderiyorum ancak 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 listesine dahil edilmişse temel SMS Kullanıcı Rızası API'sinin tasarımı nedeniyle bu API tetiklenmez.
• Android cihazınızda iş profili kullanıyorsanız ve WebOTP çalışmıyorsa Chrome'u kişisel profilinize (ör. SMS mesajları aldığınız profil) yükleyip kullanmayı deneyin.

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

Is this API compatible between different browsers?

Chromium ve WebKit, SMS kısa mesaj biçimi konusunda anlaştı ve Apple, 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"] notu eklendiğinde varsayılan klavye, SMS mesajı biçime uygunsa OTP'yi girmenizi otomatik olarak önerir.

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

SMS tek kullanımlık şifresi, telefon numarası ilk kez sağlandığında telefon numarasını doğrulamak için kullanışlı olsa da telefon numaraları operatörler tarafından ele geçirilip yeniden kullanılabileceğinden, SMS üzerinden telefon numarası doğrulaması yeniden kimlik doğrulama için dikkatli bir şekilde kullanılmalıdır. WebOTP, kullanışlı bir yeniden kimlik doğrulama ve kurtarma mekanizmasıdır ancak hizmetlerin bunu bilgi yarışması gibi ek faktörlerle birleştirmesi veya güçlü kimlik doğrulama için Web Authentication API'yi kullanması gerekir.

Chrome'un uygulanmasındaki hataları nereye bildirebilirim?

Chrome'un uygulamasında bir hata mı buldunuz?

• crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ve yeniden oluşturmayla ilgili basit talimatlar ekleyin ve Bileşenler'i Blink>WebOTP olarak ayarlayın.

Bu özellik için nasıl yardımcı olabilirim?

WebOTP API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, özelliklere öncelik vermemize yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir. #WebOTP hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve bu özelliği 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
• WebOTP API ile kaynakta farklı iFrame'lerdeki OTP formlarını doldurma
• Yahoo! JAPAN'ın şifresiz kimlik doğrulaması, sorguları %25 azalttı ve oturum açma süresini 2,6 kat hızlandırdı