SMS OTP formu en iyi uygulamaları

Eiji Kitamura

Kullanıcılardan SMS göndererek kimliklerini doğrulamak için tek kullanımlık şifre (OTP) girmelerini istemek yaygın bir uygulamadır. SMS OTP'nin kullanım alanlarından bazıları şunlardır:

  • İki faktörlü kimlik doğrulama. Kullanıcı adı ve şifreye ek olarak SMS OTP, hesabın SMS OTP'yi alan kişiye ait olduğuna dair güçlü bir sinyal 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 doğrulamak 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 birleştirilir.
  • Hesap kurtarma. Bir kullanıcı hesabına erişimi kaybettiğinde hesabı kurtarmanın bir yolu olmalıdır. Kayıtlı e-posta adresine e-posta veya telefon numarasına SMS OTP göndermek, yaygın hesap kurtarma yöntemleridir.
  • Ödeme onayı Ödeme sistemlerinde, bazı bankalar veya kredi kartı veren kuruluşlar güvenlik nedeniyle ödeme yapan kişiden ek kimlik doğrulama ister. Bu amaçla genellikle SMS OTP kullanılır.

Bu kullanım alanları için SMS OTP formları oluşturmayla ilgili en iyi uygulamaları öğrenmek için okumaya devam edin.

Yapılacaklar listesi

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

  • <input> öğesini şunlarla kullanın:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • OTP SMS mesajının son satırı olarak @BOUND_DOMAIN #OTP_CODE dizesini 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 yaramasa bile 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"

OTP'ler genellikle beş veya altı haneli sayılar olduğundan, giriş alanı için type="number" kullanmak, mobil klavyeyi yalnızca sayılar olarak değiştirdiği için sezgisel görünebilir. Tarayıcı, giriş alanının birden fazla sayıdan oluşan bir dizi 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ı artırılır veya azaltılır ve baştaki sıfırlar kaldırılabilir.

Bunun yerine type="text" politikasını kullanın. Bu işlem, mobil klavyeyi yalnızca sayılarla sınırlamaz ancak inputmode="numeric" kullanımıyla ilgili bir sonraki ipucu bu işi yapar.

inputmode="numeric"

Mobil klavyeyi yalnızca sayılar olarak 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ında type="tel" kullanır. Bu hile, geçmişte inputmode="numeric" yaygın olarak desteklenmediğinde kullanılıyordu. Firefox, inputmode="numeric" özelliğini desteklemeye başladığından semantik olarak hatalı type="tel" hilesini 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 olması gerektiğini belirtmesine olanak tanır ve tarayıcıyı alanda beklenen bilgi türü hakkında bilgilendirir.

autocomplete="one-time-code" ile bir kullanıcı form açıkken SMS mesajı aldığında işletim sistemi, SMS'teki OTP'yi sezgisel olarak ayrıştırır ve klavye, kullanıcının girmesi için OTP'yi önerir. Yalnızca iOS, iPadOS ve macOS'te Safari 12 ve sonraki sürümlerde çalışır ancak bu platformlarda SMS OTP deneyimini iyileştirmenin daha iyi bir yolu olduğu için bu yöntemi kullanmanızı önemle tavsiye ederiz.

autocomplete="one-time-code" ve maceraları.

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

İsteğe bağlı özellikler

İsteğe bağlı özellikler şunlardır:

Daha fazla öneri için oturum açma formuyla ilgili en iyi uygulamalarımızı okuyun.

SMS metnini biçimlendirme

SMS ile gönderilen kaynağa bağlı tek kullanımlık kodlar spesifikasyonuna uyarak OTP girme kullanıcı deneyimini iyileştirin.

Temel olarak biçim kuralı şu şekildedir: SMS mesajını, alıcı alan adının önüne @ ve OTP'nin önüne # ekleyerek bitirin.

Örneğin:

Your OTP is 123456

@web-otp.example.com #123456

OTP mesajlarının standart biçimi, ayıklama işlemini daha kolay ve güvenilir hale getirir. OTP kodlarını web siteleriyle ilişkilendirmek, kullanıcıların kötü amaçlı sitelere kod vermesini zorlaştırır.

Hassas biçimlendirme kuralları

Kesin kurallar şunlardır:

  • Mesaj, en az bir sayı içeren dört ila on karakterlik alfanümerik dizeye sahip, okunabilir bir metinle (isteğe bağlı) başlar. Son satır, URL ve OTP için ayrılır.
  • API'yi çağıran web sitesinin URL'sinin alan adı kısmından önce @ gelmelidir.
  • URL'de # ve ardından OTP bulunmalıdır. Karakter sayısı 140 veya daha az olmalıdır.

Bu biçimi kullanmanın birkaç avantajı vardır:

  • OTP, alan adına bağlanır. Kullanıcı, SMS mesajında belirtilen alan dışında bir alandaysa OTP önerisi gösterilmez. Bu sayede kimlik avı saldırıları ve hesabın ele geçirilmesi riski de azalır.
  • Tarayıcı artık gizemli ve güvenilmez buluşsal yöntemlere bağlı kalmadan OTP'yi güvenilir bir şekilde çıkarabilir.

Bir web sitesi autocomplete="one-time-code" kullandığında iOS 14 veya sonraki sürümlere sahip Safari, bu kurallara uygun OTP'yi önerir.

Bu SMS mesajı biçimi, Safari dışındaki tarayıcılar için de faydalıdır. Android'de Chrome, Opera ve Vivaldi de WebOTP API ile kaynağa bağlı tek seferlik kod kuralını destekler ancak autocomplete="one-time-code" aracılığıyla desteklemez.

WebOTP API'yi kullanma

WebOTP API, SMS mesajıyla alınan OTP'ye erişim sağlar. navigator.credentials.get() yöntemini otp türü (OTPCredential) ile çağırarak (transport, sms değerini içerir) web sitesi, kaynağa bağlı tek kullanımlık kodlara uygun bir SMS'in teslim edilmesini 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 edebilir.

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

WebOTP API'nin nasıl kullanılacağını WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleden ayrıntılı olarak öğrenebilir veya aşağıdaki snippet'i kopyalayıp yapıştırabilirsiniz. <form> öğenizde action ve method özelliklerini ayarladığınızdan 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);
    });
  });
}