Halaman ini diterjemahkan oleh Cloud Translation API.

Memverifikasi nomor telepon di web dengan WebOTP API

Membantu pengguna dengan OTP yang diterima melalui SMS

Eiji Kitamura

Apa itu WebOTP API?

Saat ini, kebanyakan orang di dunia memiliki perangkat seluler dan pengembang adalah umumnya menggunakan nomor telepon sebagai tanda pengenal untuk pengguna layanan mereka.

Ada berbagai cara untuk memverifikasi nomor telepon, tetapi {i>password<i} sekali pakai (OTP) yang dikirim melalui SMS adalah salah satu yang paling umum. Mengirim kode ini kembali ke server pengembang menunjukkan kontrol nomor telepon tersebut.

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

Nomor telepon sebagai ID untuk pengguna. Saat mendaftar untuk layanan pelanggan, beberapa situs web meminta nomor telepon alih-alih alamat email dan menggunakannya sebagai pengidentifikasi akun.
Verifikasi dua langkah. Saat login, situs akan meminta kode sekali pakai dikirim melalui SMS dengan tambahan sandi atau faktor pengetahuan lain untuk keamanan.
Konfirmasi pembayaran. Saat pengguna melakukan pembayaran, meminta kode sekali pakai yang dikirim melalui SMS dapat membantu memverifikasi maksud orang tersebut.

Proses saat ini menimbulkan hambatan bagi pengguna. Menemukan OTP dalam SMS pesan ini, maka menyalin dan menempelkannya ke formulir akan merepotkan, menurunkan tingkat konversi dalam perjalanan penting pengguna. Easing ini sudah lama ada untuk web dari banyak pengembang 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 Anda. Dari sini, Anda bisa mendapatkan OTP secara terprogram dari SMS dan memverifikasi nomor telepon untuk pengguna dengan lebih mudah.

Lihat penerapannya

Katakanlah seorang pengguna ingin memverifikasi nomor teleponnya dengan sebuah situs. Situs mengirimkan pesan teks ke pengguna melalui SMS dan pengguna memasukkan OTP dari untuk memverifikasi kepemilikan nomor telepon.

Dengan WebOTP API, langkah-langkah ini semudah satu ketukan bagi pengguna, yang ditunjukkan dalam video. Saat pesan teks masuk, sheet bawah akan muncul dan meminta pengguna untuk memverifikasi nomor telepon mereka. Setelah mengklik tombol Verifikasi di sheet bawah, browser akan menempelkan OTP ke formulir, formulir akan dikirim tanpa pengguna perlu menekan Lanjutkan.

Keseluruhan proses tersebut digambarkan dalam gambar di bawah ini.

Coba demo Anda sendiri. Asisten tidak meminta nomor telepon Anda atau kirim SMS ke perangkat Anda, tapi Anda juga dapat mengirimkannya perangkat lain dengan menyalin teks yang ditampilkan di demo. Cara ini berhasil karena tidak masalah siapa pengirimnya saat menggunakan WebOTP API.

Buka https://web-otp.glitch.me di Chrome 84 atau nanti di perangkat Android.
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 untuk pengguna.

Penggunaan WebOTP API terdiri dari tiga bagian:

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

Saya akan membahas tag <input> terlebih dahulu.

Anotasi tag `<input>`

WebOTP sendiri berfungsi tanpa anotasi HTML apa pun, tetapi untuk lintas browser kompatibilitas mundur, saya sangat menyarankan Anda menambahkan autocomplete="one-time-code" ke tag <input> di mana pengguna akan memasukkan OTP.

Tindakan ini memungkinkan Safari 14 atau yang lebih baru menyarankan agar pengguna mengisi otomatis <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 akan melakukan pekerjaan. Aku akan memandumu 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. Mendengarkan Peristiwa DOMContentLoaded akan menunggu hierarki DOM siap dikueri.

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');
    …
  });
}

Proses OTP

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

JavaScript

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

Tindakan ini akan memicu alur izin browser saat pesan SMS masuk. Jika izin akses adalah 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 mengirim formulir, Anda dapat membatalkan Panggilan get() dengan 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 pengguna sebelum menggunakannya. Pesan harus dikirim setelah navigator.credentials.get() dipanggil dan harus diterima di perangkat di mana get() dipanggil. Terakhir, pesan harus mematuhi hal-hal berikut pemformatan:

Pesan dimulai dengan teks (opsional) yang dapat dibaca manusia yang berisi empat hingga sepuluh string alfanumerik karakter dengan sedikitnya satu angka yang keluar dari baris terakhir untuk URL dan OTP.
Bagian domain URL situs yang memanggil API harus didahului paling lambat @.
URL harus berisi tanda pagar ('#') yang diikuti dengan OTP.

