Tambahkan FACEIO ke halaman login Anda

Tambahkan autentikasi wajah ke halaman login web dengan alur pendaftaran yang jelas, widget fio.js, pengelolaan akun di backend, dan metode pemulihan alternatif.

Kembali ke Pusat Pengetahuan
Oleh tim engineering FACEIO Diperbarui

Alur praktis integrasi halaman login

FACEIO dapat ditambahkan tanpa mengganti sistem akun yang ada. Pisahkan pendaftaran, autentikasi, dan pengelolaan akun di backend.

Gunakan widget browser untuk kamera, liveness, PIN, dan interaksi pengguna. Tetapkan keputusan akses akhir di backend agar batas autentikasi tetap jelas.

Panduan ini menganggap halaman login sudah tersedia. Jika memulai dari awal, baca panduan awal untuk membuat aplikasi FACEIO dan memperoleh App ID publik dari FACEIO Console ↗.

Langkah implementasi

Ikuti langkah berikut untuk menambahkan FACEIO. Setiap langkah terhubung ke referensi terkait:

  1. Buat aplikasi FACEIO. Buka FACEIO Console, buat aplikasi, lalu salin App ID publik. Pengenal ini digunakan oleh fio.js di browser.
  2. Muat SDK fio.js. Tambahkan tag script fio.js ke halaman login dan pendaftaran. Muat hanya pada halaman yang memerlukan pengambilan wajah.
  3. Daftarkan pengguna baru. Setelah akun dibuat dan persetujuan diperoleh, panggil enroll() untuk mengambil wajah dan membuat Facial ID. Simpan referensi Facial ID pada akun pengguna di backend.
  4. Autentikasi pengguna yang kembali. Panggil authenticate() saat pengguna memilih login wajah atau saat aplikasi memerlukan autentikasi tambahan. SDK mengembalikan hasil ke browser.
  5. Selesaikan login di backend. Kirim Facial ID dan konteks yang diperlukan ke backend, petakan ke akun yang diharapkan, lalu terapkan aturan sesi dan otorisasi. Gunakan CHECKFACIALID hanya untuk memastikan Facial ID masih terdaftar.
  6. Tangani kesalahan dan metode alternatif. Tangkap kode kesalahan fio.js dan berikan panduan percobaan ulang atau metode alternatif seperti kata sandi, OTP, atau dukungan.

Konten halaman login

Untuk pengguna baru

Tampilkan pendaftaran wajah sebagai langkah opsional atau wajib setelah akun dibuat sesuai kebijakan produk. Tampilkan persetujuan sebelum kamera dan tautkan informasi privasi.

Untuk pengguna yang kembali

Tawarkan autentikasi wajah di samping atau sebagai pengganti formulir kata sandi. Gunakan label jelas seperti “Masuk dengan wajah” dan sediakan metode alternatif untuk masalah kamera atau izin.

Untuk pola UX, baca panduan praktik terbaik login dengan pengenalan wajah. Untuk persiapan peluncuran, privasi, persetujuan, dan deployment, gunakan checklist peluncuran dan praktik terbaik privasi.

Pola akun dan sesi backend

Callback browser dari authenticate() mengembalikan hasil autentikasi. Backend tetap bertanggung jawab memilih akun dan menerbitkan sesi:

  1. Terima hasil autentikasi dan konteks permintaan pada endpoint server.
  2. Cari akun yang dipetakan ke Facial ID, bukan ID pengguna dari klien.
  3. Periksa status akun, tenant, tindakan yang diminta, dan kontrol aplikasi lainnya.
  4. Terbitkan token sesi berumur pendek untuk pengguna tersebut.
  5. Catat waktu, Facial ID, App ID, dan hasil tanpa menyimpan media verifikasi, tangkapan wajah, atau hash biometrik.

Gunakan checklist API, referensi REST API, dokumentasi webhooks, dan praktik terbaik keamanan untuk rincian kontrol. Jangan biarkan status klien memilih akun atau memberikan akses sendiri.

Referensi integrasi login

Gunakan dokumentasi FACEIO untuk menerapkan login, menghubungkan Facial IDs ke akun, menerima webhook, dan mengatur aplikasi.

Mulai menggunakan Atur aplikasi FACEIO dan dapatkan pengenal untuk proyek web. Panduan integrasi Hubungkan pendaftaran dan autentikasi ke halaman login. Panduan developer Hubungkan hasil autentikasi ke alur akun dan pemulihan backend. REST API Kelola Facial IDs, payload, PIN, penghapusan, dan pemeriksaan backend. Webhooks Terima peristiwa pendaftaran dan autentikasi di server. FACEIO Console Buat App ID dan kelola pengaturan autentikasi halaman login.

Pertanyaan umum

Apakah login dengan kata sandi harus dihapus?

Tidak. FACEIO dapat berjalan bersama login yang ada. Tawarkan wajah sebagai opsi alternatif atau faktor tambahan dan pertahankan kata sandi selama transisi. Lihat login biometrik untuk aplikasi web untuk pola UX.

Berapa lama waktu yang dibutuhkan untuk menambahkan FACEIO?

Integrasi sisi klien singkat, terutama jika mengikuti panduan awal. Kesiapan produksi juga bergantung pada pengelolaan akun dan sesi backend, penanganan kesalahan, pemulihan, persetujuan, serta pengujian yang dibahas dalam checklist peluncuran.

Framework apa yang didukung fio.js?

fio.js bekerja dengan JavaScript murni, React, Vue, Angular, Next.js, Nuxt, Svelte, dan Ember. Lihat panduan integrasi untuk catatan framework.

Bagaimana menangani pengguna tanpa akses kamera?

Sediakan metode alternatif seperti kata sandi, OTP, atau dukungan. Jangan jadikan wajah satu-satunya cara memulihkan akun tanpa proses terdokumentasi. Panduan praktik terbaik login menjelaskannya.

Panduan terkait

Tambahkan login wajah ke situs Anda

Backend memetakan Facial ID ke akun dan menentukan penerbitan sesi. Lengkapi panduan ini dengan praktik terbaik keamanan, praktik terbaik privasi, dan checklist implementasi. Buat aplikasi di FACEIO Console dan uji seluruh alur di lingkungan Anda.

Buka FACEIO Console Mulai