Posted on Mar 15

Bangun Sistem Login dengan Pengenalan Wajah Menggunakan FACEIO dan JavaScript Murni

Pendahuluan

Kata sandi semakin menjadi risiko keamanan karena serangan peretasan dan phishing. Pengenalan wajah adalah alternatif yang lebih cepat dan aman.

FACEIO menyediakan sistem autentikasi tanpa kata sandi menggunakan pengenalan wajah, memungkinkan pengguna untuk masuk secara instan tanpa harus memasukkan kata sandi.

Apa yang Akan Anda Pelajari dalam Panduan Ini

Dalam tutorial ini, Anda akan belajar bagaimana:

✅ Mengatur FACEIO dan membuat sistem autentikasi wajah.

✅ Mendaftarkan pengguna (mendaftarkan wajah mereka).

✅ Mengautentikasi pengguna (login menggunakan pengenalan wajah).

✅ Mengikuti praktik terbaik keamanan & privasi saat menggunakan autentikasi wajah.

Mengapa Menggunakan FACEIO?

Tanpa kata sandi → Pengguna masuk dengan wajah mereka.
Sangat aman → AI anti-pemalsuan dan deteksi kehadiran fisik.
Mudah diintegrasikan → Bekerja hanya dengan beberapa baris kode JavaScript.
Kompatibel dengan perangkat apa pun → Desktop, laptop, dan browser seluler.

👉 Pelajari lebih lanjut tentang FACEIO di sini: https://faceio.net/

Pada akhir tutorial ini, Anda akan memiliki sistem login pengenalan wajah yang siap digunakan di dunia nyata.

Langkah 1: Mengatur FACEIO

1.1 Buat Akun FACEIO

Buka FACEIO Console:
Daftar dan masuk ke dasbor.
Klik Buat Aplikasi Baru.
Konfigurasikan pengaturan dan salin Public App ID Anda.

📌 Penting: App ID ini diperlukan untuk mengintegrasikan FACEIO ke dalam proyek Anda.

Langkah 2: Menginstal FACEIO di Proyek JavaScript Anda

Anda dapat mengintegrasikan FACEIO menggunakan dua metode:

Opsi 1: Menggunakan CDN (Metode Tercepat)

Tambahkan skrip ini di dalam file HTML Anda sebelum </body>:

<script src="https://cdn.faceio.net/fio.js"></script>

Opsi 2: Menggunakan NPM (Untuk Pengguna Tingkat Lanjut)

Instal FACEIO melalui npm:

npm i @faceio/fiojs

Kemudian, impor ke file JavaScript Anda:

import faceIO from '@faceio/fiojs';

👉 Dokumentasi NPM FACEIO:

Langkah 3: Mendaftarkan Wajah (Pendaftaran Pengguna)

Sebelum pengguna dapat login, mereka perlu mendaftarkan wajah mereka di sistem.

3.1 Buat Tombol Pendaftaran

Tambahkan tombol Daftarkan Wajah di HTML Anda:

<button onclick="enrollUser()">Daftarkan Wajah</button>

3.2 Kode JavaScript untuk Mendaftarkan Pengguna

Tambahkan kode JavaScript ini untuk menangani pendaftaran wajah:

Metode enroll() mendaftarkan pengguna baru dengan menangkap fitur wajah mereka dan menghasilkan template wajah unik. Metode ini menerima parameter opsional seperti data pengguna (misalnya, ID pengguna atau email) dan mengembalikan respons pendaftaran jika berhasil.

const faceioInstance = new faceio("YOUR_PUBLIC_APP_ID"); async function enrollUser() { try { let userInfo = await faceioInstance.enroll({ locale: "auto" }); console.log("Pengguna berhasil didaftarkan!", userInfo); } catch (error) { console.error("Pendaftaran gagal", error); } }

Parameter:

locale: Menentukan bahasa antarmuka FACEIO (misalnya, "auto" untuk deteksi otomatis).
payload: Objek opsional yang menyimpan metadata terkait pengguna (misalnya, ID pengguna, nama).

Nilai Kembali:

Objek yang berisi fid (Face ID) unik dan detail pengguna.

📌 Pelajari lebih lanjut tentang enroll() di dokumentasi FACEIO enroll().

Langkah 4: Mengautentikasi Pengguna (Login dengan Wajah)

4.1 Buat Tombol Login

Tambahkan tombol Login dengan Wajah:

<button onclick="authenticateUser()">Login dengan Wajah</button>

4.2 Kode JavaScript untuk Mengautentikasi Pengguna

Tambahkan kode JavaScript ini untuk menangani autentikasi wajah:

Metode`authenticate()` memverifikasi identitas pengguna dengan memindai wajah mereka dan mencocokkannya dengan template wajah yang tersimpan. Metode ini menerima parameter opsional seperti payload autentikasi dan mengembalikan respons jika autentikasi berhasil.

async function authenticateUser() { try { let userData = await faceioInstance.authenticate({ locale: "auto" }); console.log("Pengguna berhasil diautentikasi!", userData); } catch (error) { console.error("Autentikasi gagal", error); } }