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 untuk OTP SMS:

Autentikasi 2 langkah. Selain nama pengguna dan sandi, OTP SMS dapat digunakan sebagai sinyal kuat bahwa akun 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, {i>password<i} dikombinasikan dengan PIN untuk menghasilkan autentikasi 2 langkah.
Pemulihan akun. Jika 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.

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 paling penting 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 mengoptimalkan 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. 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 tips berikutnya untuk menggunakan inputmode="numeric" akan melakukan hal 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 menjadi angka saja (termasuk * dan #) saat difokuskan. Hack ini digunakan sebelumnya saat inputmode="numeric" tidak didukung secara luas. Karena Firefox mulai mendukung inputmode="numeric", Anda tidak perlu menggunakan hack 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.

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

Cara kerja `complete="one-time-code"`.

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

Memformat teks SMS

Tingkatkan pengalaman pengguna saat memasukkan OTP dengan menyelaraskannya 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

Menggunakan format standar untuk pesan OTP akan mempermudah ekstraksi kode dari pesan tersebut dan membuatnya lebih andal. Mengaitkan kode OTP dengan situs akan mempersulit pengguna untuk memberikan kode ke situs berbahaya.

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

Penggunaan format ini akan 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 heuristic 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 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 mengirimkannya 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 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.