Forem: Pius oruko

Laravel Face Recognition and Authentication

Pius oruko — Tue, 06 Jan 2026 21:10:42 +0000

Introduction
A recurring security and usability issue with web applications is passwords. They are frequently forgotten, reused, or compromised by phishing and credential stuffing attempts. By completely eliminating passwords, facial authentication provides a useful substitute that enhances user experience and security. In order to allow passwordless authentication, you will learn how to incorporate FACEIO facial recognition into a Laravel application. Using Laravel's authentication system and FACEIO's JavaScript SDK, the guide focuses on actual implementation and that includes backend validation, login processes, face enrollment, and security best practices.

What is FACEIO?
FACEIO is a cloud-based facial recognition and authentication platform built specifically for web applications. It allows developers to add secure biometric login using a lightweight JavaScript SDK, without building or maintaining computer vision or machine-learning infrastructure. FACEIO handles facial capture, recognition, and liveness detection in the browser and cloud, then returns a unique facial identifier that can be safely associated with a user account. No biometric images or videos are stored on your servers. FACEIO works across modern browsers and devices and follows GDPR-aligned privacy principles.

How FACEIO Works with Laravel
FACEIO integrates with Laravel by using its client-side JavaScript SDK (fio.js) to handle all facial recognition interactions in the user's browser, while Laravel handles backend verification and session management. On the frontend, you call either enroll() to register a new user or authenticate() to recognize a returning user; both methods trigger the FACEIO widget and webcam access. Upon success, FACEIO returns a unique Facial ID for that user, which your Laravel app stores or verifies to log in the user. You never store actual biometric images in your database only this unique identifier tied to each use

Project Requirements
Before starting, ensure you have:

PHP 8.1 or later
Laravel 10+
A FACEIO account and public application ID
A webcam-enabled device for testing

Step 1: Create a New Laravel Project

composer create-project laravel/laravel faceio-auth
cd faceio-auth
php artisan serve

Configure your database credentials in the .env file.

Step 2: Update the Users Table
FACEIO returns a unique facial identifier for each enrolled user. This value must be stored in your database.

Create a migration:

php artisan make:migration add_faceio_id_to_users_table

Update the migration file:

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

Schema::table('users', function (Blueprint $table) {
    $table->string('faceio_id')->nullable()->unique();
});

Run migrations:

php artisan migrate

Step 3: Register a FACEIO Application
Go to the FACEIO Console and create a new application and copy your Public ID. This ID is used on the frontend to initialize the FACEIO SDK.

Step 4: Include FACEIO SDK in Laravel Blade
Add the FACEIO script to your main Blade layout file:

<script src="https://cdn.faceio.net/fio.js"></script>
<script>
  const faceio = new faceIO("YOUR_FACEIO_PUBLIC_ID");
</script>

This initializes FACEIO and makes facial authentication available throughout your app.

Step 5: Facial Enrollment (User Registration)
Facial enrollment links a user account to a biometric identity.

**
Enrollment Button**

<button onclick="enrollUser()">Register with Face</button>

Enrollment Script

<script>
async function enrollUser() {
  try {
    const userInfo = await faceio.enroll({
      locale: "auto",
      payload: {
        email: "{{ auth()->user()->email }}"
      }
    });

    await fetch('/faceio/register', {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        faceio_id: userInfo.facialId
      })
    });

    alert("Face registered successfully");
  } catch (error) {
    console.error(error);
  }
}
</script>

This script handles facial enrollment on the frontend using FACEIO. When called, it opens the FACEIO enrollment widget and uses the user's webcam to capture their face. Upon successful enrollment, FACEIO returns a unique facial identifier (facialId). The script then sends this identifier to the Laravel backend via a secure POST request, including a CSRF token for protection. Laravel stores the identifier in the database linked to the authenticated user. Finally, the script shows a confirmation alert to the user. If any error occurs during enrollment or submission, it is logged to the browser console.

Step 6: Laravel Controller for Face Enrollment

Create a controller:

php artisan make:controller FaceAuthController

Add the enrollment logic:

use Illuminate\Http\Request;

class FaceIOController extends Controller
{
    public function registerFace(Request $request)
    {
        $request->validate([
            'faceio_id' => 'required|string|unique:users,faceio_id'
        ]);

        $user = auth()->user();
        $user->faceio_id = $request->faceio_id;
        $user->save();

        return response()->json(['success' => true]);
    }
}

This controller method handles facial enrollment by linking a FACEIO facial identity to an existing Laravel user account. When the frontend completes face enrollment, it sends the generated facial ID to this endpoint. Laravel first validates the request to ensure the facial ID exists, is correctly formatted, and is not already associated with another user. The method then retrieves the currently authenticated user and stores the facial ID in the database. No biometric images or facial data are saved, Only the unique identifier provided by FACEIO. Finally, the controller returns a JSON response to confirm that the enrollment process completed successfully and securely.

Step 7: Facial Login (Authentication)
Facial authentication verifies the user and logs them in without a password.

Login Button

<button onclick="loginWithFace()">Login with Face</button>

Login Script

<script>
async function loginWithFace() {
  try {
    const authResponse = await faceio.authenticate({
      locale: "auto"
    });

    await fetch('/faceio/login', {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        faceio_id: authResponse.facialId
      })
    });

    window.location.href = "/dashboard";
  } catch (error) {
    console.error(error);
  }
}
</script>

This script handles facial login on the frontend using FACEIO. When triggered, it opens the FACEIO authentication widget and accesses the user's webcam to verify their face. If authentication succeeds, FACEIO returns a unique facial identifier. The script then sends this identifier securely to the Laravel backend using a POST request, including a CSRF token for protection. Once Laravel confirms the user and creates a session, the browser redirects the user to the dashboard. If any step fails, the error is logged to the console.

Step 8: Laravel Facial Login Controller
Add login logic to the controller:

use App\Models\User;
use Illuminate\Support\Facades\Auth;

public function login(Request $request)
{
    $user = User::where('faceio_id', $request->faceio_id)->firstOrFail();
    Auth::login($user);

    return response()->json(['success' => true]);
}

This method handles facial login after FACEIO successfully authenticates a user on the frontend. When FACEIO returns a facial ID, Laravel receives it through the request. The method searches the users table for a record with a matching FACEIO facial ID. If no matching user is found, the request automatically fails, preventing unauthorized access. Once a matching user is located, Laravel logs the user in using its built-in authentication system, creating a valid session just like a traditional password-based login. The method then returns a JSON response to confirm that authentication was successful and the user is now logged in.

Step 9: Routes Configuration
Add routes to web.php:

use App\Http\Controllers\FaceIOController;

Route::post('/faceio/register', [FaceIOController::class, 'registerFace']);
Route::post('/faceio/login', [FaceIOController::class, 'login']);

This code defines two POST routes in Laravel that handle FACEIO-related authentication actions. The first route listens for requests sent after a user successfully enrolls their face and maps them to the registerFace method in the FaceIOController, where the facial ID is stored in the database. The second route listens for facial login requests and maps them to the login method, which authenticates the user using the FACEIO facial ID. Both routes use POST because they handle sensitive data and modify authentication state. These routes act as the secure bridge between the FACEIO frontend SDK and Laravel's backend authentication system.
Environment Configuration
Update your .env file:

# Laravel Environment
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:YOUR_APP_KEY_HERE
APP_DEBUG=true
APP_URL=http://localhost:8000

# Database Configuration
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=face_auth
DB_USERNAME=root
DB_PASSWORD=

# FACEIO Configuration
FACEIO_APP_ID=your_actual_app_id_here

Notes:

Replace your_actual_app_id_here with the public App ID from your FACEIO console.
Ensure APP_KEY is generated via php artisan key:generate.
The database credentials should match your local MySQL setup. Running the Application Start the development server:

php artisan serve

Security Best Practices

Mandatory Security Settings in FACEIO
Enable Liveness Detection: Prevents photo/video spoofing attacks
Use HTTPS: Required for browser camera access
Restrict Widget Instantiation: Limit to authorized domains only
Enable Webhooks: Server-side validation of all events
Reject Empty Origin Headers: Prevent forged requests
Prevent Duplicate Enrollments: Block same user enrolling multiple times

Recommended Additional Settings:

Require PIN Confirmation: Always ask for PIN during authentication
Reject Weak PINs: Block patterns like "0000" or "1234"
Enforce PIN Uniqueness: Ensure unique PINs across users
Forbid Minors: Age verification for sensitive services
Ignore Obscured Faces: Discard masked/poorly lit faces
Country Restrictions: Limit access by geographic location

Conclusion

Integrating FACEIO with Laravel provides a modern, secure, and user-friendly alternative to traditional password-based authentication. By leveraging FACEIO's cloud-based facial recognition and liveness detection, Laravel applications can implement passwordless login, ensuring a seamless user experience while maintaining high security standards. The integration keeps sensitive biometric data off your servers, storing only unique facial identifiers tied to user accounts. This approach reduces risks associated with password reuse, phishing, and credential theft. Whether for employee login systems, event check-ins, or secure dashboards, combining Laravel's robust backend with FACEIO's biometric capabilities enables developers to build scalable, secure, and cutting-edge authentication solutions.

Automate Identity Document Recognition with PixLab's ID Scan & Extract API

Pius oruko — Tue, 08 Jul 2025 09:24:40 +0000

1.Introduction

Verifying identity documents is a critical process for digital platforms across industries from fintech apps onboarding new users to travel platforms checking passport data, healthcare systems registering patients, and e-commerce businesses verifying age for restricted products. Traditionally, this process has relied on manual reviews, form inputs, and basic OCR tools that are slow, error-prone, and difficult to scale.As user expectations for speed, security, and seamless experiences rise, there’s a growing need for smarter, automated document verification.This is where PixLab’s ID Scan & Extract API comes in.

