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

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

• İki faktörlü kimlik doğrulama. Kullanıcı adı ve şifreye ek olarak SMS OTP'si de Hesap sahibinin, hesabın sahibi olduğunu belirten güçlü bir sinyal olarak kullanılması SMS OTP.
• Telefon numarası doğrulaması. Bazı hizmetler, kullanıcının telefon numarası olarak birincil tanımlayıcınız olmalıdır. Bu tür hizmetlerde kullanıcılar telefon numaralarını ve Kimliğinin kanıtlanması için SMS ile alınan OTP. Bazen bir PIN ile birleştirilir. iki faktörlü kimlik doğrulamayı kabul eder.
• Hesap kurtarma. Kullanıcı, hesabına erişimini kaybettiğinde yöntemidir. Kayıtlı e-posta adresine e-posta göndererek telefon numarasına SMS OTP'si göndermek yaygın hesap kurtarma yöntemleridir.
• Ödeme onayı Ödeme sistemlerinde, bazı bankalar veya kredi kartları Kart veren kuruluşlar, güvenlik nedeniyle ödeme yapan taraftan ek kimlik doğrulama ister. SMS OTP, genellikle bu amaç için kullanılır.

Bu yayında, yukarıdaki kullanım için SMS OTP formu oluşturmaya yönelik en iyi uygulamalar açıklanmaktadır durumlarda işe yarar.

Yapılacaklar listesi

SMS OTP ile en iyi kullanıcı deneyimini sağlamak için aşağıdaki adımları izleyin:

• <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 kullan.
• WebOTP API'yi kullanın.

<input> öğesini kullanın

<input> öğesi içeren bir form kullanmak, kullanacağınız en iyi uygulamadır tüm tarayıcılarda çalıştığından izlenebilir. Hatta başka önerilerden bu yayın bazı tarayıcılarda çalışmaz, kullanıcı yine de OTP'yi girip gönderebilir manuel olarak ekleyin.

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

Aşağıda, giriş alanından en iyi şekilde yararlanmanızı sağlayacak birkaç fikir verilmiştir. tarayıcı işlevselliği.

type="text"

OTP'ler genellikle beş veya altı basamaklı sayılar olduğundan, Giriş alanı için type="number", mobil cihazı değiştirdiğinden sezgisel görünebilir rakamları kullanın. Tarayıcı, tarama işlemi sırasında bir hata giriş alanının, birden çok sayıdan oluşan bir dizi yerine sayılabilir bir sayı olması gerekir. Bu da beklenmeyen davranışlara neden olabilir. type="number" kullanımı yukarı ve aşağı doğru neden olur giriş alanının yanında görüntülenecek düğmeler; bu düğmelere basıldığında sayıyı artırır veya azaltır. Sıfırdan önceki sıfırları da kaldırabilir.

Bunun yerine type="text" politikasını kullanın. Bu işlem, mobil klavyeyi sayılara dönüştürmez ancak bu sorun değil çünkü inputmode="numeric" kullanımıyla ilgili bir sonraki ipucunda o işte olur.

inputmode="numeric"

inputmode="numeric" kullanın tuşuna basarak mobil klavyeyi yalnızca rakamlarla değiştirin.

Bazı web siteleri OTP giriş alanları için type="tel" kullanıyor yalnızca rakamlara (* ve # dahil) döner. emin olabilirsiniz. Bu saldırı geçmişte inputmode="numeric" tarafından kullanıldı. yaygın olarak desteklenmemektedir. Firefox, 2017'den bu yana Firefox inputmode="numeric", anlam açısından yanlış type="tel" saldırısını kullanmanıza gerek yoktur.

autocomplete="one-time-code"

autocomplete özelliği ile birlikte geliştiriciler, tarayıcının hangi iznin tarayıcı tarafından otomatik tamamlama yardımı sağlaması gerekir ve tarayıcıyı beklenen bilgi türünü ifade eder.

Kullanıcı bir SMS mesajı aldığında autocomplete="one-time-code" ile formu açıksa, 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 çalışır iOS, iPadOS ve macOS'te kullanıma sunulacak, ancak yine de bu platformlarda SMS OTP deneyimini iyileştirmenin kolay bir yolunu sunuyor.

autocomplete="one-time-code", kullanıcı deneyimini iyileştirir ancak daha fazlasını yapabilirsiniz. SMS mesajının, SMS mesajının kaynağa bağlı mesaja uygun olduğundan biçiminde ayarlayın.

SMS metnini biçimlendirme

SMS ile gönderilen kaynağa bağlı tek seferlik kodlar bakın.

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

Örneğin:

Your OTP is 123456

@web-otp.glitch.me #123456

OTP mesajları için standart bir biçim kullanmak daha kolay ve güvenilir olmasını sağlayabilirsiniz. OTP kodlarını şununla ilişkilendirme: web siteleri, kullanıcıları kötü amaçlı sitelere kod vermeleri için kandırmayı zorlaştırır.

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

• OTP, alana bağlanacak. Kullanıcı, SMS mesajında belirtilen kullanıcı adıyla OTP önerisi görünmez. Bu ayrıca, kimlik avı saldırısı ve olası hesap ele geçirme riskini de azaltır.
• Tarayıcı, artık bağımlı olmadan OTP'yi güvenli bir şekilde çıkarabilecek olduğunu anlamak isteyebilirsiniz.

Web sitesi autocomplete="one-time-code" kullandığında, Safari'de iOS 14 veya sonraki bir sürüm , yukarıdaki kuralları uygulayarak OTP'yi önerir.

Bu SMS mesajı biçimi, Safari dışındaki tarayıcılar için de avantajlıdır. Chrome, Opera, ve Vivaldi, Android'de kaynağa bağlı tek seferlik kodlar kuralını desteklemektedir. WebOTP API'yi kullanarak (autocomplete="one-time-code" üzerinden değil).

WebOTP API'yi kullanma

WebOTP API, OTP'ye erişim sağlar. SMS'le gönderildi. Şu numarayı arayarak navigator.credentials.get() otp türünde (OTPCredential) transport burada sms, web sitesi kaynağa bağlı tek seferlik kodlara uygun bir SMS gönderilmesini bekler. kullanıcı tarafından teslim edilmiş ve erişim izni verilmemiştir. 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);

Web'de telefon numaralarını doğrulama konusunda ayrıntılı bilgi için WebOTP API'yi nasıl kullanacağınızı öğrenin bunu WebOTP API ile yapın veya aşağıdaki snippet'i kopyalayıp yapıştırın. ( <form> öğesinin doğru şekilde ayarlanmış action ve method özelliklerine sahip olduğundan 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 üzerinde Lansmanı kaldırın.