Contoh:

Your OTP is: 123456.

@www.example.com #123456

Berikut adalah 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 menyalinnya 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 pembayaran konfirmasi, terutama dengan 3D Secure. Memiliki format umum untuk mendukung iframe lintas origin, WebOTP API akan mengirimkan OTP yang terikat dengan origin bertingkat. Contoh:

Pengguna mengunjungi shop.example untuk membeli sepasang sepatu dengan kartu kredit.
Setelah memasukkan nomor kartu kredit, penyedia jasa pembayaran terintegrasi akan menampilkan formulir dari bank.example dalam iframe yang meminta pengguna memverifikasi nomor telepon Anda untuk checkout yang cepat.
bank.example mengirim SMS yang berisi OTP kepada pengguna sehingga dia dapat masukkan untuk memverifikasi identitas mereka.

Untuk menggunakan WebOTP API dari dalam iframe lintas origin, Anda perlu melakukan dua hal:

Beri anotasi pada asal frame bagian atas dan asal iframe di teks SMS untuk membuat pesan email baru.
Konfigurasikan kebijakan izin untuk mengizinkan iframe lintas origin menerima OTP langsung dari pengguna.

Cara kerja WebOTP API dalam iframe.

Anda dapat mencoba demonya di https://web-otp-iframe-demo.stackblitz.io.

Menganotasi origin terikat ke pesan teks SMS

Ketika 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 didahului dengan @ di baris terakhir.

Your verification code is 123456

@shop.example #123456 @bank.exmple

Mengonfigurasi Kebijakan Izin

Untuk menggunakan WebOTP dalam iframe lintas origin, sematan harus memberikan akses ke API melalui kebijakan izin otp-credential untuk menghindari hal yang tidak diinginkan perilaku model. 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 .

Catatan: Saat ini Chrome hanya mendukung panggilan WebOTP API dari iframe lintas origin yang tidak lebih dari satu asal unik dalam rantai ancestornya. Di kolom 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 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)

Menggunakan WebOTP di desktop

Di Chrome, WebOTP mendukung proses mendengarkan 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 Android Chrome.

Yang harus dilakukan pengembang adalah menerapkan WebOTP API di situs web desktop mereka, dengan cara yang sama seperti yang mereka lakukan di situs web seluler mereka, tetapi tidak ada trik khusus yang tidak diperlukan.

Pelajari detail lebih lanjut 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 hal yang harus diwaspadai saat menguji API:

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

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

Apakah API ini kompatibel dengan browser yang berbeda?

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

Apakah aman menggunakan SMS sebagai cara untuk mengautentikasi?

Meskipun OTP SMS berguna untuk memverifikasi nomor telepon ketika nomor tersebut pertama kali verifikasi nomor telepon melalui SMS harus digunakan dengan hati-hati untuk otentikasi ulang karena nomor telepon dapat dibajak dan didaur ulang oleh operator. WebOTP adalah mekanisme autentikasi ulang dan pemulihan yang nyaman, tetapi layanan harus menggabungkannya dengan faktor tambahan, seperti tantangan pengetahuan, atau menggunakan Web Authentication API untuk otentikasi 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 sebanyak mungkin detail, instruksi sederhana untuk reproduksi, dan tetapkan Komponen ke Blink>WebOTP.

Bagaimana cara membantu fitur ini?

Anda berencana menggunakan WebOTP API? Dukungan publik Anda membantu kami memprioritaskan baru, dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung mereka. Kirim tweet ke @ChromiumDev menggunakan hashtag #WebOTP dan beri tahu kami tempat serta cara Anda menggunakannya.

Memverifikasi nomor telepon di web dengan WebOTP API

Apa itu WebOTP API?

Lihat penerapannya

Anotasi tag <input>

Menggunakan WebOTP API

Deteksi fitur

Proses OTP

Membatalkan pesan

Memformat pesan SMS

Demo

Gunakan WebOTP dari iframe lintas origin

Menganotasi origin terikat ke pesan teks SMS

Mengonfigurasi Kebijakan Izin

Menggunakan WebOTP di desktop

FAQ

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

Apakah API ini kompatibel dengan browser yang berbeda?

Apakah aman menggunakan SMS sebagai cara untuk mengautentikasi?

Di mana saya dapat melaporkan bug dalam implementasi Chrome?

Bagaimana cara membantu fitur ini?

Resource

Anotasi tag `<input>`