In this article, we’ll explore how the PixLab ID Scan & Extract API works, what makes it stand out, and how to integrate it into your application in just a few lines of code. Whether you're building a KYC system, a user onboarding flow, or any app that processes government-issued IDs, this guide will help you get started quickly and effectively.

2.What's Pixlab ID Scan & Extract API

The PixLab ID Scan & Extract API (docscan) allows developers to automatically scan and extract structured data from nearly all officially recognized identity documents including passports, ID cards, driver's licenses, visas, and civil certificates from over 11,094 supported document types across 200+ countries and territories. it provides unmatched global coverage. Both MRZ-enabled and non-MRZ documents are fully supported.

All processing takes place in-memory, meaning no images are stored or logged at any point. Once processed, the document is immediately discarded, ensuring compliance with privacy regulations like GDPR and CCPA.

The API also features built-in face detection and cropping, and converts scanned data whether from images or MRZ text into clean, structured JSON. Extracted fields include full name, document number, address, issuing country, expiry date, and more, making it easy to integrate into any identity verification or KYC process.

3. Global Coverage & Document Intelligence

PixLab’s ID Scan & Extract API offers one of the most comprehensive global document recognition systems available today. With support for over 11,000 unique identity document templates from 200+ recognized countries and territories, it ensures wide compatibility across national ID cards, passports, driver’s licenses, and regional formats.

This extensive coverage includes documents with and without Machine Readable Zones (MRZs), and the API is constantly updated to reflect new formats as governments roll out updated designs or security features.The platform’s document intelligence goes beyond basic OCR. It leverages advanced layout detection and semantic analysis to accurately classify the document type, detect key fields regardless of language or structure, and adjust for real-world issues such as:

Skewed or angled images
Poor lighting or shadows
Blurred or low-resolution photos
Multi-language text (e.g., Arabic, Cyrillic, Latin, Chinese)

Whether you’re onboarding users in the U.S., verifying passports from Europe, or scanning national IDs from Africa or Asia, PixLab delivers consistent and reliable results at scale.

4. What Makes PixLab’s ID Scan API Stand Out

PixLab’s ID Scan & Extract API (docscan) is engineered for speed, scale, and simplicity making it ideal for real-time applications, global coverage, and privacy-sensitive environments. Here’s what sets it apart:

Real-Time Performance

docscan delivers results in just 2 to 5 seconds, depending on image size, network speed, and document complexity. This speed makes it well-suited for time-critical use cases like KYC verification and instant onboarding.

High-Volume Architecture

Built on the PixLab Vision Platform, the API is optimized to handle large-scale, concurrent document processing perfect for platforms handling thousands of verifications daily.

Single REST API Endpoint

You don’t need SDKs or external libraries. Just one secure HTTPS endpoint compatible with any language or framework that can make HTTP requests.

Privacy-First by Design

All processing happens in-memory with zero persistent storage or logging. If needed, cropped face images can be securely exported to your private S3 bucket, giving you full control over your data.

Developer-Centric Experience

PixLab prioritizes fast onboarding for developers. The platform provides:

Clean, well-documented endpoints
Live API console for testing
Copy-paste-ready code snippets
Clear field labels and confidence scores

Whether you're a solo developer or scaling an enterprise product, PixLab reduces integration time and simplifies identity document automation.

5. Use Cases Across Industries

PixLab’s ID Scan & Extract API is versatile and industry agnostic. Here are some ways it’s already being used:

Fintech & Banking KYC onboarding, account creation, identity verification
E-commerce Age-gated products like alcohol, tobacco, or adult content
Travel & Hospitality Passport scans during booking or check-in
Healthcare Patient onboarding using health insurance cards or national IDs
Education & Exams Student ID verification for remote exams
HR & Staffing Employee background checks, remote hiring, document verification

6. How to Integrate the API (Step-by-Step)

Integrating PixLab’s ID Scan & Extract API (docscan) is straightforward and developer friendly. You can get started in minutes using just a few lines of code. Below is a simple guide to help you go from zero to production.

Step 1: Get Your API Key

Create an account at PixLab Console, then generate your personal API key under the API Keys section. This key is required to authenticate all requests to the API.

Step 2: Prepare the Document Image

The API supports multiple input formats:

Public image URLs
Base64-encoded strings
Direct file uploads
Multi-page PDFs

Make sure the image is clear and readable. For best results, submit both front and back images if the document has two sides.

Step 3: Choose the Document Type

You must specify the document type you're scanning (e.g., passport, idcard, driver_license). This helps the API route the image to the correct recognition model.

Step 4: Make the API Call (JavaScript Example)

Here’s a sample implementation in JavaScript using fetch:

async function scanDocument() {
  try {
    const apiKey = 'PIXLAB_API_KEY'; // Replace with your actual API key
    const imageUrl = 'http://i.stack.imgur.com/oJY2K.png'; // Document image URL
    const url = `https://api.pixlab.io/docscan`;

    const data = {
      img: imageUrl,
      type: 'passport',
      key: apiKey
    };

    const reply = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    }).then(response => response.json());

    if (reply.status !== 200) {
      console.error(reply.error);
    } else {
      console.log("User Cropped Face: " + reply.face_url);
      console.log("Extracted Fields:");
      console.log("\tIssuing Country: " + reply.fields.issuingCountry);
      console.log("\tFull Name: " + reply.fields.fullName);
      console.log("\tDocument Number: " + reply.fields.documentNumber);
      console.log("\tNationality: " + reply.fields.nationality);
      console.log("\tDate Of Birth: " + reply.fields.dateOfBirth);
      console.log("\tSex: " + reply.fields.sex);
      console.log("\tDate Of Expiry: " + reply.fields.dateOfExpiry);
    }
  } catch (error) {
    console.error('Error:', error);
  }
}
scanDocument();

Step 5: Handle the Response

The API returns a structured JSON response containing:

Extracted identity fields
Cropped face image URL
MRZ data (if available)
Document type, nationality, and confidence scores

You can store, display, or verify this data based on your business logic.

Optional: S3 Face Crop Integration

PixLab allows you to connect your AWS S3 bucket via the dashboard so that extracted face crops and MRZ images are stored directly in your private cloud giving you full control over file storage.

Explore More Code Samples

PixLab offers production-ready samples in Python, PHP, JavaScript, and Ruby. Browse the PixLab GitHub Repository or refer to the official documentation for more integration examples and reference guides.With this integration in place, you can build a reliable and secure identity verification flow into any application in just a few minutes.

7. Advanced Features

Beyond basic data extraction, PixLab’s ID Scan & Extract API offers powerful advanced features that enhance accuracy, flexibility, and usability in production environments.

Visual Crop Outputs

The API automatically detects and crops key visual regions such as the document holder’s face or MRZ (Machine Readable Zone). These can be returned as base64-encoded images or securely stored in your private S3 bucket, giving you full control over sensitive media files.

Use cases include:

Profile image capture
Face-matching and biometric verification
MRZ zone archiving for audits

PDF and Multi-Page Document Support

PixLab fully supports PDF input, including documents with multiple pages. This is especially useful for:

Passports with visa pages
ID bundles or scanned document packets
Government-issued PDFs of digital identity documents

The API automatically processes each page, extracts relevant content, and returns unified results in a single JSON response allowing seamless integration with any document management system.

8. Real-World Integration Example

Let’s say you’re building a digital onboarding flow for a fintech app that requires users to verify their identity before opening an account. Using PixLab’s ID Scan & Extract API, this process can be fully automated in just a few steps:

User uploads a passport or ID card photo via your web or mobile frontend.
Your backend sends the image (as a file, Base64, or URL) to PixLab’s docscan API.
The API scans the document, detects the layout, extracts structured fields (like full name, date of birth, nationality, and document number), and returns a clean JSON response within seconds.
The response also includes a cropped face image and MRZ data (if available).
Your system uses this output to auto-fill user profile fields, verify document consistency, or match the face with a live selfie for liveness detection. By integrating PixLab, you eliminate manual data entry, reduce onboarding time, and improve compliance all through a single REST call.

9. Conclusion

PixLab’s ID Scan & Extract API delivers an enterprise grade solution for automated identity document processing. With support for over 11,000 document types from 200+ countries, in-memory privacy-first architecture, and developer-friendly integration, it solves a major pain point for businesses handling identity verification at scale.

Whether you’re building for fintech, e-commerce, healthcare, HR, or travel, PixLab gives you everything you need to extract, verify, and process identity documents quickly and securely. Ready to integrate identity parsing into your app?

Explore the API
Read the Docs
Try code samples on GitHub Unlock smarter identity workflows with PixLab accurate, fast, and built for developers.

Implementing Facial Recognition Login on Websites with FACEIO: A Step-by-Step Guide for Developers

Pius oruko — Sun, 27 Apr 2025 18:43:40 +0000

1. Introduction to FACEIO

FACEIO is a facial recognition SDK that allows developers to implement passwordless login, biometric authentication, and user verification in web-based applications. It provides a seamless, privacy-focused solution for verifying users via face recognition without the need for usernames or passwords. By simply scanning their face using a webcam or phone camera, users can securely authenticate into any app or website. Designed for modern web applications. Learn how to integrate FACEIO’s facial recognition SDK for passwordless login and secure user authentication on websites and apps. Follow this step-by-step guide with JavaScript code samples and real-world use cases.

