Pelajari cara mengoptimalkan formulir OTP SMS dan meningkatkan pengalaman pengguna.
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_CODEsebagai 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.
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.
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);
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.