Praktik terbaik formulir OTP SMS

Eiji Kitamura

Pengguna biasanya diminta untuk memberikan sandi sekali pakai (OTP) untuk mengonfirmasi identitas mereka dengan mengirimkan SMS. Beberapa kasus penggunaan untuk OTP SMS meliputi:

  • Autentikasi 2 langkah. Selain nama pengguna dan sandi, OTP SMS dapat digunakan sebagai sinyal kuat bahwa akun tersebut dimiliki oleh orang yang menerima OTP SMS.
  • Verifikasi nomor telepon. Beberapa layanan menggunakan nomor telepon sebagai ID utama pengguna. Dalam layanan tersebut, pengguna dapat memasukkan nomor telepon mereka dan OTP yang diterima melalui SMS untuk membuktikan identitas mereka. Terkadang, sidik jari digabungkan dengan PIN untuk membentuk autentikasi 2 langkah.
  • Pemulihan akun. Jika pengguna kehilangan akses ke akunnya, harus ada cara untuk memulihkannya. Mengirim email ke alamat email terdaftar mereka atau OTP SMS ke nomor telepon mereka adalah metode pemulihan akun yang umum.
  • Konfirmasi pembayaran Dalam sistem pembayaran, beberapa bank atau penerbit kartu kredit meminta autentikasi tambahan dari pembayar karena alasan keamanan. OTP SMS biasanya digunakan untuk tujuan tersebut.

Teruslah membaca untuk mengetahui praktik terbaik dalam membuat formulir OTP SMS untuk kasus penggunaan ini.

Checklist

Untuk memberikan pengalaman pengguna terbaik dengan OTP SMS, ikuti langkah-langkah berikut:

  • Gunakan elemen <input> dengan:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Gunakan @BOUND_DOMAIN #OTP_CODE sebagai baris terakhir pesan SMS OTP.
  • Gunakan WebOTP API.

Menggunakan elemen <input>

Menggunakan formulir dengan elemen <input> adalah praktik terbaik terpenting yang dapat Anda ikuti karena berfungsi di semua browser. Meskipun saran lain dari postingan ini tidak berfungsi di beberapa browser, pengguna tetap dapat memasukkan dan mengirimkan OTP secara manual.

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

Berikut beberapa ide untuk memastikan kolom input mendapatkan hasil maksimal dari fungsi browser.

type="text"

Karena OTP biasanya berupa angka lima atau enam digit, penggunaan type="number" untuk kolom input mungkin tampak intuitif karena mengubah keyboard ponsel menjadi hanya angka. Cara ini tidak direkomendasikan karena browser mengharapkan kolom input berupa angka yang dapat dihitung, bukan urutan beberapa angka, yang dapat menyebabkan perilaku yang tidak terduga. Menggunakan type="number" akan menyebabkan tombol naik dan turun ditampilkan di samping kolom input; menekan tombol ini akan menambah atau mengurangi angka dan dapat menghapus angka nol di depannya.

Sebagai gantinya, gunakan type="text". Tindakan ini tidak akan mengubah keyboard seluler menjadi hanya angka, tetapi tidak masalah karena tips berikutnya untuk menggunakan inputmode="numeric" akan melakukan tugas tersebut.

inputmode="numeric"

Gunakan inputmode="numeric" untuk mengubah keyboard seluler menjadi hanya angka.