FACEIO is the #1 Face Recognition SDK for Web & Apps
When it comes to facial recognition SDKs for websites and mobile apps, FACEIO ranks #1 for developers seeking the best in passwordless authentication, liveness detection, and deepfake protection.

Here’s why FACEIO stands out as the top face authentication API for web apps:

Browser-based SDK: Works seamlessly across all modern browsers with no heavy backend setup required.
Lightning-fast integration: Just a few lines of JavaScript to enable face recognition login on any website or app.
Robust security: Includes liveness detection and deepfake protection to prevent spoofing attacks.
Privacy-first: No biometric data is stored on FACEIO servers — all data stays on the client-side or your app.
Versatile use cases: Ideal for employee login, customer authentication, age verification, attendance tracking, and secure user access.
Developer-friendly: Rich developer dashboard, customizable UI prompts, detailed analytics, and real-time logs. With thousands of developers and companies already using FACEIO, it’s recognized as the most powerful and user-friendly biometric authentication SDK available today. Feel free to explore developer and integration guides

2. FaceIO Features

FACEIO supports real-time facial recognition, liveness detection (to ensure a live human is present), and deepfake detection to prevent spoofing. It's especially useful for use cases like age verification, employee attendance tracking, and frictionless user logins on consumer platforms. FACEIO is implemented entirely on the frontend using JavaScript via a lightweight SDK (fio.js) and works with all modern browsers. It can be integrated into existing apps with just a few lines of code, allowing businesses and developers to quickly deploy secure, user-friendly authentication systems.The platform also includes detailed analytics, customizable UI prompts, and a developer dashboard for managing users and reviewing authentication logs. Whether you're building an internal tool or a public-facing product, FACEIO helps eliminate the friction of traditional login methods while improving security and user experience.

3. Step-by-Step Integration with JavaScript SDK

Integrating FACEIO into your website or web application is straightforward. The SDK is lightweight and browser-based, enabling rapid setup with minimal backend configuration.

Prerequisites

A FACEIO developer account (Sign up here)
Your application's Public ID, available from the FACEIO Console
A modern browser with camera access enabled

Step 1: Add the SDK to Your Project

Option 1: Use CDN (recommended for HTML projects):

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

Option 2: Install via NPM (recommended for frameworks like React, Vue, etc.):

npm install @faceio/fiojs

Then import it in your JavaScript file:

`import faceIO from "@faceio/fiojs";`

Step 2: Initialize FACEIO

Initialize the SDK using your Public ID:

const faceio = new faceIO("YOUR_PUBLIC_ID");

Replace "YOUR_PUBLIC_ID" with your actual FACEIO public identifier from the Developer Console.

Step 3: Enroll a New User

Use this method when registering users:

async function enrollUser() {
try {
const userInfo = await faceio.enroll({
locale: "auto",
payload: {
email: "user@example.com",
userId: "USER_12345",
},
});
console.log("Enrollment successful:", userInfo);
} catch (err) {
console.error("Enrollment failed:", err);
}
}

locale: Set to "auto" to detect browser language automatically.
payload: Custom user metadata to associate with the enrollment (e.g., email, user ID).

Step 4: Authenticate Returning Users

Use this method to allow users to log in:

async function authenticateUser() {
try {
const userData = await faceio.authenticate({ locale: "auto" });
console.log("Authentication successful:", userData);
} catch (err) {
console.error("Authentication failed:", err);
}
}

On success, userData contains the payload submitted during enrollment.

Step 5: Handle Common Errors

FACEIO SDK returns clear error codes. You can handle them like this:

catch (err) {
switch (err.code) {
case fioErrCode.PERMISSION_REFUSED:
alert("Camera access was denied.");
break;
case fioErrCode.NO_FACES_DETECTED:
alert("No face detected. Please retry.");
break;
case fioErrCode.FACE_DUPLICATION:
alert("Face already enrolled.");
break;
default:
alert("An unexpected error occurred.");
}
}

Full list of error codes

Step 6: Test Your Integration

Use a live webcam (not static images) to test liveness detection.
Test different devices and browsers for compatibility.
Check your FACEIO dashboard for authentication logs and user data.

This step-by-step guide ensures a robust, production-ready integration of FACEIO's facial recognition JavaScript SDK with support for passwordless login, liveness detection, and more.

4. Real-World Use Case - Biometric Login for Employees

Let's apply FACEIO in a practical scenario: building a biometric login system for employees of a web-based internal tool.

Problem

Traditional employee logins with passwords are insecure and inconvenient. Companies need a fast, secure, and user-friendly way for staff to access internal systems.

Solution

Use FACEIO to authenticate employees using their face - no passwords, no tokens. Just camera-based biometric login in the browser.
Step-by-Step Implementation

1. Setup Your FACEIO App

As covered in Step 2, ensure:

FACEIO application is created
Your domain is registered
You have your Public App ID

2. Register Employees (One-time Enrollment)

Add a simple UI for new employees to enroll:

async function enrollEmployee(email, employeeId) {
try {
const response = await faceio.enroll({
locale: "auto",
payload: {
email: email,
employeeId: employeeId,
},
});
alert("Enrollment complete for " + response.payload.employeeId);
} catch (errCode) {
handleFaceioError(errCode);
}
}

Call this when onboarding a new employee.

3. Employee Login via Face (Each Login)

async function loginEmployee() {
try {
const result = await faceio.authenticate({ locale: "auto" });
console.log("Welcome back:", result.payload.employeeId);
// Redirect to dashboard or unlock resources
} catch (errCode) {
handleFaceioError(errCode);
}
}

Attach this to a "Login with Face" button.

4. Optional: Log Sessions or Restrict Access by Role

if (result.payload.role === "manager") {
// Grant access to management dashboard
}

You can pass roles/permissions in the payload during enrollment and access them after authentication.

Benefits

No forgotten passwords or reset requests
Faster clock-ins and access control
Works on any browser with a camera
Private and secure

Conclusion

FACEIO is a powerful, privacy-focused facial recognition SDK that simplifies biometric authentication for modern web applications. By enabling passwordless login, liveness detection, and spoof prevention directly in the browser, FACEIO offers a fast, secure, and user-friendly alternative to traditional login methods.
With just a few lines of JavaScript and no backend complexity, developers can integrate FACEIO into any app - making it ideal for real-world use cases like employee authentication, age verification, or customer login. Its lightweight JavaScript SDK, customizable UI prompts, and rich developer dashboard make deployment and user management easy and scalable.
Whether you're building internal tools or public-facing platforms, FACEIO ensures frictionless access while enhancing security and user experience.

Resources

Getting Started: https://faceio.net/getting-started
NPM Package: https://www.npmjs.com/package/@faceio/fiojs
Developer Community: https://community.faceio.net

Construindo um Sistema de Presença e Autenticação usando Reconhecimento Facial com FaceIO e JavaScript

Pius oruko — Thu, 13 Feb 2025 20:24:44 +0000

No ambiente acelerado de hoje, a gestão eficaz da presença é crucial para escolas, empresas e eventos. Métodos convencionais, como chamadas manuais ou cartões de ponto, podem ser trabalhosos e propensos a erros. Este artigo discutirá o desenvolvimento de um sistema de presença moderno utilizando FaceIO, uma estrutura de reconhecimento facial, em conjunto com JavaScript. Este sistema permite que os usuários registrem sua presença por meio de uma varredura facial, garantindo uma experiência segura e intuitiva.

O que é FaceIO?
FaceIO é uma estrutura de autenticação facial que facilita a implementação de autenticação sem senha usando reconhecimento facial. Ele oferece vários benefícios:

Facilidade de Integração: Com pouca configuração necessária, o FaceIO pode ser integrado de forma suave em qualquer aplicação web.
Recursos de Segurança: Incorpora tecnologia anti-spoofing para evitar acesso não autorizado por meio de fotos ou vídeos.
Privacidade do Usuário: Os dados biométricos são criptografados e armazenados em um formato não bruto para proteger a privacidade do usuário.
Compatibilidade Multiplataforma: Funciona em uma variedade de dispositivos com câmeras, como smartphones e laptops.

Por que usar Reconhecimento Facial para Presença?
A tecnologia de reconhecimento facial oferece várias vantagens sobre os sistemas de presença tradicionais:

Velocidade e Eficiência: Os usuários podem registrar sua presença em segundos sem qualquer entrada manual.
Precisão: Reduz o risco de erros humanos no processo de registros manuais ou chamadas.
Interação sem Contato: Ideal para situações onde a higiene é prioritária, como durante uma pandemia.
Coleta de Dados: As informações de presença são registradas automaticamente, facilitando a análise e relatórios.

Pré-requisitos

Antes de começarmos a construir nosso sistema de presença, certifique-se de ter o seguinte:
Conhecimento Básico de JavaScript e HTML: Familiaridade com conceitos de desenvolvimento web ajudará a entender melhor a implementação.
Conta FaceIO: Registre-se no FaceIO para obter o Public ID da sua aplicação.

Ambiente de Desenvolvimento: Configure um ambiente básico de desenvolvimento web (por exemplo, Visual Studio Code) e um servidor local (como a extensão Live Server no VS Code).

Passo 1: Configurando o FaceIO

Para começar a usar o FaceIO em seu projeto, siga estes passos:

1. Inclua a Biblioteca FaceIO
Adicione a seguinte tag de script ao seu arquivo HTML para incluir a biblioteca JavaScript do FaceIO:

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

2. Inicialize o FaceIO
Crie uma instância do objeto FaceIO usando o Public ID da sua aplicação no seu arquivo JavaScript:

const faceio = new faceIO("seu-public-id");

Esta instância será usada para interagir com a API do FaceIO para registro e autenticação de usuários.

