SMS OTP formunuzu nasıl optimize edeceğinizi ve kullanıcı deneyimini nasıl iyileştireceğinizi öğrenin.
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_CODEkullan. - 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.