Praktik terbaik formulir OTP SMS

Eiji Kitamura

Biasanya, pengguna diminta memberikan sandi sekali pakai (OTP) untuk mengonfirmasi identitas mereka dengan mengirimkan SMS. Beberapa kasus penggunaan untuk OTP SMS mencakup:

  • 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 dan OTP yang diterima melalui SMS untuk membuktikan identitas mereka. Terkadang, sidik jari digabungkan dengan PIN untuk membentuk autentikasi 2 langkah.
  • Pemulihan akun. Saat pengguna kehilangan akses ke akunnya, harus ada cara untuk memulihkannya. Mengirim email ke alamat email terdaftar 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.

Terus baca 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 paling penting yang dapat Anda ikuti karena berfungsi di semua browser. Meskipun saran lain dari postingan ini tidak berfungsi di beberapa browser, pengguna akan 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 seluler menjadi angka saja. Hal 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 atas dan bawah ditampilkan di samping kolom input; menekan tombol ini akan menambah atau mengurangi angka dan dapat menghapus angka nol di depan.

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 melakukannya.

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. Peretasan ini digunakan di masa lalu saat inputmode="numeric" belum didukung secara luas. Karena Firefox mulai mendukung inputmode="numeric", tidak perlu menggunakan peretasan type="tel" yang salah secara semantik.

autocomplete="one-time-code"

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

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 kami sangat menyarankan untuk menggunakannya, karena ini adalah cara yang lebih baik untuk meningkatkan pengalaman OTP SMS di platform tersebut.

autocomplete="one-time-code" beraksi.

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

Atribut opsional

Atribut opsional meliputi:

Baca praktik terbaik formulir login kami untuk mendapatkan saran selengkapnya.

Memformat teks SMS

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

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

Contoh:

Your OTP is 123456

@web-otp.example.com #123456

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

Aturan pemformatan yang akurat

Aturan akuratnya adalah:

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

Penggunaan 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. Hal ini juga mengurangi risiko serangan phishing dan potensi pembajakan akun.
  • Browser kini dapat mengekstrak OTP dengan andal tanpa bergantung pada heuristik yang misterius dan tidak stabil.

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

Format pesan SMS ini juga bermanfaat bagi browser selain Safari. Chrome, Opera, dan Vivaldi di Android juga mendukung aturan kode sekali pakai yang terikat origin dengan 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) dengan transport menyertakan sms, situs akan menunggu SMS yang mematuhi kode sekali pakai yang terikat asal untuk dikirim dan diberi akses oleh pengguna. Setelah OTP diteruskan ke JavaScript, situs dapat menggunakannya dalam formulir atau mem-POSTING-nya langsung ke server.

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

Pelajari cara menggunakan WebOTP API secara mendetail di Memverifikasi nomor telepon di web dengan WebOTP API atau salin dan tempel cuplikan berikut. Pastikan untuk menetapkan 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);
    });
  });
}