Verifikasi nomor telepon di desktop menggunakan WebOTP API

Mulai Chrome 93, situs dapat memverifikasi nomor telepon dari Chrome desktop.

Yi Gu
Yi Gu
Eiji Kitamura
Eiji Kitamura

WebOTP membantu pengguna memasukkan kode verifikasi nomor telepon di situs seluler dengan sekali ketuk tanpa beralih antar-aplikasi. Chrome 93 juga memperluas fungsi ini ke desktop. Lanjutkan membaca untuk mempelajari lebih lanjut.

Pengantar

OTP (sandi sekali pakai) SMS umumnya 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 akan menambah hambatan. Sangat mudah membuat kesalahan dengan cara ini dan rentan terhadap serangan {i>phishing<i}.

WebOTP API memberi situs kemampuan untuk mendapatkan sandi sekali pakai secara terprogram dari pesan SMS dan secara otomatis mengisi formulir bagi pengguna hanya dengan sekali ketuk tanpa beralih aplikasi. SMS memiliki format tertentu dan terikat ke asalnya, sehingga mengurangi risiko situs phishing yang mencuri OTP juga.

Cara kerja WebOTP API.

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.

WebOTP API di desktop.

Cobalah

Prasyarat

Demo

Untuk mencoba alur verifikasi nomor telepon yang lancar di desktop, ikuti langkah-langkah berikut:

  1. Buka https://web-otp-demo.glitch.me/ di desktop. Klik tombol Verifikasi.
  2. Mengirim pesan teks persis yang ada di layar dari ponsel kedua ke perangkat Android.
  3. Saat SMS dikirim ke perangkat Android, sebuah dialog akan muncul yang menanyakan apakah Anda ingin memverifikasi nomor telepon di desktop. Tekan Kirim untuk menyetujui.
  4. 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 yang didahului dengan @ 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(). Selanjutnya, situs 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 dengan 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 berbagi format SMS yang sama dengan dukungan input[autocomplete="one-time-code"]-nya. Di Safari, selama pengguna mengaktifkan sinkronisasi otomatis iMessage, saat SMS yang berisi format kode sekali pakai yang terikat dengan origin diterima dengan origin yang cocok di iOS atau iPadOS, pesan tersebut akan diteruskan ke macOS. Jika pengguna berfokus pada kolom input, Safari akan menyarankan OTP yang dapat dimasukkan pengguna.

Masukan

Masukan Anda sangat berharga untuk menjadikan WebOTP API lebih baik. Cobalah dan beri tahu kami bagaimana pendapat Anda.

Foto oleh Luis Villasmil di Unsplash