Passo 2: Projetando a Interface do Sistema de Presença
Crie uma interface HTML simples que permita aos usuários se registrar e marcar sua presença. Aqui está um exemplo de layout:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Presença</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
        }
        #status {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Sistema de Presença com Reconhecimento Facial</h1>
    <button onclick="registrarUsuario()">Registrar Usuário</button>
    <button onclick="marcarPresenca()">Marcar Presença</button>
    <div id="status"></div>

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

Este layout apresenta botões para registrar usuários e marcar presença, junto com uma área de exibição de status para mostrar mensagens.

Passo 3: Registrando Usuários no Sistema
O primeiro passo em qualquer sistema de presença é o registro dos usuários, onde eles cadastram seus dados faciais. Este processo garante que o sistema possa reconhecê-los posteriormente quando marcarem presença.

Implementando o Registro de Usuários
Aqui está como implementar o registro de usuários usando FaceIO:

function registrarUsuario() {
    faceio.enroll({
        locale: "auto", // Detecta automaticamente o idioma do usuário
        payload: {
            employeeID: "EMP12345", // Exemplo de dados de payload
            department: "RH"
        }
    }).then(userInfo => {
        document.getElementById("status").innerText = 
            `Registro Bem-sucedido! ID Facial: ${userInfo.facialId}`;
        console.log("Informações do Usuário:", userInfo);
    }).catch(errCode => {
        handleError(errCode);
    });
}

Explicação do Código
A propriedade locale permite a detecção automática das configurações de idioma do usuário.
O objeto payload pode incluir metadados adicionais sobre o usuário (por exemplo, ID do funcionário ou departamento).
Após o registro bem-sucedido, o sistema exibe uma mensagem de sucesso junto com o facialId único atribuído pelo FaceIO.
Passo 4: Marcando Presença
Uma vez que os usuários estão registrados, eles podem marcar sua presença autenticando-se com o rosto. Aqui está como você pode implementar esta funcionalidade:

Implementando a Marcação de Presença

function marcarPresenca() {
    faceio.authenticate({
        locale: "auto"
    }).then(userInfo => {
        const timestamp = new Date().toLocaleString();
        document.getElementById("status").innerText = 
            `Presença Marcada! Bem-vindo ${userInfo.payload.employeeID}. Horário: ${timestamp}`;
        console.log("Informações de Presença:", userInfo);
    }).catch(errCode => {
        handleError(errCode);
    });
}

Explicação do Código
O método authenticate() verifica a identidade do usuário com base em seus dados de reconhecimento facial.
Na autenticação bem-sucedida, ele registra sua presença junto com um timestamp indicando quando marcaram presença.
Passo 5: Tratamento de Erros
Para garantir uma experiência de usuário suave, é crucial tratar erros de forma elegante. Aqui está como você pode implementar o tratamento de erros:

function handleError(errCode) {
    let errorMessage;

    switch (errCode) {
        case fioErrCode.PERMISSION_REFUSED:
            errorMessage = "Permissão negada pelo usuário.";
            break;
        case fioErrCode.NO_FACES_DETECTED:
            errorMessage = "Nenhum rosto detectado. Por favor, tente novamente.";
            break;
        case fioErrCode.UNRECOGNIZED_FACE:
            errorMessage = "Rosto não reconhecido. Por favor, registre-se primeiro.";
            break;
        default:
            errorMessage = "Ocorreu um erro desconhecido.";
            break;
    }

    document.getElementById("status").innerText = errorMessage;
}

Explicação do Tratamento de Erros
A função handleError fornece mensagens específicas com base em diferentes códigos de erro retornados pelo FaceIO.
Este feedback ajuda os usuários a entender o que deu errado e como eles podem resolver.
Passo 6: Armazenando Dados de Presença
Embora nossa implementação atual permita que os usuários marquem presença, ela não armazena esses dados persistentemente. Para criar um sistema de presença totalmente funcional, precisamos salvar essas informações em um banco de dados.

Integrando Firebase Firestore
1. Configurando o Projeto Firebase
Vá para o Console Firebase.
Crie um novo projeto e adicione o Firestore como seu banco de dados.

Adicionando o SDK do Firebase: Inclua os SDKs do Firebase no seu arquivo HTML:

<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-firestore.js"></script>

*3. Inicializando o Firebase no Seu Arquivo JavaScript
*

const firebaseConfig = {
    apiKey: "SUA_API_KEY",
    authDomain: "SEU_PROJECT_ID.firebaseapp.com",
    projectId: "SEU_PROJECT_ID",
    storageBucket: "SEU_PROJECT_ID.appspot.com",
    messagingSenderId: "SEU_MESSAGING_SENDER_ID",
    appId: "SEU_APP_ID"
};

const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

4. Armazenando Registros de Presença

Modifique a função marcarPresenca para armazenar registros no Firestore.

function marcarPresenca() {
    faceio.authenticate({
        locale: "auto"
    }).then(userInfo => {
        const timestamp = new Date().toLocaleString();

        // Armazena o registro de presença no Firestore
        db.collection("presenca").add({
            employeeID: userInfo.payload.employeeID,
            timestamp: timestamp,
            facialId: userInfo.facialId
        }).then(() => {
            document.getElementById("status").innerText = 
                `Presença Marcada! Bem-vindo ${userInfo.payload.employeeID}. Horário: ${timestamp}`;
        }).catch(error => {
            console.error("Erro ao armazenar registro de presença:", error);
            document.getElementById("status").innerText = 
                "Falha ao armazenar registro de presença.";
        });

    }).catch(errCode => {
        handleError(errCode);
    });
}

Explicação do Armazenamento de Dados
Cada vez que um usuário marca presença, uma entrada é criada na coleção "presenca" do Firestore.
O registro inclui o ID do funcionário, timestamp e ID facial para identificação única.
Melhores Práticas de Segurança e Privacidade
Ao implementar um sistema de presença baseado em reconhecimento facial, priorize a segurança e a privacidade seguindo estas melhores práticas:

Criptografar a Transmissão de Dados
Garanta que todas as comunicações entre sua aplicação e os servidores do FaceIO sejam criptografadas usando HTTPS.
2. Obter Consentimento do Usuário

Informe claramente os usuários sobre como seus dados biométricos serão usados e obtenha consentimento explícito antes do registro.
3. Limitar a Retenção de Dados

Armazene apenas as informações necessárias pelo tempo necessário para fins de manutenção de registros.
4. Implementar Controles de Acesso

Restrinja o acesso a dados sensíveis dentro de sua aplicação implementando controles de acesso baseados em funções (RBAC).
5. Auditorias Regulares de Segurança

Revise periodicamente sua aplicação em busca de vulnerabilidades potenciais e atualize as dependências regularmente.
6. Conformidade com a Política de Privacidade

Garanta conformidade com regulamentações de privacidade aplicáveis (por exemplo, GDPR ou CCPA) em relação ao manuseio de dados biométricos.
Para mais informações sobre medidas de privacidade relacionadas a dados biométricos, consulte a Política de Privacidade do FaceIO.

Testando Seu Sistema de Presença
Para testar seu sistema de presença recém-construído:

Abra seu arquivo HTML em um navegador web.
Clique em "Registrar Usuário" para registrar um novo usuário capturando seus dados faciais.
Use "Marcar Presença" para autenticar-se e registrar sua presença.
Verifique seu banco de dados Firestore para confirmar que os registros estão sendo armazenados corretamente.
Você pode aprimorar ainda mais este sistema adicionando recursos como ferramentas de relatório que analisam padrões de presença ou notificações para ausências.

Conclusão
Utilizar os recursos avançados de reconhecimento facial do FaceIO permite criar um sistema de presença eficaz e seguro que atualiza a forma como a presença é monitorada em vários ambientes, incluindo escolas, escritórios e eventos. Esta solução de ponta aumenta a segurança e melhora a experiência do usuário, eliminando os inconvenientes tradicionais associados aos métodos de rastreamento manual. Com este guia como ponto de partida, você está pronto para configurar um sistema de presença sofisticado que enfatiza a segurança e a usabilidade, ao mesmo tempo em que adere às regulamentações de privacidade. Para informações mais detalhadas sobre a funcionalidade do FaceIO ou para explorar suas capacidades completas, consulte a documentação oficial, guia de integração, pacote NPM e suporte da comunidade.

Integrating Faceio using HTMX

Pius oruko — Mon, 29 Apr 2024 13:23:35 +0000

In today's digital landscape, where security is crucial and user experience is vital, robust authentication solutions are in high demand. Traditional methods like passwords face increasing vulnerabilities and user frustration, driving exploration into alternative mechanisms. Facial authentication has emerged as a promising solution, offering both security and a seamless experience. This article explores the fusion of FACEIO, simplifying facial recognition integration into web apps, and HTMX, enabling dynamic HTML interactions. Through real-world examples, it showcases how this integration elevates web authentication, creating secure, user-friendly experiences.

What is FaceIO
FACEIO offers an extensive API and Webhooks feature for seamless integration and real-time event notifications. The API allows developers to manage applications, conduct operations like enrollment and authentication, and gather analytics. It operates over HTTP, providing standard response codes and returning JSON for all requests. Secure access is ensured through API keys managed via the FACEIO Console. Webhooks enable real-time notifications for events like enrollments and authentications. When triggered, FACEIO sends HTTP POST requests to configured URLs, containing event details such as user ID, event type, timestamps, and IP information, facilitating timely backend updates and proactive responses.

