Mulai Chrome 93, situs dapat memverifikasi nomor telepon dari Chrome desktop.
WebOTP membantu pengguna memasukkan kode verifikasi nomor telepon di {i>website<i} seluler di sekali ketuk tanpa beralih antar-aplikasi. Chrome 93 memperluas fungsi ini ke desktop juga. Baca terus untuk mempelajari lebih lanjut.
Pengantar
OTP ({i>password<i} sekali pakai) SMS biasanya digunakan untuk memverifikasi nomor telepon, sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, seluruh alur peralihan dari desktop ke seluler, yang membuka aplikasi, mengingat dan memasukkan OTP kembali pada situs web asli di {i>desktop<i} menambah hambatan. Hal ini sangat mudah untuk melakukan kesalahan dan hal ini rentan terhadap serangan {i>phishing<i}.
WebOTP API membuat situs dapat secara terprogram mendapatkan {i> one-time password<i} dari pesan SMS dan mengisi formulir secara otomatis untuk pengguna hanya dengan sekali ketuk tanpa beralih aplikasi. SMS memiliki format tertentu dan terikat dengan asalnya, sehingga mengurangi situs web {i>phishing <i}yang juga mencuri OTP.
Satu kasus penggunaan yang belum didukung di WebOTP adalah penargetan nomor telepon permintaan verifikasi dari perangkat desktop jarak jauh atau laptop— API hanya berfungsi pada perangkat yang memiliki kemampuan telepon. API kini mendukung mendengarkan 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 lebih tinggi.
- Chrome 93 atau yang lebih baru, baik di desktop atau laptop dan perangkat seluler. Chrome 93 Beta tersedia mulai akhir Juli 2021.
- Anda harus masuk 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 perlu 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 Android perangkat seluler.
Demo
Untuk mencoba alur verifikasi nomor telepon yang lancar ini di desktop sendiri, ikuti langkah-langkah berikut:
- Buka https://web-otp-demo.glitch.me/ di {i>desktop<i}. Klik tombol Verifikasi.
- Kirim SMS persis yang ada di layar dari ponsel kedua ke perangkat Android.
- Saat SMS dikirimkan 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 tempat asal yang akan diikat dengan @.
yang diikuti oleh OTP yang diawali dengan #.
Saat pesan teks masuk, bilah info muncul dan meminta pengguna untuk
memverifikasi nomor telepon mereka. Setelah pengguna mengklik tombol Verify,
browser secara otomatis meneruskan OTP ke situs dan mengatasi
navigator.credentials.get(). Situs kemudian bisa 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. Semua penggunaan kasus pada perangkat seluler harus berlaku untuk perangkat desktop.
Menggunakan WebOTP API di desktop sama dengan di seluler, sehingga {i>website<i} dapat menempatkan kode yang sama di seluruh platform.
Dukungan browser dan interoperabilitas
Fitur ini didukung oleh Sinkronisasi Chrome sehingga hanya berfungsi dengan Chrome untuk saat ini. Menerima dan mengirim SMS di iOS atau iPad OS di Chrome tidak didukung.
Meskipun mesin browser selain Chromium
tidak mengimplementasikan API WebOTP,
Safari memiliki format SMS yang sama
dengan dukungan input[autocomplete="one-time-code"]. Di Safari, selama
pengguna telah mengaktifkan sinkronisasi otomatis iMessage, jika SMS yang berisi server yang terikat origin
format kode sekali pakai tiba dengan asal yang cocok di iOS atau iPadOS,
pesan diteruskan ke macOS. Jika pengguna berfokus pada kolom input, Safari
akan menyarankan OTP
yang harus dimasukkan pengguna.
Masukan
Masukan Anda sangat berharga untuk meningkatkan kualitas WebOTP API. Mencobanya dan beri tahu kami apa yang Anda pikirkan.
Foto oleh Luis Villasmil nyala Buka Percikan