Beberapa situs menggunakan type="tel" untuk kolom input OTP karena juga mengubah keyboard seluler menjadi hanya angka (termasuk * dan #) saat difokuskan. Solusi ini digunakan pada masa lalu saat inputmode="numeric" belum didukung secara luas. Karena Firefox mulai mendukung inputmode="numeric", tidak perlu menggunakan hack type="tel" yang secara semantik salah.

autocomplete="one-time-code"

Atribut autocomplete memungkinkan developer menentukan izin yang harus dimiliki browser untuk memberikan bantuan pelengkapan otomatis dan memberi tahu browser tentang jenis informasi yang diharapkan dalam kolom.

Dengan autocomplete="one-time-code", setiap kali pengguna menerima pesan SMS saat formulir terbuka, sistem operasi akan mengurai OTP dalam SMS secara heuristik dan keyboard akan menyarankan OTP untuk dimasukkan pengguna. Fitur ini hanya berfungsi di Safari 12 dan yang lebih baru di iOS, iPadOS, dan macOS, tetapi sebaiknya gunakan fitur ini karena merupakan cara yang lebih baik untuk meningkatkan kualitas pengalaman OTP SMS di platform tersebut.

autocomplete="one-time-code" sedang beraksi.

autocomplete="one-time-code" meningkatkan pengalaman pengguna, tetapi ada hal lain yang dapat Anda lakukan dengan memastikan bahwa pesan SMS mematuhi format pesan yang terikat dengan asal.

Atribut opsional

Atribut opsional meliputi:

Baca praktik terbaik formulir login kami untuk mendapatkan saran lainnya.

Memformat teks SMS

Tingkatkan pengalaman pengguna saat memasukkan OTP dengan menyelaraskan dengan spesifikasi kode sekali pakai terikat asal yang dikirimkan melalui SMS.

Pada dasarnya, aturan formatnya adalah sebagai berikut: Akhiri pesan SMS dengan domain penerima yang diawali dengan @, dan OTP yang diawali dengan #.

Contoh:

Your OTP is 123456

@web-otp.glitch.me #123456

Format standar untuk pesan OTP membuat ekstraksi lebih mudah dan andal. Mengaitkan kode OTP dengan situs akan mempersulit pengguna untuk ditipu agar memberikan kode ke situs berbahaya.

Aturan pemformatan yang akurat

Aturan akuratnya adalah:

  • Pesan dimulai dengan teks yang mudah dibaca (opsional) yang berisi string alfanumerik empat hingga sepuluh karakter dengan setidaknya satu angka, dan menyisakan baris terakhir untuk URL dan OTP.
  • Bagian domain URL situs yang memanggil API harus diawali dengan @.
  • URL harus berisi #, diikuti dengan OTP. Jumlah karakter harus 140 atau kurang.

Menggunakan format ini memberikan beberapa manfaat:

  • OTP akan terikat ke domain. Jika pengguna berada di domain selain yang ditentukan dalam pesan SMS, saran OTP tidak akan muncul. Tindakan ini juga mengurangi risiko serangan phishing dan potensi pembajakan akun.
  • Browser kini dapat mengekstrak OTP dengan andal tanpa bergantung pada heuristik yang tidak jelas dan tidak stabil.

Jika situs menggunakan autocomplete="one-time-code", Safari dengan iOS 14 atau yang lebih baru akan menyarankan OTP mengikuti aturan berikut.

Format pesan SMS ini juga bermanfaat bagi browser selain Safari. Chrome, Opera, dan Vivaldi di Android juga mendukung aturan kode sekali pakai yang terikat dengan origin menggunakan WebOTP API, meskipun tidak melalui autocomplete="one-time-code".

Menggunakan WebOTP API

WebOTP API memberikan akses ke OTP yang diterima dalam pesan SMS. Dengan memanggil navigator.credentials.get() dengan jenis otp (OTPCredential) yang transport-nya mencakup sms, situs akan menunggu SMS yang mematuhi kode sekali pakai terikat asal untuk dikirim dan diberikan akses oleh pengguna. Setelah OTP diteruskan ke JavaScript, situs dapat menggunakannya dalam formulir atau mempostingnya langsung ke server.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API sedang digunakan.

Pelajari cara menggunakan WebOTP API secara mendetail di Memverifikasi nomor telepon di web dengan WebOTP API atau salin dan tempel cuplikan berikut. Pastikan untuk menyetel atribut action dan method di <form> Anda.

// 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);
    });
  });
}