İşte WebOTP API'nin nasıl kullanılacağına dair basit bir örnek:
Kullanıcı İzni: Kullanıcı, SMS doğrulama kodunu almak için telefon numarasını girmesi gerektiğinde, tarayıcıdan izin istenecektir. Bu izin, tarayıcıya kullanıcının SMS mesajlarını okuma yetkisi verir.
WebOTP API Kullanımı: JavaScript ile WebOTP API kullanılarak SMS doğrulama kodu otomatik olarak alınabilir. İşte basit bir örnek:
Bu kod parçası şunları yapar:
navigator.credentials.get()yöntemi, WebOTP API'yi çağırarak kullanıcının SMS doğrulama kodunu alır.otp: { transport: ['sms'] }parametresi, sadece SMS ulaşımını destekleyen doğrulama kodlarını almayı belirtir.codedeğişkeni, alınan SMS doğrulama kodunu içerir.- Sonrasında alınan kodu
console.log()ile konsola yazdırabilir veya bir HTML formundavalueözelliği ile otomatik olarak doldurabilirsiniz.
javascript
Kodu kopyala
async function getSmsCode() {
try {
const { code } = await navigator.credentials.get({
otp: { transport: ['sms'] }
});
// Alınan kodu işle
console.log("SMS Kodu:", code);
// Kodu otomatik olarak bir form alanına doldurabilirsiniz
document.getElementById('smsCodeInput').value = code;
} catch (err) {
console.error("SMS Kodu alınamadı:", err);
}
}
Dikkat Edilmesi Gerekenler:
- WebOTP API, HTTPS üzerinden çalışır ve kullanıcı izni gerektirir.
- Şu anda sadece belirli tarayıcılarda (Chrome, Edge gibi) desteklenmektedir.
- Kullanıcı izni olmadan API çalışmayacaktır ve bu kullanıcı deneyimi açısından önemlidir.
Bu örnek, WebOTP API'nin temel kullanımını göstermektedir. Kullanımı tarayıcıların ve API'nin güncel destek durumuna göre değişebilir, bu yüzden kullanmadan önce güncel belgelere ve tarayıcı uyumluluğuna dikkat etmek önemlidir.
