Memverifikasi nomor telepon di web dengan WebOTP API

Membantu pengguna dengan OTP yang diterima melalui SMS

Apa itu WebOTP API?

Saat ini, sebagian besar orang di dunia memiliki perangkat seluler dan developer biasanya menggunakan nomor telepon sebagai ID untuk pengguna layanan mereka.

Ada berbagai cara untuk memverifikasi nomor telepon, tetapi sandi sekali pakai yang dibuat secara acak (OTP) yang dikirim melalui SMS adalah salah satu metode yang paling umum. Dengan mengirimkan kode ini kembali ke server developer, Anda akan menunjukkan kontrol atas nomor telepon.

Ide ini sudah di-deploy dalam banyak skenario untuk mencapai:

  • Nomor telepon sebagai ID untuk pengguna. Saat mendaftar layanan baru, beberapa situs meminta nomor telepon, bukan alamat email, dan menggunakannya sebagai ID akun.
  • Verifikasi dua langkah. Saat login, situs akan meminta kode sekali pakai yang dikirim melalui SMS selain sandi atau faktor pengetahuan lainnya untuk keamanan tambahan.
  • Konfirmasi pembayaran. Saat pengguna melakukan pembayaran, meminta kode sekali pakai yang dikirim melalui SMS dapat membantu memverifikasi niat pengguna tersebut.

Proses saat ini menimbulkan hambatan bagi pengguna. Menemukan OTP dalam pesan SMS, lalu menyalin dan menempelkannya ke formulir merupakan hal yang rumit, sehingga dapat menurunkan rasio konversi dalam perjalanan penting pengguna. Easing ini telah menjadi permintaan lama untuk web dari banyak developer global terbesar. Android memiliki API yang melakukan hal ini. Begitu juga iOS dan Safari.

WebOTP API memungkinkan aplikasi Anda menerima pesan berformat khusus yang terikat ke domain aplikasi. Dari sini, Anda bisa mendapatkan OTP secara terprogram dari pesan SMS dan memverifikasi nomor telepon untuk pengguna dengan lebih mudah.

Lihat penerapannya

Misalkan seorang pengguna ingin memverifikasi nomor teleponnya dengan sebuah situs. Situs akan mengirim pesan teks kepada pengguna melalui SMS dan pengguna memasukkan OTP dari pesan tersebut untuk memverifikasi kepemilikan nomor telepon tersebut.

Dengan WebOTP API, langkah-langkah ini dapat dilakukan semudah sekali ketuk bagi pengguna, seperti yang ditunjukkan dalam video. Saat pesan teks masuk, sheet bawah akan muncul dan meminta pengguna untuk memverifikasi nomor teleponnya. Setelah mengklik tombol Verifikasi di sheet bawah, browser akan menempelkan OTP ke formulir dan formulir akan dikirim tanpa perlu menekan Continue.

Seluruh proses digambarkan dalam gambar di bawah.

Diagram WebOTP API

Coba demonya sendiri. Alat ini tidak meminta nomor telepon Anda atau mengirimkan SMS ke perangkat Anda, tetapi Anda dapat mengirimkannya dari perangkat lain dengan menyalin teks yang ditampilkan dalam demo. Cara ini berfungsi karena tidak masalah siapa pengirimnya saat menggunakan WebOTP API.

  1. Buka https://web-otp.glitch.me di Chrome 84 atau yang lebih baru di perangkat Android.
  2. Kirim pesan teks SMS berikut ke ponsel Anda dari ponsel lain.
Your OTP is: 123456.

@web-otp.glitch.me #12345

Apakah Anda menerima SMS dan melihat perintah untuk memasukkan kode ke area input? Begitulah cara kerja WebOTP API bagi pengguna.

Penggunaan WebOTP API terdiri dari tiga bagian:

  • Tag <input> yang dianotasi dengan benar
  • JavaScript di aplikasi web
  • Teks pesan terformat yang dikirim melalui SMS.

Saya akan membahas tag <input> terlebih dahulu.

