Mulai menggunakan FACEIO

Buat dan konfigurasikan aplikasi:

1

Buka FACEIO Console ↗.

2

Pada tampilan utama Console, klik Aplikasi Baru. Ini akan membuka Application Wizard.

3

Di Application Wizard, ikuti petunjuk di layar. Masukkan nama aplikasi dan URL kebijakan privasi, lalu pilih Mesin Pengenalan Wajah, wilayah penyimpanan cloud atau penerapan on-premises, opsi keamanan, dan tampilan widget.

Klik untuk melihat Application Wizard

4

Tinjau konfigurasi lalu kirim. Setelah aplikasi dibuat, Anda akan diarahkan ke Application Manager ↗, tempat Anda dapat mengelola aplikasi baru dengan panduan integrasi langkah demi langkah.

1 Impor fio.js ke situs Anda

Tempel cuplikan berikut sebelum tag penutup </body> pada halaman HTML tempat Anda ingin menggunakan fio.js:

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

Cuplikan di atas memuat fio.js secara asinkron. Halaman HTML dasar dapat menginisialisasikan pustaka seperti berikut:

<html>
  <head>
    <title>Login dengan pengenalan wajah</title>
  </head>
  <body>
    <div id="faceio-modal"></div>
    <script src="https://cdn.faceio.net/fio.js"></script>
  </body>
</html>

2 Buat objek faceIO

Untuk menginisialisasikan fio.js, buat objek faceIO() dan masukkan Public ID aplikasi, seperti ditunjukkan berikut. Cuplikan ini juga dapat diletakkan setelah kode impor pada langkah 1. Untuk contoh lengkap, lihat templat HTML.

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

Metode enroll()

• Panggil enroll() pada objek faceIO yang telah diinisialisasi untuk mendaftarkan pengguna baru. Metode ini membuka Widget FACEIO dan memulai pendaftaran wajah dari halaman pendaftaran atau onboarding situs Anda.

• Saat Anda memanggil enroll(), FACEIO Widget akan terbuka, meminta persetujuan dan akses kamera bila diperlukan, lalu menangkap data wajah untuk pendaftaran. Mesin yang dipilih membuat dan mengindeks hash biometrik yang digunakan untuk autentikasi.

• enroll() menerima beberapa parameter opsional, seperti locale untuk bahasa interaksi, permissionTimeout untuk waktu tunggu akses kamera, dan terutama payload, yaitu data bebas yang dapat Anda kaitkan dengan pengguna seperti email, nama, atau ID. Payload ini dikembalikan setelah autentikasi.

• enroll() mengembalikan sebuah Promise yang diselesaikan dengan objek userInfo setelah pendaftaran berhasil. Objek ini berisi Facial ID, waktu pendaftaran, serta perkiraan details.age dan details.gender. Gunakan Facial ID sebagai kunci pencarian akun yang sesuai saat autentikasi berikutnya.

• Jika pengguna menolak akses kamera atau Ketentuan Layanan, Promise akan ditolak dengan kode kesalahan yang sesuai, seperti fioErrCode.PERMISSION_REFUSED atau fioErrCode.TERMS_NOT_ACCEPTED. Lihat bagian Kode Kesalahan untuk daftar lengkap.

• Metode enroll(), parameter, nilai yang dikembalikan, dan penanganan kesalahannya didokumentasikan dalam Panduan Integrasi.

Metode authenticate()

• Panggil authenticate() pada objek faceIO yang telah diinisialisasi untuk mengenali pengguna terdaftar. Gunakan metode ini dari alur login situs web atau aplikasi web Anda.

• Saat Anda memanggil authenticate(), FACEIO Widget akan terbuka, meminta akses kamera bila diperlukan, menjalankan pemeriksaan liveness dan pengenalan wajah yang dikonfigurasi, lalu mengembalikan hasil autentikasi.

• Bergantung pada konfigurasi keamanan aplikasi, setelah pengguna dikenali oleh mesin pengenalan wajah, pengguna mungkin perlu mengonfirmasi PIN Code yang dipilih saat pendaftaran agar metode authenticate() berhasil.

• authenticate() menerima beberapa parameter opsional, termasuk permissionTimeout untuk waktu tunggu akses kamera, locale untuk bahasa interaksi, serta opsi lain yang didokumentasikan di sini.