What is HTMX
HTMX simplifies web development by enabling direct access to browser features from HTML, reducing the need for extensive JavaScript and client-server communication management. Its client-side rendering capability minimizes full-page reloads, enhancing web app responsiveness. HTMX also facilitates real-time features like form submissions and live updates through intuitive HTML attributes like hx-get and hx-post.

Integrating FaceIO with HTMX
Integrating FaceIO with HTMX involves several steps to enable seamless facial authentication within web applications. Below are the key steps along with sample code snippets to demonstrate the integration process:

Setting up FaceIO
Obtain the public ID for your FaceIO application from the FaceIO Console.
Initialize the FaceIO facial recognition engine in your web application.
Sample code for setting up FaceIO:

<head>
  <script src="https://cdn.faceio.net/fio.js"></script>
  <script>
    // Initialize FaceIO with your public ID
    const faceIO = new FaceIO('YOUR_PUBLIC_ID');
  </script>
</head>

Integrating HTMX
Add the HTMX library to your project by including the script tag in your HTML.
Leverage HTMX attributes to define dynamic interactions, such as triggering FaceIO authentication on button click.
Sample code for integrating HTMX:

<head>
  <script src="https://cdn.jsdelivr.net/npm/htmx.org@1.6.1/dist/htmx.min.js"></script>
</head>
<body>
  <!-- Trigger FaceIO authentication on button click -->
  <button hx-get="/authenticate" hx-trigger="click">Authenticate with FaceIO</button>
</body>

*Creating server-side endpoints Node.js with Express *
Define server-side endpoints to handle FaceIO authentication requests.
Implement server-side logic to interact with the FaceIO API and authenticate users based on facial recognition.

const express = require('express');
const app = express();