Anotasikan tag <input>

WebOTP sendiri berfungsi tanpa anotasi HTML, tetapi untuk kompatibilitas lintas browser, sebaiknya Anda menambahkan autocomplete="one-time-code" ke tag <input> tempat pengguna mungkin harus memasukkan OTP.

Hal ini memungkinkan Safari 14 atau yang lebih baru menyarankan agar pengguna mengisi otomatis kolom <input> dengan OTP saat mereka menerima SMS dengan format yang dijelaskan dalam Memformat pesan SMS meskipun tidak mendukung WebOTP.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

Menggunakan WebOTP API

Karena WebOTP sederhana, cukup salin dan tempel kode berikut untuk fungsinya. Saya akan memandu Anda melalui apa yang terjadi.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Deteksi fitur

Deteksi fitur sama seperti banyak API lainnya. Memproses peristiwa DOMContentLoaded akan menunggu hingga hierarki DOM siap untuk membuat kueri.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

Memproses OTP

WebOTP API sendiri cukup sederhana. Gunakan navigator.credentials.get() untuk mendapatkan OTP. WebOTP menambahkan opsi otp baru ke metode tersebut. Elemen ini hanya memiliki satu properti: transport, yang nilainya harus berupa array dengan string 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Tindakan ini memicu alur izin browser saat pesan SMS tiba. Jika izin diberikan, promise yang ditampilkan akan di-resolve dengan objek OTPCredential.

Konten objek OTPCredential yang diperoleh

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

Selanjutnya, teruskan nilai OTP ke kolom <input>. Mengirimkan formulir secara langsung akan menghilangkan langkah yang mengharuskan pengguna mengetuk tombol.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

Membatalkan pesan

Jika pengguna memasukkan OTP secara manual dan mengirimkan formulir, Anda dapat membatalkan panggilan get() menggunakan instance AbortController di objek options.

JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

Memformat pesan SMS

API itu sendiri seharusnya terlihat cukup sederhana, tetapi ada beberapa hal yang harus Anda ketahui sebelum menggunakannya. Pesan harus dikirim setelah navigator.credentials.get() dipanggil dan harus diterima di perangkat tempat get() dipanggil. Terakhir, pesan harus mematuhi pemformatan berikut:

  • Pesan diawali dengan teks (opsional) yang dapat dibaca manusia, yang berisi string alfanumerik empat hingga sepuluh karakter dengan minimal satu angka yang menyisakan baris terakhir untuk URL dan OTP.
  • Bagian domain URL situs yang memanggil API harus didahului dengan @.
  • URL harus berisi tanda pagar ('#') yang diikuti dengan OTP.

Contoh:

Your OTP is: 123456.

@www.example.com #123456

Berikut ini contoh yang buruk:

Contoh Teks SMS yang salah format Mengapa ini tidak berhasil
Here is your code for @example.com #123456 @ diharapkan menjadi karakter pertama dari baris terakhir.
Your code for @example.com is #123456 @ diharapkan menjadi karakter pertama dari baris terakhir.
Your verification code is 123456

@example.com\t#123456
Satu spasi diharapkan antara @host dan #code.
Your verification code is 123456

@example.com  #123456
Satu spasi diharapkan antara @host dan #code.
Your verification code is 123456

@ftp://example.com #123456
Skema URL tidak dapat disertakan.
Your verification code is 123456

@https://example.com #123456
Skema URL tidak dapat disertakan.
Your verification code is 123456

@example.com:8080 #123456
Port tidak dapat disertakan.
Your verification code is 123456

@example.com/foobar #123456
Jalur tidak dapat disertakan.
Your verification code is 123456

@example .com #123456
Tidak ada spasi kosong di domain.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456
Tidak ada karakter terlarang di domain.
@example.com #123456

Mambo Jumbo
@host dan #code diharapkan menjadi baris terakhir.
@example.com #123456

App hash #oudf08lkjsdf834
@host dan #code diharapkan menjadi baris terakhir.
Your verification code is 123456

