Mulai Chrome 93, situs dapat memverifikasi nomor telepon dari Chrome desktop.
WebOTP membantu pengguna memasukkan kode verifikasi nomor telepon di situs seluler dengan sekali ketuk tanpa perlu beralih antar-aplikasi. Chrome 93 juga memperluas fungsi ini ke desktop. Baca terus untuk mempelajari lebih lanjut.
Pengantar
OTP (sandi sekali pakai) SMS biasanya digunakan untuk memverifikasi nomor telepon, misalnya sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, seluruh alur peralihan dari desktop ke seluler, membuka aplikasi SMS, menghafal, dan memasukkan OTP di situs asli kembali ke desktop menimbulkan hambatan. Sangat mudah untuk membuat kesalahan seperti ini dan rentan terhadap serangan phishing.
Dengan WebOTP API, situs dapat mendapatkan sandi sekali pakai secara terprogram dari pesan SMS dan otomatis mengisi formulir untuk pengguna hanya dengan sekali ketuk tanpa perlu beralih aplikasi. SMS memiliki format tertentu dan terikat ke asalnya, sehingga mengurangi risiko situs phishing yang mencuri OTP.
Satu kasus penggunaan yang belum didukung di WebOTP adalah menargetkan permintaan verifikasi nomor telepon dari perangkat desktop jarak jauh atau laptop—API hanya berfungsi pada perangkat yang memiliki kemampuan telepon. API ini kini mendukung pemrosesan SMS yang diterima di perangkat lain untuk membantu pengguna dalam menyelesaikan verifikasi nomor telepon di desktop pada Chrome 93.
Cobalah
Prasyarat
- Komputer desktop atau laptop (Windows, Mac, Linux, atau ChromeOS).
- Ponsel Android dengan Layanan Google Play versi 20.30.12 atau yang lebih tinggi.
- Chrome 93 atau yang lebih baru, di desktop atau laptop, dan perangkat seluler. Chrome 93 Beta tersedia mulai akhir Juli 2021.
- Anda harus login ke Akun Google yang sama di Chrome desktop dan Chrome seluler. Misalnya, melalui https://myaccount.google.com/ atau https://mail.google.com. Tidak perlu mengaktifkan sinkronisasi.
- Di perangkat Android, Anda harus login ke Android melalui "Setelan->Google".
- Chrome 93 harus menjadi browser default di perangkat Android.
- Chrome 93 harus berjalan di latar depan atau latar belakang pada perangkat Android.
Demo
Untuk mencoba sendiri alur verifikasi nomor telepon yang lancar di desktop, ikuti langkah-langkah berikut:
- Buka https://web-otp-demo.glitch.me/ di desktop. Klik tombol Verifikasi.
- Kirim pesan teks persis yang ada di layar dari ponsel kedua ke perangkat Android.
- Saat SMS dikirim ke perangkat Android, dialog akan muncul yang menanyakan apakah Anda ingin memverifikasi nomor telepon di desktop. Tekan Kirim untuk menyetujui.
- Di desktop, kode verifikasi yang dikirim ke perangkat Android harus diisi otomatis di kolom input.
Cara kerja WebOTP API
Mari kita lihat cara kerja WebOTP API:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
Pesan SMS harus diformat dengan kode sekali pakai yang terikat asal.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Perhatikan bahwa baris terakhir berisi asal yang akan diikat dengan awalan @ diikuti dengan OTP yang diawali dengan #.
Saat pesan teks masuk, kolom info akan muncul dan meminta pengguna untuk
memverifikasi nomor teleponnya. Setelah pengguna mengklik tombol Verify, browser akan otomatis meneruskan OTP ke situs dan me-resolve
navigator.credentials.get(). Situs web kemudian dapat mengekstrak OTP dan
menyelesaikan proses verifikasi.
Pelajari lebih lanjut di Memverifikasi nomor telepon di web dengan WebOTP API.
Cara menggunakan WebOTP API di desktop
Verifikasi nomor telepon melalui SMS banyak digunakan dan tidak bergantung pada platform. Setiap kasus penggunaan di perangkat seluler harus berlaku untuk perangkat desktop.
Penggunaan WebOTP API di desktop sama seperti penggunaan di perangkat seluler, sehingga situs dapat men-deploy kode yang sama di seluruh platform.
Dukungan browser dan interoperabilitas
Fitur ini didukung oleh Sinkronisasi Chrome sehingga saat ini hanya berfungsi di Chrome. Menerima dan mengirimkan SMS di iOS atau iPad OS di Chrome tidak didukung.
Meskipun mesin browser selain Chromium tidak menerapkan WebOTP API,
Safari menggunakan format SMS
yang sama dengan dukungan input[autocomplete="one-time-code"]-nya. Di Safari, selama pengguna telah mengaktifkan sinkronisasi otomatis iMessage, saat SMS yang berisi format kode sekali pakai yang terikat asal tiba dengan origin yang cocok di iOS atau iPadOS, pesan tersebut akan diteruskan ke macOS. Jika pengguna berfokus pada bidang input, Safari
akan menyarankan OTP untuk dimasukkan pengguna.
Masukan
Masukan Anda sangat penting untuk meningkatkan kualitas WebOTP API. Cobalah dan beri tahu kami bagaimana pendapat Anda.
Foto oleh Luis Villasmil di Unsplash