// Endpoint to handle FaceIO authentication
app.get('/authenticate', async (req, res) => {
  try {
    // Call FaceIO API to perform facial authentication
    const authenticationResult = await faceIO.authenticate();

    // Handle authentication result (e.g., grant access or display error message)
    res.send(authenticationResult);
  } catch (error) {
    // Handle errors (e.g., log error message or return error response)
    res.status(500).send('Internal Server Error');
  }
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

Designing a seamless authentication experience
Customize the user interface to provide feedback during the FaceIO authentication process.
Handle authentication responses from the server to update the UI accordingly.
Sample code for updating UI based on authentication result:

<script>
  async function authenticateWithFaceIO() {
    try {
      // Perform FaceIO authentication via HTMX
      const response = await hx.get('/authenticate');

      // Update UI based on authentication result
      if (response.success) {
        alert('Authentication successful!');
      } else {
        alert('Authentication failed. Please try again.');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  }
</script>

Conclusion
In conclusion, the integration of FaceIO with HTMX offers a powerful solution for enhancing security and user experience in web applications. By leveraging facial authentication through FaceIO alongside the dynamic HTML interactions provided by HTMX, developers can create robust, user-friendly authentication systems. This integration not only strengthens security measures by mitigating password-related breaches but also streamlines the authentication process for users, promoting a seamless and efficient experience. Moving forward, exploring the synergy between FaceIO and HTMX opens up new avenues for web development, promising a future where secure and dynamic applications are readily accessible to users while maintaining the highest standards of privacy and usability.

Secure your Web Applications with Facial Authentication

Pius oruko — Sat, 11 Nov 2023 15:40:41 +0000

For the last three decades, web technology has remained relevant due to its versatile nature and wide range of applications in building solutions. The web runs virtually everything, from simple blog sites to complex and scalable web-based ERP systems in B2B, gaming, and fintech, as well as other industries.
In order to personalize the user experience in web applications, we need to authenticate them. Over the years, user authentication has evolved from 4-digit personal identification numbers (PINs) to multi-factor authentication. The latter requires users to provide additional data such as OTP codes, usually sent to their mobile number or emails in addition to a username and password.
However, these authentication techniques are not sufficient to counter popular web attacks such as brute force, credential snuffing, dictionary attacks, or even phishing. This requires advanced authentication tools such as biometrics. With biometric authentication, organizations and users can eliminate impersonation frauds, prevent unauthorized access as well as prevent identity theft without necessarily remembering passwords and other security puzzles. In this article, we are going to show how to authenticate users in web applications using facial recognition tool known as Faceio.

Authenticating users in web applications using facial recognition
Typically, implementing this technology would be costly in terms of hardware components required and training in-house AI models to identify users by facial recognition.
However, PixLab has developed a tool known as Faceio that enables developers to authenticate users in web applications via a seamless REST API. With Faceio, you can simply implement passwordless authentication with a few lines of code.

Faceio API
The FACEIO API provides a simple and elegant widget that provides a secure face authentication experience to your users through simple calls to the register() & authenticate() methods. This utility is powered by the fio.js JavaScript library, which is simple enough to integrate in minutes and flexible enough to support highly custom configurations. Once deployed on your website or web application, you will be able to authenticate your existing users and register new users securely, with the utmost convenience on your favorite browser.

Step 1: Import fio.js
To instatiate fio.js, you need to load it from the Faceio content delivery network. Paste the following code snippet within the

tag on your html page.

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

This code will load fio.js asynchronously without affecting page load speed.
This code will load fio.js asynchronously without affecting page load speed.
Step 2: Instantiate a new faceio object
Instantiate a new faceio() object and pass your application Public ID as follows. You can also insert this snippet just below the import code shown in Step 1.

<script type="text/javascript">
   /* Instantiate fio.js with your application Public ID */
    const faceio = new faceIO("app-public-id");
</script>

Retrieve your application Public ID is located at the Application Manager on the FACEIO Console.
Step 3: Invoke the Widget
To start the face recognition process, simply call register() or authentication(), the only two methods exported from the faceIO() class that you instantiated. register() is used to onboard new users (register) while authenticate() is used to authenticate previously registered users.
A typical implementation of this should be as shown in the code snippet below:

<html>
  <head>
    <title>Sign-In or Enroll via Face Recognition</title>
  </head>
  <body>
    <button onclick="enrollNewUser()">Enroll New User</button>
    <button onclick="authenticateUser()">Authenticate User</button>
    <div id="faceio-modal"></div>
    <script src="https://cdn.faceio.net/fio.js"></script>
    <script type="text/javascript">
        // Instantiate fio.js with your application's Public ID
        const faceio = new faceIO("app-public-id");
        function enrollNewUser(){
           // call to faceio.enroll() here will automatically trigger the on-boarding process
        }
        function authenticateUser(){
           // call to faceio.authenticate() here will automatically trigger the facial authentication process
        }
        function handleError(errCode){
            // Handle error here
        }
    </script>
  </body>
</html>

Enroll method
The register() method allows you to register new user transactions on your application. A better process is called integration. This is the equivalent implementation of the standard check-in/signup functionality in a traditional password-managed authentication system. An effective register() call, will trigger the FACEIO Utility, prompt the user for consent (if not already granted), request access (if not already granted) to the browser's webcam/front-camera stream, and finally extract and index the registered user's facial features for future authentication purposes.

The method takes some optional parameters such as locale for the interactive language, permissionTimeout is the number of seconds to wait for the user to grant access to the camera, but more importantly, register() accepts the payload, which is simply a tuple of arbitrary data that you can associate with that particular user, such as an email address, name, ID, etc. This payload will be returned to you upon future successful authentication of that particular user.
Usage
A typical invocation of the enroll method should look like this:

// Instantiate a new faceIO object with your application's Public ID
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
  faceio.enroll({
    "locale": "auto", // Default user locale
    "payload": {
        /* The payload we want to associate with this particular user which is forwarded back to us upon future authentication of this user.*/
        "whoami": 123456, // Dummy ID linked to this particular user
        "email": "john.doe@example.com"
        }
    }).then(userInfo => {
        // User Successfully Enrolled! 
        alert(
            `User Successfully Enrolled! Details:
           Unique Facial ID: ${userInfo.facialId}
           Enrollment Date: ${userInfo.timestamp}
           Gender: ${userInfo.details.gender}
           Age Approximation: ${userInfo.details.age}`
        );
       console.log(userInfo);
       // handle success, save the facial ID (userInfo.facialId), redirect to the dashboard...
    }).catch(errCode => {
       // Something went wrong during enrollment, log the failure
       handleError(errCode);
    })
}

Authenticate Method
The authenticate() method allows you to validate existing registered users on your application. It is an equivalent implementation of the standard login/login functionality in a traditional password-managed authentication system. An effective authenticate() call, will trigger the FACEIO utility, request access (if not already granted) to the browser's webcam/front camera stream, and finally initiate the facial recognition process. authentication() only requires a single image to run, takes less than 100 milliseconds on average to run, and is extremely bandwidth efficient, making it suitable for use in slow networks. Depending on your application's security configuration, after the basic facial recognition engine has successfully identified the target user, they must confirm their PIN (freely chosen during the sign-in process). sign) for method validation() to succeed and thus the Promise will be resolved.

promise = faceio.authenticate({parameters})
promise
.then(userData => {
  /* User successfully authenticated/identified */
})
.catch(errCode => {
  /* handle the error */
})

Usage
Below is a simple implementation of how you can authenticate registered users with Faceio using facial recognition

const faceio = new faceIO("app-public-id"); // Initialize with your application's Public ID
function authenticateUser(){
    faceio.authenticate({
        "locale": "auto" // Default user locale
    }).then(userData => {
        console.log("Success, user identified")
        // Grab the facial ID linked to this particular user which will be same
        // for each of his successful future authentication. FACEIO recommend 
        // that your rely on this Facial ID if you plan to uniquely identify 
        // all enrolled users on your backend for example.
        console.log("Linked facial Id: " + userData.facialId)
        // Grab the arbitrary data you have already linked (if any) to this particular user
        // during his enrollment via the payload parameter of the enroll() method.
        console.log("Payload: " + JSON.stringify(userData.payload)) // {"whoami": 123456, "email": "john.doe@example.com"} from the enroll() example above
    }).catch(errCode => {
        handleError(errCode)
    })
}

Authentication() returns a Promise whose implementation handler receives a userData object when the user has been successfully identified. The most important include payload, which is the arbitrary data you bound (if any) to that particular user when they registered via the payload parameter that the register() method takes, and the face ID, which is the unique identifier generic identity assigned to that particular user upon registration.
This face ID along with the payload data can act as a search key on your backend to retrieve data related to this particular user on each successful authentication, for example. The details of the userInfo object are documented in the Return Values section below. If the user denies the camera permission example, the promise will be rejected with the corresponding error code, such as fioErrCode.PERMISSION_REFUSED or fioErrCode.TERMS_NOT_ACCEPTED. Refer to the Error Codes section for a complete list of all possible error codes.

In summary, Faceio represents a significant leap in web application security. This facial recognition tool by PixLab simplifies user authentication with its seamless REST API, eliminating the need for expensive hardware and AI model training. With just a few lines of code, developers can implement passwordless authentication, enhancing both security and user experience. Faceio's biometric authentication empowers organizations and users to combat impersonation fraud, unauthorized access, and identity theft without the hassle of password management. By streamlining the onboarding of new users and validating existing ones, Faceio sets a new standard for web application security, offering robust protection against evolving cyber threats with a user-friendly approach.

Learn how to authenticate users via face recognition on your favorite no-code site builder platform

Pius oruko — Mon, 14 Aug 2023 16:48:41 +0000

face recognitionIn today's rapidly evolving digital landscape, ensuring the security of your website is paramount, regardless of your technical background. While the idea of integrating advanced technologies like facial recognition might seem complex, the emergence of user-friendly, no-code site builder platforms such as Wix has simplified the process. These platforms empower individuals who aren't developers to incorporate cutting-edge security features seamlessly. One such feature is facial recognition authentication, provided by FACEIO. In this article, we'll delve into the world of integrating facial recognition security into your favorite no-code site builder platform, demonstrating how accessible and advantageous this process can be.
Why Choose Facial Recognition Security?
Traditional authentication methods like passwords and PIN codes are susceptible to breaches and can lead to user frustration. Facial recognition security offers a convenient and highly secure alternative. Users can log in to your website by simply looking at their camera, eliminating the need to remember complex passwords. Integrating facial recognition with no-code platforms like Wix allows you to provide a seamless and secure experience for your website visitors.
Enhancing Security with Ease
Integrating facial recognition security into your no-code website doesn't require extensive technical knowledge. It's a user-friendly process that can significantly enhance your website's security posture. By following these steps, you can offer your users a convenient and secure way to access your website without the hassle of passwords.
Benefits Beyond Security
Facial recognition security not only enhances your website's security but also improves user experience. Users appreciate the simplicity and convenience of facial recognition, which can lead to increased user engagement and customer satisfaction. Additionally, by implementing advanced security measures, you're building trust with your users, showing them that their data is in safe hands.
Step-by-step process of integrating fio.js with your Wix website.
Step 1: Create an Account with FACEIO
Before you begin, you'll need to create an account with FACEIO. Visit their official website and sign up for an account. Once registered, you'll be able to create applications and access the tools needed to integrate facial recognition into your website.

Step 2: Generate Your Application Public ID
After creating your application on the FACEIO platform, you'll receive a unique Application Public ID. This ID is essential for connecting your Wix website to the FACEIO services.
Step 3: Importing fio.js to Your Wix Website
Log in to Your Wix Account: Head to the Wix dashboard and log in to your account.
Navigate to Settings: Within your site's dashboard, navigate to the "Settings" section.
Access Custom Code: Click on the "Custom Code" tab under the "Advanced" section. Here's where the magic happens.
Add fio.js Code: Click the "+ Add Custom Code" button at the top right. In the text box provided, paste the following code snippet:

<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
    const faceio = new faceIO("your-application-public-id");
</script>

Replace "your-application-public-id" with the Application Public ID you obtained from the FACEIO platform.
Step 4: Place Code in the Right Location
Choose where you want to place the code snippet within your website's HTML structure. You can select either the "Head," "Body - start," or "Body - end" placement options.
Step 5: Apply Your Changes
Click the "Apply" button to confirm your changes. Congratulations! You've successfully imported fio.js to your Wix website.
Step 6: Implementing the Facial Recognition Widget
With fio.js integrated into your Wix website, you're ready to implement the facial recognition widget. This involves invoking the enroll() or authenticate() methods based on user actions. For instance, you can create buttons that trigger the enrollment or authentication process when clicked.

<button onclick="enrollNewUser()">Enroll New User</button>
<button onclick="authenticateUser()">Authenticate User</button>
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
    const faceio = new faceIO("your-application-public-id");
    function enrollNewUser(){
        // Call to faceio.enroll() here will trigger the on-boarding process
    }
    function authenticateUser(){
        // Call to faceio.authenticate() here will trigger the facial authentication process
    }
</script>

By following these steps, you've seamlessly integrated facial recognition into your Wix website using FACEIO's fio.js library. Users can now enjoy the convenience of secure facial authentication while benefiting from enhanced security features. For a WordPress website, Install and Activate WPCode plugin. With WPCode in place, navigate to the 'Code Snippets' menu. Choose 'Add Your Custom Code (New Snippet)'. Follow the same process as with the implementation of FACEIO on Wix, then toggle the switch from 'Inactive' to 'Active,' then hit 'Save Snippet.' Your snippet is now ready to enhance your site.
Conclusion
In conclusion, the process of integrating facial recognition authentication into your preferred no-code site builder platform, such as Wix, has been made remarkably accessible and efficient thanks to the remarkable capabilities of FACEIO's fio.js library. This seamless integration empowers you to offer your website visitors an authentication method that marries both security and user-friendliness to create an unparalleled experience.
By diligently following the comprehensive step-by-step guide outlined in this article, you can confidently implement facial recognition security without the need for extensive technical expertise. Importantly, the advantages extend far beyond mere security enhancement. By incorporating this cutting-edge technology, you're gifting your users a streamlined and effortless login process, which inevitably leads to heightened engagement levels and amplified customer satisfaction.
In today's ever-evolving digital arena, staying ahead demands embracing advanced security measures, and facial recognition stands as a prime example of such innovation. This technology not only acts as a guardian for sensitive data but also acts as a builder of trust and credibility with your user base. Capitalizing on the robust tools provided by FACEIO, coupled with the user-friendly nature of no-code site builders, positions your website as a vanguard of contemporary security and user experience trends.
Furthermore, let's not overlook the extraordinary potential of facial recognition integration within the WordPress ecosystem. For WordPress enthusiasts, FACEIO's fio.js library harmonizes seamlessly, allowing you to fortify your website's security architecture effortlessly. This ensures that your users are met with not only a secure online environment but also a seamless avenue to explore the content and services they hold dear.
Incorporating facial recognition into your website transcends the realm of adaptation; it's about granting your users a secure, swift, and hassle-free interaction with your digital domain. As you embark on this journey to integrate facial recognition security, you're not merely safeguarding your website; you're fashioning an unobtrusive gateway for your users to access the content and services they cherish. So, without hesitation, embrace the stride towards enhancing your website's security and user experience through facial recognition authentication - an advancement that your users will genuinely appreciate and acknowledge.

If you need further help on adding face authentication on your WordPress, WiX or any other website builder you can email me at 0ruko002atgmaildotcom

Building Face Authentication in React with FaceIO and Bootstrap 5

Pius oruko — Sat, 27 May 2023 10:11:21 +0000

Web authentication has evolved significantly over time, moving away from traditional login/password pairs towards more secure and convenient methods. One of the latest advancements in web authentication is facial authentication, which provides a seamless and secure way to authenticate users using their face instead of passwords or OTP codes. In this article, we will explore how to build face authentication in a React application using the FaceIO library and Bootstrap 5. With FaceIO, we can easily integrate facial recognition into our web application, offering a passwordless experience to users. Let's dive into the implementation details and create a robust and user-friendly face authentication system in React.
FACEIO features: Secure, Convenient, and Privacy-Focused

FACEIO provides instant user authentication without the need for additional keys or codes. With defense-grade accuracy and fast recognition speeds, it offers reliable facial recognition powered by advanced engines. Its independence from external dependencies and cross-browser compatibility make it accessible and cost-effective on any device. Utilizing facial recognition helps reduce fraud and enables passwordless authentication for improved conversion rates. FACEIO prioritizes user privacy, following strict policies and procedures. It offers flexible deployment options, including cloud and on-premise solutions, ensuring complete control over user data. With built-in privacy tools, it allows for user opt-out and deletion while safeguarding data privacy.
Step 1: Create a React project with Bootstrap
Open your terminal and run the following command to scaffold your React project using Create React App with Bootstrap template:

npx create-react-app my-project
cd my-project
npm install bootstrap@5.0.0

Step 2: Install FaceIO library
Create a FaceIO account and get the required credentials, such as the FaceIO CDN link and public ID, from the FaceIO console.
Open the index.html file in your project and add the FaceIO CDN link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FaceIO Authentication</title>
  <!-- Add Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
  <!-- Add FaceIO CDN -->
  <script src="https://cdn.face.io/faceio.js"></script>
</head>
<body>
  <div id="root"></div>
  <script src="./src/index.js"></script>
</body>
</html>

Step 3: Create a React component for authentication
Replace the contents of src/App.js with the following code:

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const initFaceIO = async () => {
      try {
        const faceIO = new FaceIO('YOUR_FACEIO_ID');
        await faceIO.init();
        console.log('FaceIO initialized successfully');
      } catch (error) {
        console.error('Failed to initialize FaceIO:', error);
      }
    };
    initFaceIO();
  }, []);

  const handleRegister = async () => {
    try {
      const faceIO = new FaceIO('YOUR_FACEIO_ID');
      const enrollOptions = {
        locale: 'auto',
        payload: { email: 'user@example.com' }
      };
      const userInfo = await faceIO.enroll(enrollOptions);
      console.log('User registered successfully:', userInfo);
    } catch (error) {
      console.error('Failed to register user:', error);
    }
  };

  const handleLogin = async () => {
    try {
      const faceIO = new FaceIO('YOUR_FACEIO_ID');
      const userData = await faceIO.authenticate();
      console.log('User authenticated successfully:', userData);
    } catch (error) {
      console.error('Failed to authenticate user:', error);
    }
  };

  return (
    <div className="container">
      <h1 className="my-4">FaceIO Authentication</h1>
      <div className="d-grid gap-2 col-6 mx-auto my-4">
        <button className="btn btn-primary" onClick={handleRegister}>
          Register
        </button>
        <button className="btn btn-success" onClick={handleLogin}>
          Log In
        </button>
      </div>
    </div>
  );
};

