Merhabalar,

 

Web sitelerimizde bir ödeme onayı, sisteme giriş onayı veya onay gerektirecek herhangi bir işlem için tek kullanımlık şifre (OTP) yani bir sms kodu ile doğrulama yöntemini kullanabiliriz. Fakat web sitesine mobil cihazdan girip böyle bir onay işlemini yapmamız biraz zahmetli olabiliyor çünkü onay ekranı geldiğinde tarayıcıdan çıkıp telefona gelen mesajı açmamız gerekiyor sonrasında sms kodunu kopyalayıp tekrar tarayıcıya dönüp ilgili alana bu kodu yapıştırmamız gerekiyor, veya kopyalamayıp akılda tutup en az 1 kez tarayıcı ve mesajlar uygulaması arasında geçiş yapmamız gerekiyor. Bu zahmetten kurtulmak için gelen sms kodunu otomatik doldurmalıyız. Bu yazıda bunu öğreneceğiz.

 

iOS cihazlarda gelen sms kodunu otomatik doldurmak için input etiketine autocomplete="one-time-code" eklemek yetiyor fakat Android cihazlarda bu çalışmayacak bu yüzden hem iOS hem Android cihazlarda çalışacak şekilde WebOTP Api kullanımını öğreneceğiz.

 

Basit bir örnek yapalım;

index.html;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web OTP Api Kullanımı</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="web-otp-container">
        <h1>Web OTP Api Kullanımı</h1>
        <form id="test-otp-form">
            <div class="form-group">
                <label>Doğrulama kodu</label>
                <input type="text" name="sms-code" placeholder="Doğrulama kodu" required>
            </div>
            <button type="submit">Doğrula</button>
        </form>
    </div>
</body>

</html>

Burada basit bir input elemanımız var ve örneğimizdeki senaryoya göre telefona gelecek olan sms kodunun name değeri sms-code olan inputa yazılması isteniyor.

 

Şimdi sırasıyla ihtiyacımız olan işlemleri yapalım.

 

1. Adım → Sms kodunun yazılacağı input'a autocomplete="one-time-code" attribute değerini ekliyoruz;

<input type="text" name="sms-code" placeholder="Doğrulama kodu" autocomplete="one-time-code" required>

Bu attribute sayesinde Web OTP Api kullanılmasa bile otomatik doldurma özelliği iOS cihazlarda çalışacaktır. Başka işlem yapmaya gerek kalmayacaktır. Ama biz hem iOS hem Android için çalışacak bir örnek hazırladığımız için yapmamız gereken 2 basit işlem daha var.

 

 

2. Adım → Sayfamızın script etiketleri arasına Web OTP Api için gerekli javascript kodlarımızı ekleyelim;

<script>
    if ('OTPCredential' in window) {
        window.addEventListener('DOMContentLoaded', e => {
            const input = document.querySelector('input[autocomplete="one-time-code"]');
            if (!input) return;
            const ac = new AbortController();
            const form = input.closest('form');
            if (form) {
                form.addEventListener('submit', e => {
                    ac.abort();
                });
            }
            navigator.credentials.get({
                otp: {
                    transport: ['sms']
                },
                signal: ac.signal
            }).then(otp => {
                input.value = otp.code;
                if (form) form.submit();
            }).catch(err => {
                console.log(err);
            });
        });
    }
</script>

Buradaki işlemleri kısaca anlatmaya çalışayım.

- İlk olarak window.addEventListener ile DOMContentLoaded olayını dinliyoruz yani html belgesi yüklendiğinde bu kod bloğunun içine girecek.

- autocomplete değeri one-time-code olan input elementini seçerek bir değişkene atıyoruz, eğer böyle bir input yoksa kodun geri kalanı çalışmayacak, varsa devam edecek.

- Kullanıcı eğer sms kodunu otomatik olarak doldurmayıp elle doldurup formu gönderirse asenkron olan Web OTP Api'yi izlemeyi durdurmak için AbortController kullanıyoruz.