@example.com 123456
# tidak ada.
Your verification code is 123456

example.com #123456
@ tidak ada.
Hi mom, did you receive my last text @ dan # tidak ada.

Demo

Coba berbagai pesan dengan demo: https://web-otp.glitch.me

Anda juga dapat melakukan fork dan membuat versi: https://glitch.com/edit/#!/web-otp.

Gunakan WebOTP dari iframe lintas origin

Memasukkan OTP SMS ke iframe lintas origin biasanya digunakan untuk konfirmasi pembayaran, terutama dengan 3D Secure. Dengan format umum untuk mendukung iframe lintas origin, WebOTP API mengirimkan OTP yang terikat ke origin bertingkat. 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.

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.
Cara kerja WebOTP API dalam iframe.

Anda dapat mencoba demonya 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 # dan asal iframe yang didahului dengan @ di baris terakhir.

Your verification code is 123456

@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 lainnya tentang cara menentukan kebijakan izin .

Gunakan WebOTP di desktop

Di Chrome, WebOTP mendukung pemrosesan SMS yang diterima di perangkat lain untuk membantu pengguna menyelesaikan verifikasi nomor telepon di desktop.

WebOTP API di desktop.

Kemampuan ini mengharuskan pengguna untuk login ke Akun Google yang sama di Chrome desktop dan Chrome Android.

Developer harus menerapkan WebOTP API di situs desktopnya dengan cara yang sama seperti di situs selulernya, tetapi tidak memerlukan trik khusus.

Pelajari detail selengkapnya di Memverifikasi nomor telepon di desktop menggunakan WebOTP API.

FAQ

Dialog tidak muncul meskipun saya mengirim pesan dengan format yang benar. Apa yang salah?

Ada beberapa peringatan saat menguji API:

  • Jika nomor telepon pengirim disertakan dalam daftar kontak penerima, API ini tidak akan dipicu karena desain SMS User Consent API yang mendasarinya.
  • Jika Anda menggunakan profil kerja di perangkat Android dan WebOTP tidak berfungsi, coba instal dan gunakan Chrome di profil pribadi Anda (yaitu profil yang sama tempat Anda menerima pesan SMS).

Periksa kembali formatnya untuk melihat apakah SMS Anda diformat dengan benar.

Apakah API ini kompatibel di antara browser yang berbeda?

Chromium dan WebKit menyepakati format pesan teks SMS dan Apple mengumumkan dukungan Safari untuknya mulai iOS 14 dan macOS Big Sur. Meskipun Safari tidak mendukung WebOTP JavaScript API, dengan menganotasi elemen input dengan autocomplete=["one-time-code"], keyboard default akan otomatis menyarankan agar Anda memasukkan OTP jika pesan SMS sesuai dengan formatnya.

Apakah aman menggunakan SMS sebagai cara untuk mengautentikasi?

Meskipun OTP SMS berguna untuk memverifikasi nomor telepon saat nomor tersebut pertama kali diberikan, verifikasi nomor telepon melalui SMS harus digunakan dengan hati-hati untuk autentikasi ulang karena nomor telepon dapat dibajak dan didaur ulang oleh operator. WebOTP adalah mekanisme pemulihan dan autentikasi ulang yang mudah, tetapi layanan harus menggabungkannya dengan faktor tambahan, seperti tantangan pengetahuan, atau menggunakan Web Authentication API untuk autentikasi yang kuat.

Di mana saya dapat melaporkan bug dalam implementasi Chrome?

Apakah Anda menemukan bug pada implementasi Chrome?

  • Laporkan bug di https://new.crbug.com. Sertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan tetapkan Komponen ke Blink>WebOTP.

Bagaimana cara membantu fitur ini?

Apakah Anda berencana menggunakan WebOTP API? Dukungan publik Anda membantu kami memprioritaskan fitur, dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut. Kirim tweet ke @ChromiumDev menggunakan hashtag #WebOTP dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Referensi