export default App;

Step 4: Style the application using Bootstrap
Open the src/index.js file and replace its contents with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 5: Start the development server
Save all the changes and start the development server:
npm start
Now, you can open your browser and access the application at http://localhost:3000. The page will display buttons for user registration and login. When clicked, the respective functions will be triggered, calling FaceIO functions to perform enrollment and authentication.
Remember to replace 'YOUR_FACEIO_ID' in the code with your actual FaceIO ID obtained from the FaceIO console.
Note: This tutorial assumes you have the necessary FaceIO library and credentials. Please refer to the official FaceIO documentation for more details on the library and its usage.
Managing FACEIO application after implementation

- Addressing security

FACEIO offers a range of core security features to enhance the security of your applications. These features include rejecting weak PIN codes during enrollment, preventing duplicate enrollments, detecting face spoofing attempts, forbidding minors from enrolling, asking for PIN codes during authentication, enforcing PIN code uniqueness, handling obscured and partially masked faces, and verifying HTTP request headers. Additional security measures include restricting widget instantiation to authorized domain names and countries, enabling webhooks for real-time event notifications, and configuring specific security settings through the Application Manager. By leveraging these features, developers can ensure a robust and secure face authentication experience for their users.

- Privacy handling

Privacy by Design is a core principle in FACEIO, ensuring privacy is prioritized throughout the development process. The platform includes tools for privacy protection, such as access controls, user consent during enrollment, and easy opt-out options. When implementing FACEIO, it is crucial to communicate privacy practices and offer features like Unique Facial ID access and deletion. Responsibility lies with the application owner to safeguard and manage Unique Facial IDs, complying with privacy best practices and legal requirements like GDPR. Meaningful consent is essential, allowing users to be aware, have freedom of choice, maintain control, and understand the purpose and assurances of facial recognition technology. FACEIO recommends obtaining appropriate consent, providing clear notifications, and enabling users to revoke consent and delete their data. Additional recommendations include avoiding auto-enrollment, notifying users of biometric hash use, understanding legal requirements, providing policies and disclosures, following data retention policies, implementing data security measures, and conducting regular security audits. By adhering to these recommendations, application owners can create a privacy-centric and secure facial recognition experience.
Rest API endpoints

URL access endpoints in FACEIO play a crucial role in interacting with the FACEIO API and managing various aspects of your FACEIO application. These endpoints allow you to perform specific actions, retrieve information, and control the behavior of your facial recognition system. Here's an explanation of the role of each URL access endpoint:
**

DELETEFACIALID Endpoint:
**
Role: This endpoint enables you to programmatically delete (purge) a Facial ID, its linked payload data, and associated biometrics hash from your FACEIO application. It helps you remove user-specific data from your system.
Access URL: https://api.faceio.net/deletefacialid
CHECKFACIALID Endpoint:
Role: The CHECKFACIALID endpoint allows you to perform an authenticity check of a given Facial ID. It verifies whether the supplied Facial ID is valid and registered in your FACEIO application.
Access URL: https://api.faceio.net/checkfacialid
**
SETFACIALIDPAYLOAD Endpoint:
**
Role: This endpoint enables you to set or update payload data linked to a particular enrolled user on your FACEIO application via their Facial ID. The payload data is forwarded back to you upon successful authentication of that user in the future.
Access URL: https://api.faceio.net/setfacialidpayload
**
SETFACIALIDPINCODE Endpoint:
**
Role: The SETFACIALIDPINCODE endpoint allows you to set or change the PIN code linked to a specific enrolled user on your FACEIO application via their Facial ID. The PIN code is used for facial authentication and can be updated as needed.
Access URL: https://api.faceio.net/stat
In conclusion, implementing face authentication in a React application using FaceIO and Bootstrap 5 offers a secure and convenient method for user authentication. With FaceIO, developers can integrate facial recognition with defense-grade accuracy and fast recognition speeds. The platform prioritizes user privacy, follows privacy-by-design principles, and provides tools for privacy protection and consent management. Addressing security is crucial, and FACEIO offers core security features to enhance application security. The REST API endpoints in FACEIO play a crucial role in managing the facial recognition system. By considering these aspects and following implementation details, developers can create a user-friendly and secure face authentication system in React.

Implementing FaceIO for Facial Recognition in React: A Step-by-Step Guide

Pius oruko — Wed, 03 May 2023 14:02:40 +0000

Facial recognition has become an increasingly popular technology in recent years, with numerous applications in security, authentication, and user experience. One of the most powerful tools available for facial recognition is FaceIO by PixLab, a cloud-based API that allows developers to quickly and easily implement facial recognition capabilities in their applications.

In this article, we'll explore how to use FaceIO in a React application to build a simple facial recognition system. We'll start by discussing the basics of FaceIO and how it works, then move on to setting up a React project and integrating FaceIO into it. By the end of this tutorial, you'll have a solid understanding of how to use FaceIO in your own React applications, and be able to build powerful facial recognition systems that can be used in a variety of contexts.
How it works
Faceio is a facial recognition tool that can be integrated into web applications to enable secure user authentication. To use Faceio, developers must first initialize their application with a unique application ID obtained by signing up for the service. Once initialized, the developer can add Enroll and Authenticate buttons to their application and use the provided fio.js library to handle the facial recognition functionality. When a user clicks the Enroll button, the enroll() function is invoked to capture and store the user's facial features. On subsequent Authenticate button attempts, the authenticate() function is used to compare the stored facial features with the user's current appearance. If a match is found, the user is successfully authenticated. To ensure a smooth user experience, the developer must also handle any errors that may occur during the facial recognition process. The error codes and descriptions can be found in the fio.js documentation.
Getting started
npm init vite@latest my-react-app --template react
This command uses the npm init command with the vite package to create a new project named my-react-app. The --template option specifies that we want to use the React template provided by Vite, which will set up a new React project with all the necessary dependencies and configuration files. This is what the project structure will be like when you open the project folder using the code editor you are using.

project-root/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── index.js
│   ├── App.js
│   ├── components/
│   ├── pages/
│   ├── assets/
│   ├── utils/
│   └── ...
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.js

To begin implementing facial recognition using FaceIO, start by adding their JavaScript library to your index.html file. This can be done by including their content delivery network (CDN) link within the body tag of your HTML document. It's important to note that you should always load the fio.js library directly from cdn.faceio.net, rather than self-hosting it. This ensures that you'll receive bug fixes and new features.

<body>
    <script src="https://cdn.faceio.net/fio.js"></script>
    <div id="root"></div>
    <script type="module" src="/src/App.jsx"></script>
</body>

To obtain FaceIO IDs, you need to sign up for a FaceIO account. Once you have created an account, you can access your FaceIO IDs inside the FaceIO console. The FaceIO console is an online platform where you can manage your FaceIO account, including your API keys and access to the FaceIO AI models. After logging in to the FaceIO console, navigate to the "API Keys" section to view your FaceIO IDs. From there, you can copy and use the IDs in your code to interact with FaceIO's AI models, including its facial recognition features.

Create a new FaceIO application to get a public ID

Next, inside the src/ directory of the project, open the App.jsx file and add the following source code;

// Import required dependencies and CSS
import "./App.css";
import { useState, useEffect } from "react";

// Define the App component
function App() {
// Set up state variables for FaceIO instance and error messages
const [faceio, setFaceio] = useState(null);
const [error, setError] = useState(null);

// Use useEffect hook to initialize FaceIO instance when component mounts
useEffect(() => {
const initializeFaceIO = async () => {
try {
// Create a new instance of FaceIO with your public ID
const faceioInstance = new faceIO("YOUR_PUBLIC_ID");
// Update state with the instance
setFaceio(faceioInstance);
} catch (error) {
// Set error state if initialization fails
setError("Failed to initialize FaceIO: " + error.message);
}
};
initializeFaceIO();
}, []);

// Define function to handle enrollment
const handleEnroll = async () => {
try {
// Call the enroll method of the FaceIO instance with necessary options
const response = await faceio.enroll({
locale: "auto",
payload: {
email: "example@gmail.com",
pin: "12345",
},
});
// Log enrollment details to the console
console.log(Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age});
} catch (error) {
// Set error state if enrollment fails
setError("Enrollment failed: " + error.message);
}
};