- navigator.credentials.get bölümü ise Web OTP'yi almak için. Gelen sms kodunun kullanımına izin verildiği taktirde bu kodun .then(otp => {}) kısmına girecek ve otp.code ile sms içerisindeki kodu alıp inputumuzun değerine bunu atayacağız. Bir hata olması durumunda ise .catch kısmına girecek.

 

3. Adım → Şimdi son adımımız, özel biçimlendirilmiş SMS'i göndermek.

Örneğin;

Doğrulama kodunuz: 1234.

@www.kodumunblogu.net #1234

 

Gönderilecek olan SMS bu şablonda olmak zorunda. Sadece “Doğrulama kodunuz: 1234” şeklinde bir sms göndermek Web OTP'yi tetiklemeyecektir. Web OTP Api'yi kullanabilmemiz için bazı kurallarına uymamız gerekiyor, bu kurallar;

  • Sitede SSL sertifikası olması gerekmektedir yani https:// olmalı,
  • SMS'in gönderileceği telefon numarası rehberinizde kayıtlı olmamalı,
  • Doğrulama kodunun önünde # işareti olmalı,
  • Url'nin önünde @ işareti olmalı,
  • Url ve doğrulama kodu son satırda olmalı,
  • Son satırın ilk karakteri @ olmalı,
  • Url ve doğrulama kodu arasında bir boşluk olmalı (@www.kodumunblogu.net #123456),
  • Url'de http veya https olmamalı (@https://www.kodumunblogu.net),
  • Url'de port bilgisi olmamalı (@www.kodumunblogu.net:4200),
  • Url'de yol olmamalı (@www.kodumunblogu.net/sms-dogrulama),
  • Url'de boşluk olmamalı (@www.kodumunblogu .net),
  • Url'de özel karakter olmamalı (@www.kodumunblogu.net#)

 

Yani aşağıdaki gibi sms'ler başarısız olacaktır;

Doğrulama kodunuz: 1234
Doğrulama kodunuz: 1234
www.kodumunblogu.net
Doğrulama kodunuz: 1234
@www.kodumunblogu.net
Doğrulama kodunuz: 1234
@www.kodumunblogu.net/dogrulama #1234

 

Olması gereken sms;

Doğrulama kodunuz: 1234.
@www.kodumunblogu.net #1234

veya şöyle bir sms'de kullanabilirsiniz;

Doğrulama işlemini 1234 kodu ile tamamlayabilirsiniz.
@www.kodumunblogu.net #1234

 

Önemli olan son satırda sms kodunu kullanacak olan sitenin Url'si başında @ olacak şekilde yazılsın (subdomain kullanabilirsiniz) ve bir boşluk bırakarak başında # olacak şekilde doğrulama kodu yazılsın. İlk satırda istediğinizi yazabilirsiniz.

 

Yapacağımız işlemler bu kadar.

 

 

Örneğimizi https://web-otp.mehmetsert.com.tr adresine yükledim, buradan deneyebilirsiniz. Örneği denerken kuralları unutmayın;

  • Sms'i gönderen telefon numarası rehberinizde kayıtlı olmaması gerekiyor. SMS'i bir arkadaşınızın telefonundan gönderecekseniz eğer ilk önce rehberinizden arkadaşınızın kaydını silin
  • Kurallara uygun sms şablonu kullanın.

 

Yani demo adresimizi açtığınız telefonunuza rehberinizde kayıtlı olmayan bir numaradan şöyle bir sms gelirse Web OTP Api başarılı şekilde çalışacaktır;

Doğrulama kodunuz: 1122
@web-otp.mehmetsert.com.tr #1122

 

Demo: https://web-otp.mehmetsert.com.tr

Örneğimize ait github reposu: https://github.com/MehmetSert/web-otp-api-example

Daha fazla detay öğrenmek için: https://web.dev/web-otp/

 

 

Umarım faydalı bir paylaşım olmuştur.