WebOTP API kini dapat menerima OTP dari dalam iframe.
OTP SMS (sandi sekali pakai) biasanya digunakan untuk memverifikasi nomor telepon, misalnya sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, beralih antara browser dan aplikasi SMS, untuk menyalin dan menempelkan atau memasukkan OTP secara manual, memudahkan pengguna melakukan kesalahan dan menambah hambatan pada pengalaman pengguna.
WebOTP API memberi situs kemampuan untuk mendapatkan sandi sekali pakai secara terprogram dari pesan SMS dan memasukkannya secara otomatis dalam formulir untuk pengguna hanya dengan sekali ketuk tanpa beralih aplikasi. SMS diformat secara khusus dan terikat dengan asal, sehingga mengurangi kemungkinan situs phishing untuk mencuri OTP.
Satu kasus penggunaan yang belum didukung di WebOTP menargetkan origin di dalam iframe. Ini biasanya digunakan untuk konfirmasi pembayaran, terutama dengan 3D Secure. Dengan format umum untuk mendukung iframe lintas origin, WebOTP API kini mengirimkan OTP yang terikat ke origin bertingkat mulai Chrome 91.
Cara kerja WebOTP API
WebOTP API itu sendiri cukup sederhana:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
Pesan SMS harus diformat dengan kode satu kali yang terikat asal.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Perhatikan bahwa di baris terakhir, baris ini berisi origin yang akan terikat dengan didahului dengan
@
, diikuti dengan OTP yang didahului dengan #
.
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 dasar-dasar penggunaan WebOTP di Memverifikasi nomor telepon di web dengan WebOTP API.
Kasus penggunaan iframe lintas-asal
Memasukkan OTP dalam formulir dalam iframe lintas-asal adalah hal yang umum dalam skenario pembayaran. Beberapa penerbit kartu kredit memerlukan langkah verifikasi tambahan untuk memeriksa keaslian pembayar. Ini disebut 3D Secure dan formulir ini 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 untuk memverifikasi nomor telepon mereka untuk checkout cepat. bank.example
mengirimkan SMS yang berisi OTP kepada pengguna sehingga mereka dapat memasukkannya untuk memverifikasi identitas mereka.
Cara menggunakan WebOTP API dari iframe lintas origin
Untuk menggunakan WebOTP API dari dalam iframe lintas origin, Anda perlu melakukan dua hal:
- Anotasikan asal frame atas dan asal iframe dalam pesan teks SMS.
- Konfigurasikan kebijakan izin untuk mengizinkan iframe lintas origin menerima OTP langsung dari pengguna.
Anda dapat mencoba demo sendiri di https://web-otp-iframe-demo.stackblitz.io.
Menambahkan anotasi asal terikat ke pesan teks SMS
Saat WebOTP API dipanggil dari dalam iframe, pesan teks SMS harus
menyertakan origin frame atas yang didahului dengan @
, diikuti dengan OTP yang didahului dengan #
,
diikuti dengan origin iframe yang didahului dengan @
.
@shop.example #123456 @bank.exmple
Mengonfigurasi Kebijakan Izin
Untuk menggunakan WebOTP di iframe lintas origin, penyertakan harus memberikan akses ke API ini melalui kebijakan izin kredensial otp 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 selengkapnya tentang cara menentukan kebijakan izin .
Peringatan
Tingkat bertingkat
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
penggunaan WebOTP di b.com didukung, tetapi penggunaannya di c.com tidak didukung.
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 memiliki 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 diterima 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 menyimpulkan untuk menggunakan @
, kami berharap
implementasi format SMS yang didukung akan berkonvergensi.
Masukan
Masukan Anda sangat berharga untuk membuat WebOTP API menjadi lebih baik. Jadi, coba gunakan dan beri tahu kami pendapat Anda.
Resource
- Memverifikasi nomor telepon di web dengan Web OTP API
- Praktik terbaik formulir OTP SMS
- WebOTP API
- Kode sekali pakai yang terikat origin dan dikirim melalui SMS
Foto oleh rupixen.com di Unsplash