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

SMS ile alınan OTP'ler konusunda kullanıcılara yardımcı olun

Eiji Kitamura

WebOTP API nedir?

Günümüzde, dünyadaki çoğu insanın bir mobil cihazı var ve geliştiriciler de hizmetlerinin kullanıcıları için tanımlayıcı olarak genellikle telefon numaraları kullananlar.

Telefon numaralarını doğrulamak için çeşitli yollar vardır ancak rastgele oluşturulmuş SMS ile gönderilen tek kullanımlık şifre (OTP) en yaygın kullanılan şifrelerden biridir. Bu kod gönderiliyor telefon numarasının kontrolünü gösterir.

Bu fikir, şu hedeflere ulaşmak için halihazırda birçok senaryoda kullanılıyor:

  • Kullanıcının tanımlayıcısı olarak telefon numarası. Yeni bir kullanıyorsanız bazı web siteleri e-posta adresi yerine telefon numarası ister bunu bir hesap tanımlayıcısı olarak kullanın.
  • İki adımlı doğrulama. Oturum açarken web sitesi tek seferlik kod istiyor Ekstra şifre veya başka bir bilgi faktörü üzerine SMS ile gönderilen
  • Ödeme onayı. Kullanıcı ödeme yaparken, SMS ile gönderilen tek seferlik bir kod kişinin amacını doğrulamaya yardımcı olabilir.

Mevcut süreç, kullanıcılar açısından zorluk yaratıyor. SMS içinde OTP bulma kopyalayıp forma yapıştırmak zahmetli bir iş olabilir, dönüşüm oranlarında %65'e varan artış sağlar. Bu süreci yumuşatmak uzun süredir var dünyanın en büyük geliştiricilerin birçoğundan web'e yönelik istekler. Android'de tam olarak bunu yapan bir API vardır. Elbette iOS ve Safari.

WebOTP API, uygulamanızın alanına sahip olmanız gerekir. Bundan, programlı bir şekilde SMS'ten bir OTP alabilirsiniz kullanıcı için bir telefon numarası doğrulama işlemini daha kolay bir şekilde yapabilirsiniz.

İşleyiş şeklini görün

Bir kullanıcının, telefon numarasını bir web sitesinde doğrulamak istediğini varsayalım. Web sitesi kullanıcıya SMS ile bir kısa mesaj gönderir ve kullanıcı mesajını gönderin.

WebOTP API ile bu adımlar, kullanıcının tek bir dokunuşla yapabilecekleri göreceksiniz. Kısa mesaj geldiğinde bir alt sayfa açılır ve kullanıcıdan telefon numarasını doğrulamasını ister. Doğrula'yı tıkladıktan sonra düğmesini tıkladıktan sonra, tarayıcı OTP'yi forma yapıştırır ve form, kullanıcının Devam düğmesine basmasına gerek kalmadan gönderilir.

Tüm sürecin şeması aşağıdaki resimde gösterilmektedir.

WebOTP API şeması

Demoyu kendiniz deneyin. Sizden telefonunuza SMS gönderebilir, ancak dilerseniz başka bir cihaza ekleyerek demoda gösterilen metni kopyalayabilirsiniz. İşe yarar çünkü kullandığında gönderenin kim olduğu önemli değildir.

  1. Chrome 84'te https://web-otp.glitch.me adresine gidin veya daha sonra Android cihazlarda kullanabilirsiniz.
  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 giriş alanına kodu girme istemini 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:

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

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

<input> etiketi için ek açıklama ekleme

WebOTP'nin kendisi herhangi bir HTML ek açıklaması olmadan çalışır, ancak tarayıcılar arası emin olmak için autocomplete="one-time-code" kullanmanızı kesinlikle öneririm Kullanıcının bir OTP girmesini beklediğiniz <input> etiketi.

Bu şekilde Safari 14 veya sonraki sürümler kullanıcıdan <input> otomatik doldurmasını önerebilir alanına, WebOTP'yi desteklemese de SMS mesajını biçimlendirme bölümünde açıklanan biçimde bir SMS gönderilir.

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ırmak, iş ilanlarına yazar. Bu süreçte 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'de olduğu gibidir. Dinleniyor DOMContentLoaded etkinliği, 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 basit. Tekliflerinizi otomatikleştirmek ve optimize etmek için navigator.credentials.get() OTP'yi almak için. WebOTP, bu yönteme yeni bir otp seçeneği ekler. Yalnızca bir özellik: transport. Bu özelliğin değeri, 'sms' dizesine sahip 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 sağlandığında döndürülen taahhüt bir OTPCredential nesnesiyle çözümlenir.

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önderme Böylece kullanıcının bir düğmeye dokunmasını gerektiren adım ortadan kalkar.

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ı manuel olarak bir OTP girer ve formu gönderirse options nesnesinde bir AbortController örneği kullanarak get() çağrısı.

JavaScript 'nı inceleyin.

    …
    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ünüyor olmalı ancak şunları yapmanız gerekir: bilmeniz gerekir. Mesaj şu tarihten sonra gönderilmelidir: navigator.credentials.get() çağrıldı ve cihazda alınması gerekir burada get() çağrıldı. Son olarak, mesaj aşağıdakilere uygun olmalıdır: biçimlendirme:

  • Mesaj, dört ila on arasında bir sayı içeren (isteğe bağlı) okunabilir metinle başlar en az bir rakamın son satırdan ayrıldığı alfanümerik dize için ifade eder.
  • API'yi çağıran web sitesi URL'sinin alan adı kısmından önce gelmelidir @ tarafından.
  • URL, bir pound işareti ("#") ve ardından OTP'yi içermelidir.

