Digital Transformation
Web OTP API
TL;DR: Web OTP API adalah API browser yang membaca kode OTP dari SMS lalu mengisinya sendiri ke field verifikasi. User tidak perlu pindah ke aplikasi SMS untuk menyalin kode. Per 2026 API ini hanya jalan di browser berbasis Chromium, tapi format SMS yang sama juga dikenali Safari lewat
autocomplete="one-time-code", jadi satu implementasi melayani keduanya.
Apa itu Web OTP API?
Web OTP API adalah antarmuka resmi browser untuk mengambil kode OTP dari SMS, tanpa user membuka aplikasi SMS dan menyalin kode secara manual. Browser hanya membaca SMS yang berformat khusus dan menyertakan domain origin, sehingga halaman web lain tidak bisa mencuri kode yang bukan miliknya.
Untuk marketer dan pemilik bisnis, Web OTP API relevan di tiga skenario: login one-time-password, verifikasi nomor telepon saat registrasi, dan konfirmasi transaksi. Bersama Passkey dan Magic Link, API ini bagian dari pergeseran menjauh dari password yang mudah lupa.
Cara Kerja Web OTP API
Mekanismenya tiga langkah. Pertama, halaman memanggil navigator.credentials.get dengan opsi otp: { transport: ["sms"] }. Kedua, server mengirim SMS berisi kode plus baris terakhir berformat @domain.com #12345 supaya browser bisa memverifikasi origin. Ketiga, begitu SMS masuk dan formatnya cocok, browser mengisi field yang ditandai autocomplete="one-time-code".
| Komponen | Peran |
|---|---|
| Field input | Wajib pakai autocomplete="one-time-code" |
| Format SMS | Baris terakhir wajib @domain.com #KODE |
| API call | navigator.credentials.get({ otp: { transport: ["sms"] } }) |
| Feature detection | Cek OTPCredential in window sebelum memanggil |
| Fallback | Paste manual untuk browser tanpa dukungan |
Dukungan Browser per 2026
Ini bagian yang paling sering disalahpahami. Web OTP API secara teknis hanya diimplementasi mesin Chromium. Tapi bukan berarti user Safari tidak dapat apa-apa.
| Browser | Mekanisme | Yang perlu Anda lakukan |
|---|---|---|
| Chrome Android | Web OTP API penuh, pengisian otomatis | Panggil API dan format SMS |
| Chrome desktop | Verifikasi lintas perangkat lewat HP Android | Sama, tanpa kode tambahan |
| Safari iOS 14+ | Saran autofill dari autocomplete="one-time-code" | Cukup format SMS dan atribut input |
| Safari macOS | SMS diteruskan dari iOS bila iMessage sync aktif | Sama seperti di atas |
| Firefox | Tidak ada dukungan | Andalkan fallback paste |
Kesimpulan praktisnya: format SMS @domain #kode melayani Chrome dan Safari sekaligus. Jadi biarpun API-nya Chromium saja, memformat SMS dengan benar tetap menguntungkan mayoritas pengguna mobile Indonesia.
Verifikasi di Desktop
Chrome bisa memverifikasi nomor telepon di desktop dengan meminjam HP Android yang login ke akun Google yang sama. SMS masuk ke HP, kode diteruskan ke tab desktop setelah user menyetujui. Berguna untuk alur registrasi yang dimulai di layar besar, misalnya dashboard B2B atau checkout desktop, tanpa memaksa user mengetik ulang kode dari HP.
Kenapa Penting?
Untuk bisnis yang mengandalkan login OTP di e-commerce, fintech, dan aplikasi member, Web OTP API memangkas login dari sekitar 18 sampai 30 detik (pindah ke SMS, salin, kembali, tempel) menjadi di bawah 5 detik. Dampaknya terasa di penyelesaian form dan penurunan form abandonment di halaman checkout atau registrasi.
Dari proyek yang saya tangani, penyebab kegagalan login mobile yang paling sering bukan user lupa password, tapi salah ketik kode saat berpindah aplikasi. Menghapus langkah pindah itu menghapus sumber errornya. Dipasangkan dengan progressive enhancement, user di browser tanpa dukungan tetap bisa login normal.
Kesalahan yang Bikin Gagal
Empat hal ini yang paling sering membuat implementasi tidak jalan padahal kodenya sudah benar:
- Domain di SMS beda dengan domain halaman. Kalau form ada di
app.domain.comtapi SMS menulis@domain.com, browser menolak. Origin harus persis sama. - Format SMS tidak di baris terakhir. Baris
@domain.com #123456wajib jadi baris paling akhir, tanpa teks tambahan sesudahnya. - Lupa
autocomplete="one-time-code". Tanpa atribut ini Safari tidak menyarankan apa-apa, dan Chrome kehilangan target pengisian. - Tidak memanggil
AbortController. Kalau user menyelesaikan verifikasi lewat jalur lain, permintaan OTP yang menggantung harus dibatalkan, kalau tidak akan mengganggu alur berikutnya.
Pertanyaan Umum
Apakah Web OTP API aman dari SMS hijacking?
API ini hanya membaca SMS yang berakhir dengan format @domain #kode, jadi browser memvalidasi origin sebelum mengisi field. Tapi ini melindungi dari pembacaan lintas situs, bukan dari SIM swap. Untuk keamanan menyeluruh, kombinasikan dengan rate limiting di server dan pembatasan jumlah percobaan.
Browser apa saja yang mendukung Web OTP API?
Per 2026, hanya browser berbasis Chromium yang mengimplementasi API-nya. Safari tidak, tapi mengenali format SMS yang sama lewat autocomplete="one-time-code". Firefox tidak mendukung keduanya, jadi fallback paste manual tetap wajib disediakan.
Apakah Web OTP API bisa menggantikan Passkey?
Tidak, keduanya menjawab masalah berbeda. Web OTP menyederhanakan verifikasi berbasis SMS yang secara fundamental masih rentan SIM swap. Passkey menghapus faktor SMS sepenuhnya. Kalau Anda sedang memilih, passkey lebih aman, Web OTP lebih mudah diadopsi user yang belum terbiasa.
Istilah Terkait