Peningkatan pendaftaran kunci sandi Amedia sebesar 100% menggunakan WebOTP

Henning Haaland Kulander

Yu Tsuno

Dipublikasikan: 30 Juni 2026

Amedia adalah penerbit media editorial lokal terbesar di Norwegia, yang mengelola lebih dari 100 judul surat kabar dan menjangkau lebih dari 2 juta pembaca setiap hari. Untuk memberikan pengalaman yang terpadu dan lancar, Amedia menggunakan aID, solusi identitas digital internal mereka. Sistem akun gabungan berbasis standar ini tidak hanya memberikan akses kepada pengguna ke seluruh jaringan Amedia, tetapi juga telah diadopsi oleh surat kabar lain di Norwegia dan Denmark.

Tantangan: Memperkenalkan kunci sandi kepada basis pengguna yang beragam

Untuk Amedia, proses login adalah gerbang menuju konten mereka. Setiap detik gesekan secara langsung memengaruhi jumlah pembaca. Meskipun sandi biasa dan autentikasi 2 langkah (2FA) berbasis SMS terkenal rumit bagi pengguna yang sering bepergian, beralih langsung ke kunci sandi menimbulkan hambatan yang tidak terduga: ketidakpahaman.

Karena aID sering kali merupakan pengalaman pertama pengguna dengan kunci sandi, perubahan mendadak pada perintah biometrik yang tidak dikenal menyebabkan keraguan. Amedia menyadari bahwa mereka tidak bisa hanya men-deploy teknologi: mereka harus membantu pengguna memahami cara menggunakan kunci sandi.

Solusi: Alur WebOTP dan Kunci Sandi gabungan

Alih-alih memaksa pengguna memilih antara kebiasaan lama (SMS) dan konsep yang sama sekali asing (kunci sandi), Amedia menggabungkannya menjadi satu pengalaman aktivasi yang lancar. Mereka menggunakan WebOTP API untuk menyederhanakan proses verifikasi SMS yang sudah dikenal sekaligus menyiapkan infrastruktur untuk login tanpa sandi di backend secara diam-diam.

1. Pendaftaran lancar di seluruh platform

Saat mendaftar ke aID, pengguna akan memasukkan nama, nomor telepon, dan email mereka. Kemudian, Amedia akan mengirimkan Sandi Sekali Pakai (OTP) menggunakan SMS. Amedia secara khusus mengandalkan OTP SMS, bukan email, karena memiliki lebih dari satu nomor telepon jarang terjadi di Skandinavia, dan nomor dapat di-port dengan lancar saat beralih penyedia layanan seluler. Stabilitas ini menjadikan nomor telepon sebagai ID utama yang andal untuk login dan titik data yang konsisten untuk membuat profil pengguna yang diperluas. Daripada memaksa pengguna keluar dari browser, membuka aplikasi pesan, menghafal kode, dan mengetiknya, Amedia menggunakan WebOTP API. Di browser seluler yang didukung, hal ini akan memicu perintah panel bawah yang memungkinkan pengguna cukup mengetuk Verifikasi. Browser akan otomatis mengambil OTP dari SMS dan mengirimkan formulir.

Selain itu, Amedia memperbarui pengiriman SMS mereka untuk menggunakan format pesan terikat asal yang terstandardisasi (misalnya, @www.aid.no #123456) , sehingga memungkinkan login tanpa hambatan di seluruh ekosistem yang lebih luas. Standar ini tidak hanya mendukung WebOTP API di browser seperti Chrome, Opera, dan Vivaldi di Android dan desktop, tetapi juga mengaktifkan fitur autocomplete="one-time-code" Safari dengan lancar. Hasilnya, pengguna di seluruh platform seluler dan desktop mendapatkan alur OTP yang aman dan otomatis tanpa memerlukan logika backend khusus platform. Lihat Praktik terbaik formulir OTP SMS untuk mempelajari lebih lanjut.

// Detect feature support using OTPCredential availability
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 => {
      // Automatically fill the input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error('WebOTP error:', err);
    });
  });
}

2. Pendaftaran kunci sandi langsung

Sebelumnya, setelah pengguna menyelesaikan verifikasi WebOTP, Amedia akan memberi mereka pilihan: membuat sandi reguler atau menyiapkan kunci sandi. Dapat diprediksi, saat menghadapi istilah teknis yang tidak dikenal, sebagian besar pengguna mengambil jalur yang paling mudah: melewati langkah tersebut sepenuhnya atau kembali menggunakan sandi standar.

Pada pertengahan Februari, tim Amedia mengubah pendekatan mereka. Mereka mengintegrasikan perintah pendaftaran kunci sandi langsung ke alur pasca-verifikasi, bahkan sebelum memberikan pilihan kepada pengguna. Untuk mematuhi persyaratan gestur pengguna yang ketat di browser seperti Chrome dan Safari, Amedia merangkai interaksi dengan lancar. Karena pengguna mengonfirmasi OTP terlebih dahulu, ketukan awal ini berfungsi sebagai gestur pengguna yang diperlukan untuk memanggil perintah navigator.credentials.create() secara langsung. Dengan menjadikan kunci sandi sebagai pengalaman default, bukan setelan opsional, Amedia langsung menggandakan rasio pendaftaran yang berhasil.