Örneğin:

Your OTP is: 123456.

@www.example.com #123456

Yanlış kullanım örnekleri:

Bozuk SMS Metni örneği Neden yapamıyorum?
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ı bekleniyor.
Your verification code is 123456

@example.com  #123456		 @host ile #code arasında tek bir boşluk olması bekleniyor.
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 edilemez.
Your verification code is 123456

@example.com/foobar #123456		 Yol dahil edilemez.
Your verification code is 123456

@example .com #123456		 Alanda boşluk yok.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456		 Alanda yasak karakterler yok.
@example.com #123456

Mambo Jumbo		 @host ve #code değerlerinin son satır olması bekleniyor.
@example.com #123456

App hash #oudf08lkjsdf834		 @host ve #code değerlerinin son satır olması bekleniyor.
Your verification code is 123456

@example.com 123456		 # yok.
Your verification code is 123456

example.com #123456		 @ yok.
Hi mom, did you receive my last text @ ve # eksik.

Demolar

Demo sırasında çeşitli mesajları deneyin: https://web-otp.glitch.me

İsterseniz çatallama yaparak 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 için kullanılır (özellikle 3D Secure ile). Destekleyecek ortak bir biçime sahip olma kaynaklar arası iframe'ler kullanıyorsanız WebOTP API, iç içe yerleştirilmiş kaynaklara bağlı OTP'leri yayınlar. Örneğin:

  • Bir kullanıcı, kredi kartıyla ayakkabı satın almak için shop.example adresini ziyaret eder.
  • Entegre ödeme sağlayıcı, kredi kartı numarasını girdikten sonra bir iFrame içinde bank.example tarafından gönderilen formda kullanıcıdan hızlı ödeme için telefon numarası.
  • bank.example, şunu yapabilmesi için kullanıcıya OTP içeren bir SMS gönderir: kimliğini doğrulamak için bu kodu girebilir.

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

  • SMS metninde hem üst çerçeve kaynağına hem de iframe kaynağına açıklama ekleyin mesajını alırsınız.
  • Kaynaklar arası iframe'in OTP almasına izin vermek için izin politikasını yapılandırın kullanıcıya gönderebilirsiniz.
ziyaret edin.
Etkin bir iframe içinde WebOTP API'si.

Demoyu şu adresten deneyebilirsiniz: https://web-otp-iframe-demo.stackblitz.io.

SMS kısa mesajına bağlantı kaynakları not ekle

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

Your verification code is 123456

@shop.example #123456 @bank.exmple

İzin Politikasını Yapılandırma

WebOTP'yi kaynaklar arası iframe'de kullanmak için yerleştiren, buna erişim izni vermelidir İstenmeyen erişimleri önlemek için otp kimlik bilgileri izin politikası aracılığıyla API gösterir. Genellikle 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ğiyle:

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

İzin politikası belirtme ile ilgili diğer örnekleri inceleyin.

WebOTP'yi masaüstünde kullanın

Chrome'da WebOTP, diğer cihazlardan alınan SMS'lerin Kullanıcıların masaüstü bilgisayarlarında telefon numarası doğrulamasını tamamlamalarına yardımcı olma.

Masaüstünde WebOTP API.

Bu özellik, kullanıcının her iki cihazda da aynı Google Hesabı'nda oturum açmasını gerektirir: Chrome ve Android Chrome var.

Tüm geliştiricilerin, WebOTP API'yi masaüstü web sitelerinde uygulaması yeterlidir. yöntemlerine sahip olsalar da özel numaraları kullanamazlar. gereklidir.

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

SSS

Düzgün 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 Temel SMS User Consent API'nin tasarımı nedeniyle API tetiklenmeyecektir.
  • Android cihazınızda bir iş profili kullanıyorsanız ve WebOTP iş profili kullanıyorsa işe yaramıyor, Chrome'u kişisel profilinizde 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 Apple, Safari'nin bu özelliği iOS 14'ten itibaren desteklediğini duyurdu. ve macOS Big Sur'da kullanıma sunuluyor. Safari, WebOTP JavaScript API'yi desteklemese de input öğesine varsayılan olarak autocomplete=["one-time-code"] ile ek açıklama ekleniyor SMS mesajı uygunsa klavye otomatik olarak OTP'yi girmenizi önerir biçimiyle ilgilidir.

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

SMS OTP, bir telefon numarası ilk kez olduğunda numarayı doğrulamak için yararlıdır. sağlandığı takdirde, SMS yoluyla yapılan telefon numarası doğrulama işleminin telefon numaraları operatörler tarafından ele geçirilebileceği ve geri dönüştürülebileceği için yeniden kimlik doğrulama. WebOTP kullanışlı bir yeniden kimlik doğrulama ve kurtarma mekanizmasıdır ancak bu soruları bilgi yarışması gibi başka faktörlerle birleştirin veya Web Authentication API kullanın.

Chrome uygulamasındaki hataları nereye bildirebilirim?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu?

  • Şurada hata bildiriminde bulunun: https://new.crbug.com. Ürünün yeniden oluşturulması için mümkün olduğunca çok ayrıntı, basit talimatlar ve Bileşenler'i Blink>WebOTP olarak ayarlayın.

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

WebOTP API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, öncelik vermemize yardımcı oluyor ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir. Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #WebOTP ve nerede ve nasıl kullandığınızı bize bildirin.

Kaynaklar