Mulai dari Chrome 93, situs dapat memverifikasi nomor telepon dari Chrome desktop.
WebOTP membantu pengguna memasukkan kode verifikasi nomor telepon di situs seluler dengan satu ketuk tanpa beralih antar-aplikasi. Chrome 93 juga memperluas fungsi ini ke desktop. Baca terus untuk mempelajari lebih lanjut.
Pengantar
OTP SMS (sandi sekali pakai) biasanya digunakan untuk memverifikasi nomor telepon, misalnya sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, seluruh alur beralih dari desktop ke perangkat seluler, membuka aplikasi SMS, menghafal, dan memasukkan OTP di situs asli kembali ke desktop akan menambah hambatan. Dengan cara ini, kesalahan mudah terjadi dan Anda rentan terhadap serangan phishing.
WebOTP API memberi situs kemampuan untuk mendapatkan sandi sekali pakai secara terprogram dari pesan SMS dan mengisi formulir secara otomatis untuk pengguna hanya dengan sekali ketuk tanpa beralih aplikasi. SMS memiliki format tertentu dan terikat dengan asal, 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 di perangkat yang memiliki kemampuan telefoni. API ini kini mendukung pemrosesan SMS yang diterima di perangkat lain untuk membantu pengguna menyelesaikan verifikasi nomor telepon di desktop di 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, baik di desktop atau laptop maupun di 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 di perangkat Android.
Demo
Untuk mencoba alur verifikasi nomor telepon yang lancar ini di desktop, ikuti langkah-langkah berikut:
- Buka https://web-otp-demo.glitch.me/ di desktop. Klik tombol Verifikasi.
- Kirim pesan teks yang sama persis dengan 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 akan 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 terikat dengan didahului @
diikuti dengan OTP yang didahului #.
Saat pesan teks diterima, panel info akan muncul dan meminta pengguna untuk
memverifikasi nomor telepon mereka. Setelah pengguna mengklik tombol Verify, browser
akan otomatis meneruskan OTP ke situs dan me-resolve
navigator.credentials.get(). Situs 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 digunakan secara luas dan tidak bergantung pada platform. Setiap kasus penggunaan di perangkat seluler harus berlaku untuk perangkat desktop.
Penggunaan WebOTP API di desktop sama dengan 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 mengirim SMS di iOS atau iPadOS di Chrome tidak didukung.
Meskipun mesin browser selain Chromium tidak menerapkan WebOTP API,
Safari memiliki 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 satu kali
terikat origin diterima dengan origin yang cocok di iOS atau iPadOS, pesan akan diteruskan ke macOS. Jika pengguna berfokus pada kolom input, Safari
akan menyarankan OTP untuk dimasukkan pengguna.
Masukan
Masukan Anda sangat berharga untuk meningkatkan kualitas WebOTP API. Cobalah dan beri tahu kami pendapat Anda.
Foto oleh Luis Villasmil di Unsplash