Halaman ini diterjemahkan oleh Cloud Translation API.

Praktik terbaik formulir OTP SMS

Pelajari cara mengoptimalkan formulir OTP SMS dan meningkatkan pengalaman pengguna.

Eiji Kitamura

Meminta pengguna untuk memberikan OTP (sandi sekali pakai) yang dikirim melalui SMS adalah cara umum untuk mengonfirmasi nomor telepon pengguna. Ada beberapa kasus penggunaan OTP SMS:

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 digabungkan dengan PIN untuk membentuk otentikasi dua faktor.
Pemulihan akun. Saat pengguna kehilangan akses ke akunnya, perlu 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 untuk alasan keamanan. OTP SMS biasanya digunakan untuk tujuan tersebut.

Postingan ini menjelaskan praktik terbaik untuk membuat formulir OTP SMS untuk kasus penggunaan di atas.

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 ini beberapa ide untuk memastikan kolom input mendapatkan hasil maksimal dari fungsi browser.

`type="text"`

Karena OTP biasanya berupa angka lima atau enam digit, menggunakan 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 tidak terduga. Penggunaan type="number" akan menyebabkan tombol atas dan bawah ditampilkan di samping kolom input; menekan tombol ini akan menambah atau mengurangi angka dan dapat menghapus nol sebelumnya.

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

`inputmode="numeric"`

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

Beberapa situs menggunakan type="tel" untuk kolom input OTP karena juga mengubah keyboard seluler ke angka saja (termasuk * dan #) saat difokus. Peretasan ini sebelumnya digunakan saat inputmode="numeric" tidak didukung secara luas. Sejak Firefox mulai mendukung inputmode="numeric", Anda tidak perlu menggunakan peretasan type="tel" yang salah secara semantik.

`autocomplete="one-time-code"`

Dengan atribut autocomplete, developer dapat menentukan izin yang 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 dibuka, sistem operasi akan mengurai OTP dalam SMS secara heuristis 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 Anda menggunakannya karena ini adalah cara mudah untuk meningkatkan pengalaman OTP SMS di platform tersebut.

`Autocomplete="one-time-code"` saat dijalankan.

autocomplete="one-time-code" meningkatkan pengalaman pengguna, tetapi masih banyak lagi yang dapat Anda lakukan dengan memastikan bahwa pesan SMS sesuai dengan format pesan terikat origin.

Memformat teks SMS

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

Aturan formatnya sederhana: Selesaikan pesan SMS dengan domain penerima yang diawali dengan @ dan OTP yang diawali dengan #.

Contoh:

Your OTP is 123456

@web-otp.glitch.me #123456

Penggunaan format standar untuk pesan OTP membuat ekstraksi kode dari pesan tersebut lebih mudah dan lebih dapat diandalkan. Mengaitkan kode OTP dengan situs akan mempersulit pengguna untuk mengelabui pengguna agar memberikan kode ke situs berbahaya.

Catatan: Aturan tepatnya adalah: * Pesan diawali dengan teks (opsional) yang dapat dibaca manusia yang berisi string alfanumerik empat hingga sepuluh karakter dengan setidaknya satu angka, menyisakan baris terakhir untuk URL dan OTP. * Bagian domain URL situs yang memanggil API harus diawali dengan @. * URL harus berisi tanda pagar ("#") yang diikuti dengan OTP. Pastikan jumlah karakter tidak melebihi 140. Untuk mempelajari aturan khusus Chrome lebih lanjut, baca Memformat bagian pesan SMS di postingan WebOTP API.

Penggunaan format ini memberikan beberapa manfaat:

OTP akan terikat dengan 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 sekarang dapat mengekstrak OTP secara andal tanpa bergantung pada heuristik yang misterius dan tidak stabil.

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

Format pesan SMS ini juga menguntungkan 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 origin akan dikirimkan dan diberi akses oleh pengguna. Setelah OTP diteruskan ke JavaScript, situs dapat menggunakannya dalam formulir atau mem-POST-nya langsung ke server.

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

Cara kerja WebOTP API.

Pelajari cara menggunakan WebOTP API secara mendetail di bagian Memverifikasi nomor telepon di web dengan WebOTP API atau salin dan tempel cuplikan berikut. (Pastikan elemen <form> memiliki atribut action dan method yang disetel dengan benar.)

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

Foto oleh Jason Leung di Unsplash.