// Define function to handle authentication
const handleAuthenticate = async () => {
try {
// Call the authenticate method of the FaceIO instance with necessary options
const response = await faceio.authenticate({
locale: "auto",
});
// Log authentication details to the console
console.log(Unique Facial ID: ${response.facialId} PayLoad: ${response.payload});
} catch (error) {
// Set error state if authentication fails
setError("Authentication failed: " + error.message);
}
};

// Render the component
return (
<section>
<h1>Facial Authentication with FaceIO</h1>
<button onClick={handleEnroll}>Enroll</button>
<button onClick={handleAuthenticate}>Authenticate</button>
{error && <div className="error">{error}</div>}
</section>
);
}

// Export the App component as default
export default App;

The component above, imports useState and useEffect hooks from the react package, as well as the App.css file. It defines a App function component that returns a section containing a title, two buttons, and an error message.

The useState hook is used to declare two state variables, faceio and error, which are initialized as null. The faceio variable will hold the instance of the faceIO class provided by the FaceIO API, while error will hold any error messages that might occur during the authentication process.

The useEffect hook is used to initialize the faceio variable with a new instance of the faceIO class using the FaceIO public ID. If an error occurs during initialization, it will be caught and displayed in the error variable.

Two asynchronous functions, handleEnroll and handleAuthenticate, are defined to handle the enrollment and authentication processes, respectively. They both make use of the await keyword to wait for the response from the FaceIO API.

handleEnroll sends an enrollment request to the FaceIO API with the user's email and pin as payload. If the request is successful, it logs the user's facial ID, enrollment date, gender, and age approximation to the console. If an error occurs, it sets the error variable with an appropriate message.

handleAuthenticate sends an authentication request to the FaceIO API. If the request is successful, it logs the user's facial ID and payload to the console. If an error occurs, it sets the error variable with an appropriate message.

The component returns a section containing a title, two buttons, and an error message. Clicking on the "Enroll" button calls the handleEnroll function, while clicking on the "Authenticate" button calls the handleAuthenticate function. If an error occurs during the authentication process, the error message will be displayed on the page. This is how the final version of the FaceIO integration project will look:

Privacy and security at Faceio
Facial ID is a unique identifier assigned anonymously by the facial recognition engine to each enrolled user on the FACEIO application, facilitating GDPR compliance and privacy protection. The facial recognition engine maps each enrolled user's face into a mathematical feature vector, which is stored as a biometric hash in a sand-boxed binary index. The two production-hardened facial recognition engines available are PixLab Insight and AWS Rekognition. Facial vectors are meaningless on their own and cannot be reverse-engineered. Facial ID deletion occurs via a simple REST API call to the /DELETEFACIALID API endpoint. Facial IDs are subject to data protection, including the right to be forgotten. Privacy and security are addressed with TLS encrypted transactions, security configuration options, and PIN code requirements, among others.

Thanks for taking the time to read this tutorial guide.

Face authentication using FaceIO and Vue.Js

Pius oruko — Tue, 28 Mar 2023 14:04:15 +0000

With the widespread use of the internet for various applications, the need for secure user authentication has become increasingly important. While traditional methods such as email and password authentication and third-party authentication providers have been commonly used, the emergence of facial recognition technology has provided a new and innovative approach. In this article, we will explore how to incorporate facial recognition authentication into your web application using the popular JavaScript framework, Vue.js. Specifically, we will be utilizing Faceio’s facial recognition authentication and providing step-by-step instructions on how to integrate it into your Vue.js application. Whether you are a developer looking to enhance your web app’s security or simply interested in learning about the latest advancements in web authentication, this article is for you.

Reasons for implementing face authentication technology

Face authentication is gaining popularity because it provides a more convenient and safe way to authenticate users than conventional techniques like email and password authentication. visage authentication allows users to instantly verify their identity by simply presenting their visage to a camera. By removing the need for users to manually enter passwords or recall them, this can lower the risk of password-related security breaches. Face authentication is a trustworthy method of preventing fraud and identity theft because it is difficult to trick or imitate.

As shown by the application we are going to create using a Vue.js application with FaceIO’s facial recognition feature using the fio.js library, facial recognition technology is simple to integrate into web applications. This library manages the intricate details of facial recognition, making integration easy. Additionally, by removing the need for users to recall passwords, facial recognition can make their user experience more convenient. As is the case with FaceIO, an extra layer of verification, such as a PIN, can be added to further increase security. Users only need to enable the camera to scan their faces for authentication when using facial recognition.
Enabling face authentication by building a registration application with Faceio and Vue.Js

Step 1

Certainly, let’s proceed with developing your simple application. The user interface will consist of three buttons: one for registering, one for signing in, and one for logging out. The application’s functionality is straightforward — the user must register first, then sign in, and after doing so, the logout button will become visible while the other two buttons will disappear. This is the desired outcome for the completed project. First, let's create a Vue.Js face-recognition project. Make sure that you have installed Node.Js and NPM, and that the Vue CLI is installed globally then create a new Vue.js project;
vue create faceRecognition
Step 2

Sure, the next step is to add fio.js to our project. To do this, you can navigate to the HTML file and add a div element with the ID “faceio-modal” and the fio.js Content Delivery Network (CDN) at the end of the body.

<div class="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
 const faceio = new faceIO('Your app id goes here')
 window.faceio=faceio
</script>

Another approach to accomplishing this is by assigning the faceIO object to the window.faceio variable and creating an instance in the Vue.js JavaScript code while storing the app ID in a .env file.

Moving on, to update the App.vue file, you can replace the HelloWorld component with an AuthenticationComponent and include the CSS code below. As a result, the App.vue component will have a new appearance that reflects these changes.

<template>
<div class='app'>
  <AuthenticationComponent />
 </div> 
</template>

<script>
import AuthenticationComponent from './components/Authentication.vue'

export default {
  name: 'App',
  components: {
    AuthenticationComponent
  }
}
</script>

<style>
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh
}

</style>

Step 3

Alright, let’s proceed with updating the Authentication.vue file, which was previously the HelloWorld component. Firstly, we will clear the template and add three buttons — one for login, one for registration, and one for logout. Additionally, we need to create a user state and initialize its value to an empty string.

Using the v-if attribute, we can ensure that the login and registration buttons are visible only when the user is not logged in, while the logout button is visible only when the user is logged in. We will also associate each button with its respective click event, which we will define shortly. To style the UI, I have added some basic CSS. The resulting template will look something like this:

<template>
  <div class="Authentication">
    <h1>Face recognition with FaceIO</h1>
    <div class='container'>
    <div v-on:click='login' class='btn' v-if="user === ''">Sign in</div>
    <div class='btn' v-on:click='register' v-if="user === ''">Register</div>
    <div class='btn' v-on:click='logout'  v-if="user != ''">Log out</div>
    </div>
  </div>
</template>

<style scoped>
.container{
  width:90%;
  margin:20px auto;
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:1em;
}
.btn{
  border:1px solid black;
  border-radius:5px;
  padding:1em 2em;
}
.btn:hover{
  background:#000;
  color:#fff
}
</style>

Step 4

Sure, moving on to the JavaScript part, the first step is to create a state variable to keep track of the users. This can be achieved as shown below:

data(){
   return {
    user:''
   }
  },

Step 5

Certainly, the next step is to create the login, register, and logout functions:

The logout function is straightforward, as it simply sets the user state variable to an empty string. On the other hand, for the register function, we can use the method provided by fio.js, which can be accessed from the window object. This function requires a payload object that contains data that will be returned when the same user logs in again. The code for this function is relatively simple and is shown below.

 register(){
  window.faceio.enroll({
    "locale": "auto", 
    "payload": {
        "whoami": 123456,
        "email": "john.doe@example.com"
        }
    }).then(userInfo => {
        // User Successfully Enrolled! 
        alert(
            `User Successfully Enrolled! Details:
           Unique Facial ID: ${userInfo.facialId}
           Enrollment Date: ${userInfo.timestamp}
           Gender: ${userInfo.details.gender}
           Age Approximation: ${userInfo.details.age}`
        );
       console.log(userInfo);
       // handle success, save the facial ID (userInfo.facialId), redirect to the dashboard...
    }).catch(errCode => {
       // Something went wrong during enrollment, log the failure
       console.log(errCode);
    })
   },
  logout(){
   this.user=''
   }

Step 6

Great! You can find the documentation for the fio.js library here.

Moving on to the login function, fio.js also provides a method for user login that returns the data passed as an argument to the enroll function when the user registers. Here’s how it works:

 login(){
    window.faceio.authenticate({
        "locale": "auto" // Default user locale
    }).then(userData => {
        console.log("Success, user identified")
        console.log("Linked facial Id: " + userData.facialId)
        console.log("Payload: " + JSON.stringify(userData.payload)) // {"whoami": 123456, "email": "john.doe@example.com"} from the enroll() example above
        this.user=userData.payload.whoami
    }).catch(errCode => {
        console.log(errCode)
    })
   }

Conclusion

In conclusion, facial recognition authentication technology is becoming increasingly popular due to its convenience and safety in verifying user identities. Integrating this technology into web applications is also becoming simpler with the use of libraries such as fio.js. With FaceIO, an extra layer of security, such as a PIN, can be added to increase security, and the technology is compliant with privacy laws, ensuring the safety of user data. In this article, we have provided step-by-step instructions on how to incorporate FaceIO’s facial recognition feature into a Vue.js web application. By following the steps outlined in this article, developers can implement facial recognition authentication into their own web applications, enhancing the user experience and increasing security.

Thanks for taking the time to read this article