SMS OTP formu en iyi uygulamaları

SMS tek kullanımlık şifre formunuzu nasıl optimize edeceğinizi ve kullanıcı deneyimini nasıl iyileştireceğinizi öğrenin.

Eiji Kitamura

Kullanıcının telefon numarasını doğrulamanın yaygın bir yolu, SMS ile gönderilen OTP'yi (tek kullanımlık şifre) sağlamasını istemektir. SMS tek kullanımlık şifrenin birkaç kullanım alanı vardır:

  • İki faktörlü kimlik doğrulama SMS tek kullanımlık şifresi, kullanıcı adı ve şifreye ek olarak, hesabın SMS tek kullanımlık şifresini alan kişiye ait olduğunun güçlü bir sinyali olarak kullanılabilir.
  • Telefon numarası doğrulaması Bazı hizmetler, kullanıcının birincil tanımlayıcısı olarak telefon numarasını kullanır. Bu tür hizmetlerde kullanıcılar, kimliklerini kanıtlamak için telefon numaralarını ve SMS yoluyla aldıkları OTP'yi girebilir. Bazen iki faktörlü kimlik doğrulama oluşturmak için PIN ile birlikte kullanılır.
  • Hesap kurtarma Kullanıcılar hesaplarına erişimi kaybettiğinde hesaplarını kurtarabilecekleri bir yöntem olmalıdır. Kayıtlı e-posta adresine e-posta gönderme veya telefon numarasına SMS OTP gönderme, yaygın hesap kurtarma yöntemleridir.
  • Ödeme onayı Ödeme sistemlerinde bazı bankalar veya kredi kartı veren kuruluşlar, güvenlik nedeniyle ödeme yapan kullanıcıdan ek kimlik doğrulaması ister. SMS tek kullanımlık şifresi bu amaç için yaygın olarak kullanılır.

Bu yayında, yukarıdaki kullanım alanları için SMS OTP formu oluşturma ile ilgili en iyi uygulamalar açıklanmaktadır.

Yapılacaklar listesi

SMS tek kullanımlık şifresi ile en iyi kullanıcı deneyimini sunmak için aşağıdaki adımları uygulayın:

  • <input> öğesini şu öğelerle kullanın:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • OTP SMS mesajının son satırı olarak @BOUND_DOMAIN #OTP_CODE kullanın.
  • WebOTP API'yi kullanın.

<input> öğesini kullanın

<input> öğesi içeren bir form kullanmak, tüm tarayıcılarda çalıştığı için uygulayabileceğiniz en önemli en iyi uygulamadır. Bu yayındaki diğer öneriler bazı tarayıcılarda işe yaramazsa kullanıcı, OTP'yi manuel olarak girip gönderebilir.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

Aşağıda, bir giriş alanının tarayıcı işlevlerinden en iyi şekilde yararlanmasını sağlayacak birkaç fikir verilmiştir.

type="text"

Tek kullanımlık şifreler genellikle beş veya altı haneli olduğundan, giriş alanı için type="number" kullanmak mantıklı görünebilir. Bu, mobil klavyeyi yalnızca sayılara geçirir. Tarayıcı, giriş alanının birden fazla sayıdan oluşan bir sıra yerine sayılabilir bir sayı olmasını beklediğinden bu yöntem önerilmez. Bu durum beklenmedik davranışlara neden olabilir. type="number" kullanıldığında giriş alanının yanında yukarı ve aşağı düğmeleri gösterilir. Bu düğmelere basıldığında sayı artar veya azalır ve önündeki sıfırlar kaldırılabilir.

Bunun yerine type="text" politikasını kullanın. Bu, mobil klavyeyi yalnızca sayılara dönüştürmez, ancak inputmode="numeric" kullanımıyla ilgili bir sonraki ipucu bu işi yapacağından sorun yoktur.

inputmode="numeric"

Mobil klavyeyi yalnızca rakamlarla değiştirmek için inputmode="numeric" tuşunu kullanın.

