Panduan Integrasi Resmi
Untuk Situs dan Aplikasi Web

fio.js berfungsi pada browser modern yang didukung menggunakan webcam standar atau kamera ponsel, tanpa memerlukan sensor biometrik khusus. Library JavaScript ini tidak bergantung pada framework dan dapat digunakan dengan React, Vue, Angular, Next.js, atau JavaScript biasa.

<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>

<script type="text/javascript">
  /* Buat instance fio.js dengan Public ID */
  const faceio = new faceIO("app-public-id");
</script>

<button onclick="enrollNewUser()">Daftarkan Pengguna Baru</button>
<button onclick="authenticateUser()">Autentikasi Pengguna</button>

<script type="text/javascript">
  const faceio = new faceIO("app-public-id");

  function enrollNewUser() {
    // faceio.enroll() memulai alur pendaftaran
  }

  function authenticateUser() {
    // faceio.authenticate() memulai alur autentikasi
  }

  function handleError(errCode) {
    // Tangani error di sini
  }
</script>

Menjalankan Widget FACEIO untuk mendaftarkan pengguna baru melalui pengenalan wajah. Ini setara dengan pendaftaran tradisional tanpa kata sandi. Jika berhasil, metode ini mengembalikan Promise berisi object userInfo yang memuat Facial ID unik pengguna, timestamp pendaftaran, serta estimasi demografis gender dan usia.

// Buat instance fio.js dengan Public ID aplikasi Anda
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
faceio.enroll({
  "locale": "auto", // Bahasa default pengguna
  "payload": {
      /* Payload yang akan dikaitkan dengan pengguna ini dan dikembalikan pada autentikasi berikutnya. */
      "whoami": 123456, // ID contoh yang dikaitkan dengan pengguna ini
      "email": "john.doe@example.com"
      }
  }).then(userInfo => {
      // Pengguna berhasil didaftarkan 
      alert(
          `Pengguna berhasil didaftarkan. Detail:
           Facial ID unik: ${userInfo.facialId}
           Tanggal pendaftaran: ${userInfo.timestamp}
           Estimasi gender: ${userInfo.details.gender}
           Perkiraan usia: ${userInfo.details.age}`
      );
     console.log(userInfo);
     // Tangani hasil, simpan Facial ID, lalu arahkan ke dasbor
  }).catch(errCode => {
     // Catat error yang terjadi selama pendaftaran
     handleError(errCode);
  })
}

Menjalankan Widget FACEIO untuk memverifikasi pengguna yang sudah terdaftar. Ini setara dengan login tradisional tanpa kata sandi. Jika berhasil, metode ini mengembalikan Promise berisi object userData yang memuat Facial ID pengguna, timestamp autentikasi, dan payload yang dikaitkan saat pendaftaran.

const faceio = new faceIO("app-public-id"); // Inisialisasi dengan Public ID aplikasi Anda
function authenticateUser(){
  faceio.authenticate({
      "locale": "auto" // Bahasa default pengguna
  }).then(userData => {
      console.log("Berhasil, pengguna teridentifikasi")
      // Ambil Facial ID pengguna. Nilainya akan tetap sama
      // pada setiap autentikasi berikutnya yang berhasil. FACEIO menyarankan 
      // penggunaan Facial ID ini untuk mengidentifikasi secara unik 
      // seluruh pengguna terdaftar di backend Anda.
      console.log("Facial ID terkait: " + userData.facialId)
      // Ambil data arbitrer yang sebelumnya dikaitkan dengan pengguna
      // melalui parameter payload pada enroll() saat pendaftaran.
      console.log("Payload: " + JSON.stringify(userData.payload)) // Data dari contoh enroll() di atas
  }).catch(errCode => {
      handleError(errCode)
  })
}

Mereset sesi FACEIO saat ini agar pemanggilan baru ke enroll() atau authenticate() dapat dilakukan pada halaman yang sama tanpa memuat ulang seluruh halaman. Berguna untuk terminal bersama, meja check-in, atau alur lain ketika beberapa orang menggunakan sesi browser yang sama secara berurutan.

Ketika enroll() atau authenticate() gagal, Promise ditolak dengan nilai numerik fioErrCode. Tangani error dengan memeriksa nilai ini di dalam handler .catch(). Untuk restartSession(), periksa nilai boolean yang dikembalikan (true atau false).

Implementasi referensi dengan enroll() dan authenticate() dan penanganan error. Gunakan sebagai titik awal integrasi Anda.

Gunakan panduan komunitas ini untuk mengimplementasikan fio.js dengan React, Vue, Angular, Next.js, atau JavaScript biasa serta meninjau contoh proyek React Native dan Flutter.