• authenticate() mengembalikan sebuah Promise yang diselesaikan dengan objek userData setelah identifikasi berhasil. Properti utama meliputi: payload berisi data yang dikaitkan saat pendaftaran dan facialId merupakan pengenal unik pengguna. Keduanya dapat digunakan sebagai kunci pencarian di backend untuk mengambil data pengguna.

• Metode authenticate(), parameter, nilai yang dikembalikan, dan penanganan kesalahannya didokumentasikan dalam Panduan Integrasi.

Mendaftarkan pengguna baru

Pendaftaran pengguna baru yang mengekstrak dan mengindeks fitur wajah setelah memperoleh persetujuandilakukan dengan memanggil enroll():

// Buat objek faceIO dengan Public ID aplikasi
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
  faceio.enroll({
    "locale": "auto", // Bahasa default pengguna
    "payload": {
        /* Payload yang 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}
           Perkiraan gender: ${userInfo.details.gender}
           Perkiraan usia: ${userInfo.details.age}`
        );
       console.log(userInfo);
       // Tangani hasil, simpan Facial ID, lalu alihkan ke dasbor
    }).catch(errCode => {
       // Catat kesalahan yang terjadi saat pendaftaran
       handleError(errCode);
    })
}

• Inisialisasi: Buat objek faceIO dengan Public ID aplikasi. Ganti "app-public-id" dengan Public ID sebenarnya dari FACEIO Console ↗.

• Panggilan pendaftaran: enroll() memulai pendaftaran, meminta persetujuan dan akses kamera bila diperlukan, serta memulai ekstraksi fitur wajah. Parameter payload memungkinkan Anda mengaitkan data dengan pengguna, seperti ID pengguna (whoami) dan alamat email. Payload ini dikembalikan setelah autentikasi.

• Hasil pendaftaran: Setelah pendaftaran berhasil, Promise diselesaikan dengan objek userInfo yang berisi Facial ID, waktu pendaftaran, serta perkiraan details.gender dan details.age. Simpan Facial ID di basis data Anda untuk menghubungkan autentikasi berikutnya dengan pengguna ini.

• Penanganan kesalahan: Tangkap kegagalan pendaftaran dan implementasikan fungsi handleError() untuk menangani setiap kode dengan tepat. Lihat dokumentasi kode kesalahan untuk semua kode yang tersedia.

Mengautentikasi pengguna yang sudah ada

Demikian pula, autentikasi pengguna yang telah terdaftar dilakukan dengan memanggil authenticate():

const faceio = new faceIO("app-public-id"); // Inisialisasikan dengan Public ID aplikasi
function authenticateUser(){
    faceio.authenticate({
        "locale": "auto" // Bahasa default pengguna
    }).then(userData => {
        console.log("Berhasil, pengguna dikenali")
        // Baca Facial ID yang dikembalikan untuk pengguna ini. Nilainya tetap sama
        // setelah setiap autentikasi yang berhasil dalam aplikasi ini.
        // Simpan sebagai kunci pencarian akun terkait di backend.
        console.log("Facial ID terkait: " + userData.facialId)
        // Baca data yang telah dikaitkan dengan pengguna ini, jika ada
        // saat pendaftaran melalui parameter payload pada enroll().
        console.log("Payload: " + JSON.stringify(userData.payload)) // Data payload dari contoh enroll() di atas
    }).catch(errCode => {
        handleError(errCode)
    })
}

• Inisialisasi: Inisialisasikan objek faceIO dengan Public ID aplikasi, seperti pada contoh pendaftaran.

• Panggilan autentikasi: authenticate() memulai autentikasi, meminta akses kamera bila diperlukan, dan menjalankan pengenalan wajah. Parameter locale mengatur bahasa interaksi widget.

• Hasil autentikasi: Setelah autentikasi berhasil, Promise diselesaikan dengan objek userData. userData.facialId adalah pengenal yang tetap sama bagi pengguna ini pada setiap autentikasi. Gunakan sebagai kunci utama untuk mencari pengguna di backend. userData.payload berisi data yang dikaitkan saat pendaftaran, misalnya {"whoami": 123456, "email": "john.doe@example.com"}.

• Penanganan kesalahan: Tangkap kegagalan autentikasi dan implementasikan fungsi handleError() untuk menangani setiap kode yang dikembalikan. Lihat dokumentasi kode kesalahan untuk semua kode yang tersedia.