Meskipun perintah langsung ini terbukti sangat efektif, tim mencoba menyederhanakan pengalaman lebih lanjut menggunakan "pembuatan bersyarat", mekanisme yang membuat kunci sandi sepenuhnya di latar belakang tanpa memerlukan tindakan langsung pengguna. Namun, mereka menghadapi kendala teknis: pembuatan bersyarat memerlukan login sebelumnya menggunakan sandi valid yang disimpan di pengelola sandi. Karena alur WebOTP Amedia sepenuhnya tanpa sandi, alur ini tidak memenuhi kriteria keamanan ini. Untuk mengatasi batasan ini, Amedia kini mencadangkan pembuatan bersyarat hanya untuk alur login dua faktor reguler (sandi dan kode OTP), sekaligus menggunakan gestur pengguna yang dirantai untuk aktivasi tanpa sandi.

Untuk memastikan pengalaman yang andal, sistem menggunakan alur pendaftaran standar. Tindakan ini akan memicu dialog UI browser tempat sistem meminta UI pendaftaran kunci sandi browser secara aman. Pengguna membuat kunci sandi menggunakan kunci layar perangkatnya (biometrik atau PIN). Dengan menggabungkan hak ini setelah WebOTP, pengguna dapat menyelesaikan penyiapan tanpa perlu mencari tahu sandi.

// Triggered immediately after successful WebOTP verification
async function registerPasskey(creationOptionsFromServer) {
  try {
    const credential = await navigator.credentials.create({
      publicKey: {
        ...creationOptionsFromServer,
        authenticatorSelection: {
          residentKey: "required",
          userVerification: "required"
        }
      }
    });

    // Send the new credential to the server for registration
    await sendCredentialToServer(credential);
  } catch (error) {
    console.error("Passkey registration failed", error);
  }
}

3. Login berikutnya yang cepat

Pada kunjungan berikutnya pengguna ke publikasi Amedia di perangkat yang sama, aID akan otomatis memicu login kunci sandi. Jika pengguna berinteraksi dengan halaman sebelum dialog otomatis muncul, atau jika dialog otomatis ditutup, sistem akan menggunakan isi otomatis formulir kunci sandi dengan baik.

Hal ini membuat proses login menjadi cepat, karena pengguna hanya perlu berinteraksi dengan perintah browser/OS atau saran isi otomatis keyboard untuk memilih kunci sandi mereka, sehingga sepenuhnya melewati entri formulir manual.

// Triggering conditional UI for autofill suggestions
async function authenticateWithPasskey(requestOptionsFromServer) {
  try {
    const credential = await navigator.credentials.get({
      publicKey: requestOptionsFromServer,
      mediation: "conditional" // Enables autofill integration
    });

    // Authenticate the user on the server
    await verifyAssertionWithServer(credential);
  } catch (error) {
    console.error("Passkey authentication failed", error);
  }
}

Dampak: Penggabungan untuk adopsi tanpa hambatan

Dengan menginovasi alur aktivasi, Amedia secara signifikan mengurangi hambatan bagi pembaca baru dan lama. Kombinasi WebOTP dan kunci sandi menghasilkan peningkatan yang jelas dalam pengoperasian dan pengalaman:

• Pendaftaran yang jauh lebih cepat: Waktu keseluruhan yang diperlukan untuk membuat akun aID baru berkurang secara signifikan karena entri WebOTP otomatis dan penghapusan total pembuatan sandi secara manual.
• 48% pengguna baru membuat kunci sandi: Dengan meminta pembuatan kunci sandi segera setelah verifikasi WebOTP, Amedia mencapai rasio konversi yang sangat tinggi untuk pendaftaran kunci sandi, yang menunjukkan peningkatan sebesar 100% dibandingkan alur aktivasi berbasis pilihan sebelumnya.
• Login 82% lebih cepat: Pengguna yang kembali melakukan autentikasi lebih dari lima kali lebih cepat menggunakan kunci sandi dibandingkan dengan metode alternatif seperti sandi atau entri OTP manual.

Pada akhirnya, meskipun ekosistem digital yang lebih luas terus menghadapi tantangan seputar terminologi kunci sandi dan edukasi pengguna, pendekatan proaktif Amedia memberikan cetak biru yang berhasil. Mengintegrasikan kunci sandi ke dalam layanan frekuensi tinggi yang digunakan oleh jutaan orang setiap hari menetapkan standar baru untuk akses lancar di industri media, memberikan upgrade keamanan permanen tanpa mengorbankan retensi pengguna.