Kullanıcıdan, SMS göndererek kimliğini doğrulamak için tek kullanımlık şifre (OTP) sağlaması istenmesi yaygın bir uygulamadır. SMS OTP'nin bazı kullanım alanları şunlardır:
- İki faktörlü kimlik doğrulama. Kullanıcı adı ve şifrenin yanı sıra 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 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 kaybettiklerinde hesaplarını kurtarabilmelidir. 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 kişiden ek kimlik doğrulama isteyebilir. 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 aşağıdakilerle 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ı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 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"
kullanmak sezgisel bir seçenek gibi görünebilir. Çünkü bu seçenek, mobil klavyeyi yalnızca sayılarla sınırlı hale getirir. Tarayıcı, giriş alanının birden fazla sayının sırası yerine sayılabilir bir sayı olmasını beklediğinden bu durum önerilmez. Aksi takdirde beklenmedik davranışlar ortaya çıkabilir. 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ı girebileceğiniz bir klavyeye dönüştürmez ancak inputmode="numeric"
kullanmayla ilgili bir sonraki ipucu bu işi yapacağı için sorun yoktur.
inputmode="numeric"
Mobil klavyeyi yalnızca sayı kullanacak ş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ında type="tel"
kullanır. Bu geçici çözüm, inputmode="numeric"
yaygın olarak desteklenmediği zamanlarda kullanılıyordu. Firefox, inputmode="numeric"
desteklemeye başladığından
inputmode="numeric"
,
semantik olarak hatalı type="tel"
hack'ini 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"
özelliği sayesinde, bir form açıkken 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. Bu özellik 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 özelliği kullanmanızı önemle tavsiye ederiz.
autocomplete="one-time-code"
işleminde.
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:
pattern
girilen OTP'nin eşleşmesi gereken biçimi belirtir. Eşleşen kalıbı belirtmek için normal ifadeler kullanın. Örneğin,\d{6}
, OTP'yi altı haneli bir dizeyle sınırlar.pattern
hakkında daha fazla bilgi için Daha karmaşık gerçek zamanlı doğrulama için JavaScript kullanma başlıklı makaleyi inceleyin.required
kullanıcının alanı doldurması gerektiğini gösterir.
Daha fazla tavsiye için kaydolma formuyla ilgili en iyi uygulamalar makalemizi okuyun.
SMS metnini biçimlendirme
SMS ile gönderilen, kaynakla sınırlı tek kullanımlık kodlar spesifikasyonuyla uyumlu hale gelerek tek kullanımlık şifre girme kullanıcı deneyimini iyileştirin.
Biçim kuralı temel olarak şu şekildedir: SMS mesajını, @
ile başlayan alıcı alanıyla ve #
ile başlayan OTP ile bitirin.
Örneğin:
Your OTP is 123456
@web-otp.glitch.me #123456
OTP mesajları için standart biçim, ayıklamayı daha kolay ve güvenilir hale getirir. OTP kodlarını web siteleriyle ilişkilendirmek, kullanıcıları kötü amaçlı sitelere kod vermeye ikna etmeyi zorlaştırır.
Kesin biçimlendirme kuralları
Kurallar şunlardır:
- Mesaj, URL ve OTP için son satırı bırakarak en az bir sayı içeren dört ila on karakterlik alfanümerik bir dize içeren (isteğe bağlı) insan tarafından okunabilir metinle başlar.
- API'yi çağıran web sitesinin URL'sinin alan adı bölümünden önce
@
gelmelidir. - URL,
#
karakterini ve ardından OTP'yi içermelidir. 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örünmez. Bu sayede, kimlik avı saldırıları ve olası hesap ele geçirme riskleri de azaltılır.
- Tarayıcı artık gizemli ve güvenilmez sezgisel 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ümlerin yüklü olduğu Safari, aşağıdaki kurallara göre tek kullanımlık şifre önerir.
Bu SMS mesajı biçimi, Safari dışındaki tarayıcılara da fayda sağlar. Android'deki Chrome, Opera ve Vivaldi de WebOTP API ile kaynak sınırlı tek kullanımlık kod kuralını destekler ancak bu destek autocomplete="one-time-code"
üzerinden sağlanmaz.
WebOTP API'yi kullanma
WebOTP API, SMS mesajında alınan OTP'ye erişim sağlar.
navigator.credentials.get()
otp
türüyle (OTPCredential
) arama yapıldığında (transport
, sms
'yı içerir) web sitesi, kaynağa bağlı tek seferlik 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'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>
öğ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);
});
});
}