SMS OTP formu en iyi uygulamaları

SMS OTP formunuzu nasıl optimize edeceğinizi ve kullanıcı deneyimini nasıl iyileştireceğinizi öğrenin.

Eiji Kitamura

Bir kullanıcıdan SMS ile gönderilen OTP'yi (tek kullanımlık şifre) sağlamasını istemek, kullanıcının telefon numarasını onaylamanın yaygın bir yoludur. SMS OTP'si için birkaç kullanım alanı vardır:

• İki faktörlü kimlik doğrulama. Kullanıcı adı ve şifrenin yanı sıra SMS OTP, hesabın SMS OTP'sini 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ı kullanır. Bu tür hizmetlerde kullanıcılar, kimliklerini kanıtlamak için telefon numaralarını ve SMS ile aldıkları OP'yi girebilir. Bazen iki faktörlü kimlik doğrulama oluşturmak için PIN ile birleştirilir.
• Hesap kurtarma. Kullanıcı, hesabına erişimi kaybettiğinde hesabı kurtarmanın bir yolu olmalıdır. Kayıtlı e-posta adreslerine e-posta göndermek veya telefon numaralarına SMS OTP'si göndermek yaygın olarak kullanılan 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ğrulaması ister. SMS OTP'si yaygın olarak bu amaç için kullanılır.

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

Yapılacaklar listesi

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

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

<input> öğesini kullanın

<input> öğesi içeren bir form kullanmak, tüm tarayıcılarda çalıştığından izleyebileceğ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 girebilir ve 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şlevselliğinden en iyi şekilde yararlanmasını sağlamaya yönelik birkaç fikir verilmiştir.

type="text"

OTP'ler genellikle beş veya altı basamaklı sayılar olduğundan, giriş alanı için type="number" kullanımı mobil klavyeyi yalnızca rakamlarla değiştirdiği için sezgisel görünebilir. Tarayıcı, bir giriş alanının birden çok sayı dizisi yerine sayılabilir bir sayı olmasını beklediği için bu önerilmez. Bu durum, beklenmedik davranışa neden olabilir. type="number" kullanımı, giriş alanının yanında yukarı ve aşağı düğmelerinin gösterilmesine neden olur. Bu düğmelere basılması, önceki sıfırları kaldırır veya azaltır.

Bunun yerine type="text" politikasını kullanın. Bu işlem mobil klavyeyi yalnızca sayılara dönüştürmez. Ancak, inputmode="numeric" kullanımıyla ilgili bir sonraki ipucu bu işi yaptığı için sorun değil.

inputmode="numeric"

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

Bazı web sitelerinde OTP giriş alanları için type="tel" kullanılır, çünkü bu işlev odaklanıldığında mobil klavyeyi yalnızca sayılara (* ve # dahil) çevirir. Bu saldırı, inputmode="numeric" yaygın şekilde desteklenmediğinde geçmişte kullanılıyordu. Firefox inputmode="numeric"'u desteklemeye başladığından anlamsal olarak yanlış type="tel" saldırısını kullanmaya gerek yoktur.

autocomplete="one-time-code"

autocomplete özelliği, 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" sayesinde, form açıkken bir kullanıcı 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 Safari 12 ve sonraki sürümlerde iOS, iPadOS ve macOS'te çalışır ancak bu platformlardaki SMS OTP deneyimini iyileştirmenin kolay bir yolu olduğu için kesinlikle kullanmanızı öneririz.

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

SMS metnini biçimlendirme

SMS ile gönderilen kaynağa bağlı tek kullanımlık kodlarla uyumlu hale getirerek OTP girmeyle ilgili kullanıcı deneyimini geliştirin.

Biçim kuralı basittir: SMS mesajını, öncesinde @, OTP'nin önünde ise # olacak şekilde tamamlayın.

Örneğin:

Your OTP is 123456

@web-otp.glitch.me #123456

OTP mesajları için standart bir biçim kullanmak, bu mesajlardan kodların alınmasını daha kolay ve güvenilir hale getirir. OTP kodlarının web siteleriyle ilişkilendirilmesi, kötü amaçlı sitelere kod sağlamaları için kullanıcıları kandırmayı zorlaştırır.

Bu biçimin kullanılması bazı avantajlar sağlar:

• OTP, alana bağlanır. Kullanıcı, SMS mesajında belirtilenden farklı bir alanda bulunuyorsa OTP önerisi görünmez. Bu yöntem, kimlik avı saldırısı ve olası hesap ele geçirme risklerini de azaltır.
• Tarayıcı artık gizemli ve güvenilir olmayan yöntemlere bağlanmadan OTP'yi güvenli bir şekilde çıkarabilecektir.

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 yararlıdır. Android'de Chrome, Opera ve Vivaldi, WebOTP API ile kaynağa bağlı tek seferlik kodlar kuralını destekler, ancak autocomplete="one-time-code" aracılığıyla desteklenmez.

WebOTP API'yi kullanma

WebOTP API, SMS mesajında alınan OTP'ye erişim sağlar. transport sms içerirken otp türüyle (OTPCredential) navigator.credentials.get() çağrıldığında web sitesi, kaynağa bağlı tek seferlik kodlara uyan bir SMS'in gönderilmesini ve kullanıcı tarafından erişim verilmesini bekler. OTP JavaScript'e geçirildiğinde, 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'yi nasıl kullanacağınızı WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleden ayrıntılı olarak öğrenin veya aşağıdaki snippet'i kopyalayıp yapıştırın. (<form> öğesinin action ve method özelliklerinin doğru 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 tarafından Unsplash'ta.