Bazı web siteleri, odaklanıldığında mobil klavyeyi yalnızca sayılara (* ve # dahil) dönüştürdüğü için OTP giriş alanları için type="tel" kullanır. Bu saldırı, geçmişte inputmode="numeric" yaygın olarak desteklenmediği bir dönemde kullanılmıştı. Firefox inputmode="numeric" desteğini kullanıma sunduğundan, semantik olarak yanlış type="tel" hilelerini kullanmaya gerek yoktur.

autocomplete="one-time-code"

autocomplete özelliği, geliştiricilerin tarayıcının otomatik tamamlama yardımı sağlamak için hangi izne sahip olduğunu belirtmesine olanak tanır ve tarayıcıyı alanda beklenen bilgi türü hakkında bilgilendirir.

autocomplete="one-time-code" ile kullanıcı bir form açıkken SMS mesajı aldığında işletim sistemi, SMS'deki OTP'yi heuristik olarak ayrıştırır ve klavye, kullanıcının girmesi için OTP'yi önerir. Bu özellik yalnızca Safari 12 ve sonraki sürümlerde iOS, iPadOS ve macOS'te çalışır ancak bu platformlardaki SMS tek kullanımlık şifre deneyimini iyileştirmenin kolay bir yolu olduğu için kullanmanızı önemle tavsiye ederiz.

`autocomplete="one-time-code"` özelliğinin kullanıldığı bir örnek.

autocomplete="one-time-code", kullanıcı deneyimini iyileştirir ancak SMS mesajının kaynakla bağlı mesaj biçimine uymasını sağlayarak daha fazlasını yapabilirsiniz.

SMS metnini biçimlendirme

SMS aracılığıyla gönderilen kaynağa bağlı tek seferlik kodlar spesifikasyonuyla uyumlu hale getirerek OTP girme konusunda kullanıcı deneyimini iyileştirin.

Biçim kuralı basittir: SMS mesajını alıcı alan adıyla @ ve OTP'den önce # ile tamamlayın.

Örneğin:

Your OTP is 123456

@web-otp.glitch.me #123456

OTP iletileri için standart bir biçim kullanmak, bu iletilerdeki kodların çıkarılmasını kolaylaştırır ve daha güvenilir hale getirir. OTP kodlarını web siteleriyle ilişkilendirmek, kullanıcıları kandırarak kötü amaçlı sitelere kod sağlamalarını zorlaştırır.

Bu biçimi kullanmak çeşitli avantajlar sağlar:

  • OTP, alana bağlanır. Kullanıcı, SMS mesajında belirtilen alan dışındaysa OTP önerisi gösterilmez. Bu, kimlik avı saldırıları ve olası hesap ele geçirme riskini de azaltır.
  • Tarayıcı artık gizemli ve kararsız sezgisel kurallara bağlı kalmadan OTP'yi güvenilir bir şekilde ayıklayabilecek.

Bir web sitesi autocomplete="one-time-code" kullandığında iOS 14 veya sonraki sürümlerin yüklü olduğu Safari, yukarıdaki kurallara uygun olarak OTP'yi önerir.

Bu SMS mesajı biçimi, Safari dışındaki tarayıcılar için de avantajlıdır. Android'deki Chrome, Opera ve Vivaldi, autocomplete="one-time-code" üzerinden olmasa da WebOTP API ile kaynakla bağlı tek kullanımlık kod kuralını da destekler.

WebOTP API'yi kullanma

WebOTP API, SMS mesajında alınan OTP'ye erişim sağlar. transport'nin sms içerdiği durumlarda otp türü (OTPCredential) ile navigator.credentials.get() çağrısı yapan web sitesi, kaynakla bağlı tek kullanımlık kodlara uygun bir SMS'nin gönderilmesini ve kullanıcı tarafından erişim izni verilmesini bekler. OTP, JavaScript'e iletildikten sonra, web sitesi bunu bir formda kullanabilir veya doğrudan sunucuya POST olarak gönderebilir.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API'nin işleyiş şekli.

WebOTP API'yi nasıl kullanacağınızı ayrıntılı olarak öğrenmek için WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleyi inceleyin veya aşağıdaki snippet'i kopyalayıp yapıştırın. (<form> öğesinin action ve method özelliklerinin doğru şekilde ayarlandığından emin olun.)

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Fotoğraf: Jason Leung'un Unsplash'teki hali.