Autofill OTP SMS: Format untuk Android, iOS, dan Web

Your Example code is 123456.

@example.com #123456

Bagaimana autofill OTP bekerja di web?

Tambahkan atributnya dulu, lalu JavaScript untuk browser yang mendukungnya.

<input type="text" inputmode="numeric"
       autocomplete="one-time-code" name="otp" />

Dokumentasi Chrome menyarankan atribut ini demi kompatibilitas lintas browser, dan menyebutkan Safari memakainya untuk menyarankan kode dari SMS yang diformat dengan benar meskipun tidak memiliki JavaScript API WebOTP.

Untuk Chrome di Android, panggil WebOTP dengan transport sms. API ini memerlukan origin aman (HTTPS), dan AbortController memungkinkan Anda membatalkan permintaan yang tertunda jika pengguna mengetik kode sendiri.

if ("OTPCredential" in window) {
  const ac = new AbortController();
  const form = document.querySelector("form");
  const input = document.querySelector("input[autocomplete=one-time-code]");

  form.addEventListener("submit", () => ac.abort());

  navigator.credentials
    .get({ otp: { transport: ["sms"] }, signal: ac.signal })
    .then((otp) => {
      input.value = otp.code;
      form.submit();
    })
    .catch(() => {}); // user dismissed, or no matching SMS
}

SMS harus mengikuti format terikat origin dalam spesifikasi WICG dan panduan Chrome: kode empat sampai sepuluh karakter alfanumerik dengan sedikitnya satu angka sebelum baris terakhir, lalu baris terakhir yang diawali @, host, satu spasi, dan # diikuti kode. Host tidak boleh mengandung spasi.

Bisakah satu SMS bekerja di Android, iOS, dan web?

Sering bisa, karena aturannya kompatibel. Letakkan teks yang mudah dibaca lebih dulu, hash Android di baris di atas bagian akhir, dan baris terikat domain paling akhir. Susunan ini dibuat dari aturan yang terdokumentasi, bukan jaminan vendor, jadi ujilah.

Your Example code is 483921. Do not share it.
Ab3dE+9xYz1
@example.com #483921

Alasan urutan ini: Apple dan spesifikasi web sama-sama menginginkan domain dan kode di baris terakhir. Google mewajibkan hash 11 karakter di suatu tempat dalam pesan, tetapi pada halaman yang kami periksa tidak menetapkan posisinya. Contoh di atas berukuran 78 byte dalam karakter Latin biasa, jauh di dalam batas 140 byte.

Daftar periksa sebelum rilis:

1. Kode berupa satu token, terpisah jelas dari angka lain dalam teks.
2. Domain di baris terakhir cocok dengan situs dan associated domain aplikasi.
3. Panjang total dalam 140 byte untuk varian Retriever.
4. Hash cocok dengan kunci penandatanganan build yang diuji.
5. Diuji di ponsel dari setiap platform, pada operator yang benar-benar Anda gunakan untuk mengirim.

Bagaimana dengan teks Arab dan Unicode?

Pertahankan kode dan dua bagian yang dapat dibaca mesin dalam teks polos. Batas Google dalam byte, dan SMS Unicode memuat jauh lebih sedikit karakter daripada GSM-7: 70 berbanding 160 dalam satu segmen (lihat batas karakter SMS dan Unicode). Kalimat Arab cepat menghabiskan jatah itu, dan satu karakter non-GSM saja mengubah seluruh pesan menjadi Unicode.

Pendekatan aman: tulis kode dengan angka Latin, pertahankan @domain #code dalam ASCII, dan buat teks Arab tetap singkat. Kami tidak menemukan dokumentasi resmi tentang autofill kode yang ditulis dengan sistem angka lain, jadi kami tidak membahasnya dan menyarankan pengujian sebelum dipakai.

Bagaimana template autentikasi WhatsApp menangani autofill?

Template autentikasi Meta hadir dengan tiga gaya tombol, masing-masing dengan teks isi tetap berbentuk <code> is your verification code.

Dokumentasi Meta juga mencatat bahwa di iOS 26 ke atas, saran keyboard menyediakan autofill tanpa integrasi, dan pengguna di platform tanpa nol ketuk menerima tombol salin kode. Anda dapat mengatur masa berlaku dengan code_expiration_minutes, dan API pratinjau menerima nilai 1 sampai 90 menit. Bandingkan kedua kanal di OTP WhatsApp vs OTP SMS.

Contoh kasus: login aplikasi ride-hailing

"Qafila Rides" (fiktif) memiliki aplikasi Android, aplikasi iOS, dan situs mobile di qafila.example.

1. Aplikasi Android memulai SMS Retriever saat pengguna mengetuk "Kirim kode".
2. Backend membuat kode enam digit yang berlaku beberapa menit, lalu mengirim pesan tiga baris di atas lewat SMS API.
3. Android menyerahkan pesan ke aplikasi. iOS menawarkan kode di atas keyboard. Di situs mobile, Safari menyarankannya dan Chrome mengisinya lewat WebOTP.
4. Server memvalidasi kode sekali saja, menolak pemakaian ulang dan kode kedaluwarsa, serta membatasi laju permintaan.
5. Jika SMS tidak terkonfirmasi dalam batas waktu singkat, backend menawarkan template autentikasi WhatsApp sebagai jalur kedua.

Apa kesalahan yang umum terjadi?

• Kode tidak berdiri sendiri. Angka tambahan (telepon, harga, tanggal) di samping kode mengacaukan deteksi. Gunakan satu kode per pesan.
• Hash salah. Hash mengikuti sertifikat penandatanganan. Hash dari kunci debug tidak cocok dengan build produksi.
• Domain tidak cocok. @example.com harus cocok dengan situs atau associated domain, jika tidak iOS dan WebOTP tidak akan menawarkan kode.
• Baris terakhir rusak. Apa pun setelah #code, spasi yang hilang, atau spasi di dalam domain merusak format.
• Pesan terlalu panjang atau banyak Unicode, sehingga melebihi batas 140 byte Retriever.
• Mendengarkan terlambat. User Consent API mengabaikan pesan yang diterima sebelum API dimulai.
• Menjadikan autofill sebagai keamanan. Autofill hanyalah kemudahan. Tetap validasi di sisi server, kedaluwarsakan kode, batasi percobaan, dan waspadai penipuan SMS pumping.
• Cakupan. Panduan ini membahas perilaku yang terdokumentasi saat penulisan. Aturan platform berubah, jadi periksa sumber yang ditautkan sebelum rilis.

Untuk pilihan kata pesan dan masa berlaku, lihat panduan pesan OTP dan autentikasi.

Bagaimana OmniChannels.ai membantu

OmniChannels.ai mengirim OTP lewat SMS dan WhatsApp melalui konektivitas operator langsung milik BroadNet, sehingga Anda dapat mengontrol teks pesan persis yang menjadi dasar format autofill Anda. Template WhatsApp mencakup autentikasi salin kode, satu ketuk, dan nol ketuk. Fallback antarkanal, misalnya WhatsApp lalu SMS, dikonfigurasi per kasus penggunaan, dan status pengiriman tiba dalam satu format webhook. Lihat dokumentasi SMS API, dokumentasi WhatsApp API, dan solusi OTP.