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 Kullanıcı adı ve şifreye ek olarak SMS tek kullanımlık şifresi, 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 ile 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 tek kullanımlık şifre formu oluşturmayla 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 kullanma

<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 değiştirir. 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 işlem, mobil klavyeyi yalnızca sayılara dönüştürmez. Ancak inputmode="numeric" ile ilgili bir sonraki ipucumuz bu işi yapar.

inputmode="numeric"

Mobil klavyeyi yalnızca sayılar olacak şekilde değiştirmek için inputmode="numeric" simgesini 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 hile, inputmode="numeric" yaygın olarak desteklenmediği zamanlarda kullanılıyordu. 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ıya alanda beklenen bilgi türü hakkında bilgi verir.

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 kaynakla bağlı tek kullanımlık kodlar spesifikasyonuna uygun olarak OTP girmeyle ilgili kullanıcı deneyimini iyileştirin.

Biçim kuralı basittir: SMS mesajını, @ ile başlayan alıcı alan adıyla ve # ile başlayan OTP ile bitirin.

Ö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çimin kullanılmasının bazı avantajları vardır:

  • 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 faydalı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 kodlar 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 aktarıldıktan sonra web sitesi bunu bir formda kullanabilir veya doğrudan sunucuya POST 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, Unsplash.