WebOTP API kini dapat menerima OTP dari dalam iframe.
OTP (sandi sekali pakai) SMS biasanya digunakan untuk memverifikasi nomor telepon, misalnya sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, dengan beralih antara browser dan aplikasi SMS, salin-tempel atau masukkan OTP secara manual akan memudahkan pengguna melakukan kesalahan dan menambah hambatan.
Dengan WebOTP API, situs dapat memperoleh sandi sekali pakai secara terprogram dari pesan SMS dan memasukkannya secara otomatis ke dalam formulir untuk pengguna hanya dengan sekali ketuk tanpa perlu beralih aplikasi. SMS diformat secara khusus dan terikat ke originnya, sehingga mengurangi peluang bagi situs phishing untuk mencuri OTP.
Satu kasus penggunaan yang belum didukung di WebOTP adalah menargetkan origin dalam iframe. Hal ini biasanya digunakan untuk konfirmasi pembayaran, terutama dengan 3D Secure. Dengan format umum untuk mendukung iframe lintas origin, WebOTP API kini mengirimkan OP yang terikat dengan origin bertingkat mulai Chrome 91.
Cara kerja WebOTP API
WebOTP API sendiri cukup sederhana:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
Pesan SMS harus diformat dengan kode sekali pakai yang terikat asal.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Perhatikan bahwa pada baris terakhir, kolom ini berisi asal yang akan diikat diawali dengan
@
, yang 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 dasar-dasar penggunaan WebOTP di artikel Memverifikasi nomor telepon di web dengan WebOTP API.
Kasus penggunaan iframe lintas origin
Memasukkan OTP dalam formulir dalam iframe lintas origin adalah hal biasa dalam skenario pembayaran. Beberapa penerbit kartu kredit memerlukan langkah verifikasi tambahan untuk memeriksa keaslian pembayar. Ini disebut 3D Secure dan formulirnya biasanya ditampilkan dalam iframe di halaman yang sama seolah-olah merupakan bagian dari alur pembayaran.
Contoh:
- Pengguna mengunjungi
shop.example
untuk membeli sepasang sepatu dengan kartu kredit. - Setelah memasukkan nomor kartu kredit, penyedia pembayaran terintegrasi akan menampilkan
formulir dari
bank.example
dalam iframe yang meminta pengguna memverifikasi nomor telepon mereka untuk checkout cepat. bank.example
mengirim SMS yang berisi OTP kepada pengguna agar pengguna dapat memasukkannya untuk memverifikasi identitasnya.
Cara menggunakan WebOTP API dari iframe lintas origin
Untuk menggunakan WebOTP API dari dalam iframe lintas origin, Anda harus melakukan dua hal:
- Anotasikan origin frame atas dan origin iframe dalam pesan teks SMS.
- Konfigurasi kebijakan izin untuk mengizinkan iframe lintas origin menerima OTP dari pengguna secara langsung.
Anda dapat mencoba demonya sendiri di https://web-otp-iframe-demo.stackblitz.io.
Menganotasi asal terikat ke pesan teks SMS
Jika WebOTP API dipanggil dari dalam iframe, pesan teks SMS harus menyertakan asal frame teratas yang diawali dengan @
, diikuti dengan OTP yang diawali dengan #
yang diikuti dengan asal iframe yang didahului dengan @
.
@shop.example #123456 @bank.exmple
Mengonfigurasi Kebijakan Izin
Untuk menggunakan WebOTP di iframe lintas origin, penyemat harus memberikan akses ke API ini melalui kebijakan izin otp-credentials untuk menghindari perilaku yang tidak diinginkan. Secara umum, ada dua cara untuk mencapai sasaran ini:
- melalui Header HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- melalui atribut
allow
iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Lihat contoh lain tentang cara menentukan kebijakan izin .
Peringatan
Tingkat sarang
Saat ini Chrome hanya mendukung panggilan WebOTP API dari iframe lintas origin yang memiliki tidak lebih dari satu origin unik dalam rantai ancestor-nya. Dalam skenario berikut:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
menggunakan WebOTP di b.com didukung tetapi menggunakannya di c.com tidak.
Perhatikan bahwa skenario berikut juga tidak didukung karena kurangnya permintaan dan kompleksitas UX.
- a.com -> b.com -> a.com (memanggil WebOTP API)
Interoperabilitas
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, segera setelah
SMS yang berisi format kode sekali pakai yang terikat origin tiba dengan origin
yang cocok, keyboard akan menyarankan untuk memasukkan OTP ke kolom input.
Mulai April 2021, Safari mendukung iframe dengan format SMS unik menggunakan
%
.
Namun, karena diskusi spesifikasi diakhiri dengan @
, kami berharap
implementasi format SMS yang didukung akan menyatu.
Masukan
Masukan Anda sangat berharga untuk meningkatkan kualitas WebOTP API. Jadi, lanjutkan dan cobalah dan beri tahu kami pendapat Anda.
Referensi
- Memverifikasi nomor telepon di web dengan Web OTP API
- Praktik terbaik formulir OTP SMS
- API WebOTP
- Kode sekali pakai yang terikat origin yang dikirimkan melalui SMS
Foto oleh rupixen.com di Unsplash