Halaman ini diterjemahkan oleh Cloud Translation API.

Praktik terbaik formulir OTP SMS

Pelajari cara mengoptimalkan formulir OTP SMS dan meningkatkan kualitas pengalaman pengguna.

Eiji Kitamura

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

Autentikasi 2 langkah. Selain nama pengguna dan {i>password<i}, 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. Dalam layanan tersebut, pengguna dapat memasukkan nomor telepon dan OTP yang diterima melalui SMS untuk membuktikan identitasnya. Terkadang sandi digabungkan dengan PIN untuk membentuk otentikasi dua faktor.
Pemulihan akun. Saat pengguna kehilangan akses ke akunnya, perlu ada sebagai cara untuk memulihkannya. Mengirim email ke alamat email mereka yang terdaftar atau OTP SMS ke nomor telepon mereka adalah metode pemulihan akun yang umum.
Konfirmasi pembayaran Di sistem pembayaran, beberapa bank atau kartu kredit penerbit meminta autentikasi tambahan dari pembayar untuk alasan keamanan. OTP SMS biasanya digunakan untuk tujuan tersebut.

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

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 yang paling penting yang dapat diikuti karena berfungsi di semua {i>browser<i}. Bahkan jika 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 isian {i>input <i}mendapatkan hasil terbaik fungsi browser.

`type="text"`

Karena OTP biasanya terdiri dari lima atau enam digit angka, menggunakan type="number" untuk kolom input mungkin tampak intuitif karena dapat mengubah keyboard ke angka saja. Hal ini tidak disarankan karena browser mengharapkan isian input adalah angka yang dapat dihitung daripada rangkaian beberapa angka, yang dapat menyebabkan perilaku yang tidak diharapkan. Menggunakan type="number" menyebabkan naik dan turun tombol yang akan ditampilkan di samping bidang input; menekan tombol ini 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 itu bukan masalah karena tip berikutnya untuk menggunakan inputmode="numeric" melakukan untuk pekerjaan itu.

`inputmode="numeric"`

Gunakan inputmode="numeric" untuk mengubah {i>keyboard<i} seluler menjadi angka saja.

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

`autocomplete="one-time-code"`

autocomplete memungkinkan developer menentukan izin yang diperlukan browser harus memberikan bantuan pelengkapan otomatis dan memberi tahu browser tentang jenis informasi yang diharapkan di lapangan.

Dengan autocomplete="one-time-code" setiap kali pengguna menerima pesan SMS saat terbuka, sistem operasi akan mengurai OTP dalam SMS secara heuris dan {i>keyboard<i} akan menyarankan OTP untuk dimasukkan oleh pengguna. Ini hanya berfungsi di Safari 12 dan di iOS, iPadOS, dan macOS, tetapi kami sangat menyarankan Anda untuk menggunakannya, karena cara mudah untuk meningkatkan pengalaman OTP SMS pada platform tersebut.

penerapan `Autocomplete="one-time-code"`.

autocomplete="one-time-code" meningkatkan kualitas pengalaman pengguna, tetapi masih banyak lagi manfaat lainnya dapat dilakukan dengan memastikan bahwa pesan SMS mematuhi pesan yang terikat dengan asal format.

Memformat teks SMS

Tingkatkan pengalaman pengguna saat memasukkan OTP dengan menyelaraskannya dengan kode sekali pakai yang terikat origin yang dikirim melalui SMS spesifikasi pendukung.

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

Contoh:

Your OTP is 123456

@web-otp.glitch.me #123456

Menggunakan format standar untuk pesan OTP membuat ekstraksi kode dari mereka menjadi lebih mudah dan lebih dapat diandalkan. Mengaitkan kode OTP dengan situs web akan mempersulit upaya menipu pengguna agar 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 secara total. Untuk mempelajari aturan khusus Chrome lebih lanjut, baca Memformat bagian pesan SMS di postingan WebOTP API.

Penggunaan format ini akan 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 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 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 melalui pesan SMS. Dengan memanggil navigator.credentials.get() dengan jenis otp (OTPCredential) dengan transport menyertakan sms, situs akan menunggu SMS yang sesuai dengan kode sekali pakai yang terikat asal akses yang diberikan dan diberikan oleh pengguna. Setelah OTP diteruskan ke JavaScript, situs web dapat menggunakannya dalam bentuk 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 Memverifikasi nomor telepon di web dengan WebOTP API atau salin dan tempel cuplikan berikut. (Buat 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 Buka pembuka.