Dans ce didacticiel, nous allons créer une application Web simple mais intelligente, pour montrer comment authentifier les utilisateurs sur un site Web ou une application Web typique via la reconnaissance faciale au lieu de la traditionnelle paire identifiant/mot de passe.
Dans ce processus, nous allons nous appuyer sur FaceIO comme bibliothèque de reconnaissance faciale, React.js comme framework JavaScript, et TailwindCss comme framework CSS.
La version finale de ce projet ressemble à ceci. Sans plus tarder, commençons.
Aperçu
Veuillez garder à l’esprit que bien que ce didacticiel se concentre sur l’intégration de FaceIO avec React, le fio.jsla bibliothèque de reconnaissance faciale peut être intégrée à n’importe quel framework JavaScript moderne, y compris, mais sans s’y limiter, Réagir, Vue, Angulaire, Suivant ou encore Vanilla JavaScript. Le lecteur est invité à consulter le guide d’intégration FaceIO ou la documentation de démarrage pour un guide d’intégration étape par étape.
Création d’un projet React.JS avec Tailwind CSS
Nous utilisons vite pour créer le projet ReactJs dans ce tutoriel. Ouvrez votre terminal et exécutez la commande suivante pour échafauder votre projet React à l’aide de vite.
npm create vite@latest my-project — — template react
Suivez maintenant l’invite du terminal pour échafauder votre projet. Une fois cette étape terminée, ouvrez ce projet dans votre éditeur de code préféré. La structure du projet devrait ressembler à ceci.
.
├── index.html
├── package.json
├── package-lock.json
├── public
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ └── main.jsx
└── vite.config.jsMaintenant, pour installer tailwind CSS dans votre projet vite, suivez attentivement ces étapes.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pOuvrez maintenant votre tailwind.config.cjs fichier et ajoutez le chemin source de votre projet.
A l’intérieur de votre src/App.css fichier, ajoutez des directives CSS tailwind.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}@tailwind base;
@tailwind components;
@tailwind utilities;Vous avez maintenant installé avec succès le CSS tailwind dans votre projet React and vite. Concentrons-nous sur la façon d’intégrer l’authentification faciale dans notre projet dans la section suivante, tous alimentés par FaceIO.
Ajouter FaceIO à votre application React
La grande chose à propos de fio.js bibliothèque de reconnaissance faciale est son utilisation simple. Cette bibliothèque est livrée avec seulement deux méthodes principales qui sont : enroll() et authenticate().
enroll() est pour l’inscription (enregistrement) de nouveaux utilisateurs, tandis que authenticate() sert à reconnaître les utilisateurs précédemment inscrits. Avant d’aborder ces méthodes, lions les fio.js bibliothèque à notre application de réaction en premier. Pour cela, il suffit d’ouvrir le index.html fichier dans votre projet et liez FaceIO CDN à votre projet.
<body>
<script src="https://cdn.faceio.net/fio.js"></script>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>Après avoir réussi à lier le CDN FaceIO, ouvrez App.jsx fichier et supprimer tout le code passe-partout à l’intérieur App composant. Pour lancer notre bibliothèque FaceIO, nous ajoutons un useEffect crochet de réaction. Le code à l’intérieur de ce crochet ne s’exécute qu’une seule fois lorsque le composant est lancé.
import "./App.css";
import { useEffect } from "react";
function App(){
let faceio;
useEffect(() => {
faceio = new faceIO("fioa414d");
}, []);
}Vous pouvez voir que nous utilisons un ID comme argument lors de l’instanciation du faceIO objet. Lorsque vous vous inscrivez pour un compte faceIO, vous pouvez accéder à ces identifiants à l’intérieur du faceIO console.
Toute la configuration est maintenant terminée et concentrons-nous sur l’authentification de l’utilisateur à l’aide de FaceIO.
Inscrire (enregistrer) de nouveaux utilisateurs via la reconnaissance faciale
FaceIO utilise inscrire fonction pour enregistrer un nouvel utilisateur. Comme FaceIO a besoin de l’autorisation de votre webcam, acceptez la boîte de dialogue d’autorisation lorsque vous y êtes invité.
La fonction d’inscription a 2 alias. Vous pouvez utiliser register et record fonctionne comme des remplacements directs pour enroll.
Lorsque vous exécutez cette fonction dans votre navigateur, elle lance les widgets faceIO. Au début, il faut le consentement de l’utilisateur pour scanner son visage, puis l’inviter à accepter l’autorisation de la webcam. Si toutes les conditions sont satisfaites, le widget faceIO ouvre votre appareil photo et scanne votre visage. Il convertit vos données faciales en un tableau de nombres à virgule flottante.
Après avoir collecté les données faciales, faceIO est invité à entrer un code PIN. Ce code PIN est utilisé pour distinguer les utilisateurs avec des visages extrêmement similaires. Vous considérez cela comme une authentification à deux facteurs lorsque quelque chose va mal.
Ajoutons faceIO inscrivez-vous dans notre application de réaction. Nous gardons l’application très simple. Par conséquent, créons un bouton appelé register quand quelqu’un clique sur ce bouton, nous exécutons le enroll fonction pour inscrire un nouvel utilisateur.
Après avoir ajouté le bouton d’enregistrement et le gestionnaire javascript sur le bouton cliquez, App.jsx le fichier ressemble à ceci.
import "./App.css";
import { useEffect } from "react";
function App() {
let faceio;
useEffect(() => {
faceio = new faceIO("fioa414d");
}, []);
const handleRegister = async () => {
try {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "example@gmail.com",
},
});
console.log(` Unique Facial ID: ${response.facialId}
Enrollment Date: ${response.timestamp}
Gender: ${response.details.gender}
Age Approximation: ${response.details.age}`);
} catch (error) {
console.log(error);
}
};
return (
<section className="w-full h-screen flex flex-col items-center justify-center">
<h1 className="font-sans font-bold text-xl mb-4">
Face Authentication by FaceIO
</h1>
<div className="flex flex-col justify-center items-center">
<button
className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2"
onClick={handleRegister}
>
register
</button>
</div>
</section>
);
}
export default App;Le code ci-dessus montre que j’enveloppe le code dans un bloc try-catch. Si quelque chose ne va pas, FaceIO génère des erreurs. Les messages d’erreur sont très utiles et vous pouvez obtenir une liste complète des codes d’erreur dans la documentation officielle.
La fonction d’inscription n’accepte qu’un objet paramètre facultatif. Ces paramètres facultatifs prennent des propriétés pour configurer le processus d’enregistrement de l’utilisateur. Dans l’exemple ci-dessus, je définis locale et payload properties à l’intérieur du paramètre facultatif de la fonction d’inscription. le locale La propriété représente la langue d’interaction par défaut de votre utilisateur. Dans notre cas, nous fournissons auto pour détecter automatiquement la langue.
À l’intérieur de payload, vous pouvez ajouter n’importe quelle valeur sérialisable JSON unique à votre utilisateur. Dans cet exemple, nous ajoutons l’e-mail de l’utilisateur en tant que charge utile. Chaque fois que vous utiliserez la connexion à l’avenir, nous pourrons accéder à la charge utile de l’e-mail à partir de l’objet de retour FaceIO.
La fonction d’inscription dans FaceIO renvoie une promesse. Par conséquent, dans l’exemple, j’utilise la fonctionnalité async/wait de javascript. Si vous ne préférez pas async/wait, vous pouvez utiliser .then plutôt.
Lorsque la promesse se termine, il en résulte un userInfo objet. En utilisant l’objet, nous pouvons accéder à l’identifiant facial unique de l’utilisateur. En plus de cela, l’objet userInfo fournit également un details propriété à partir de laquelle nous pouvons obtenir l’âge et le sexe probables de l’utilisateur.
Authentifier un utilisateur précédemment inscrit
Après avoir enregistré l’utilisateur avec succès, c’est le moment d’authentifier les utilisateurs enregistrés. A cet effet, Pixlab fournit le authenticate fonction. Ce authenticate la fonction a aussi 3 alias, auth, recognize et identify.
La fonction d’authentification n’a besoin que d’une seule trame pour que l’utilisateur la reconnaisse. Par conséquent, il est très convivial pour la bande passante. Après une authentification réussie, il renvoie un userData objet. Ce userData contient la charge utile que vous avez spécifiée dans l’enregistrement et le visage de l’utilisateur.
À l’intérieur de App.jsx fichier, nous créons un autre bouton appelé Connexion. Lorsqu’un utilisateur clique sur ce bouton, il appelle le handleLogIn fonction d’assistance. Cette fonction est responsable en dernier ressort d’invoquer la fonction « authentification ». Voyons tout cela dans le code
import "./App.css";
import { useEffect } from "react";
function App() {
let faceio;
useEffect(() => {
faceio = new faceIO("fioa414d");
}, []);
const handleRegister = async () => {
try {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "example@gmail.com",
},
});
console.log(` Unique Facial ID: ${response.facialId}
Enrollment Date: ${response.timestamp}
Gender: ${response.details.gender}
Age Approximation: ${response.details.age}`);
} catch (error) {
console.log(error);
}
};
return (
<section className="w-full h-screen flex flex-col items-center justify-center">
<h1 className="font-sans font-bold text-xl mb-4">
Face Authentication by FaceIO
</h1>
<div className="flex flex-col justify-center items-center">
<button
className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2"
onClick={handleRegister}
>
register
</button>
</div>
</section>
);
}
export default App;API REST
Lors de la création de votre compte dans FaceIO, une clé API vous sera attribuée. Vous pouvez trouver cette clé API dans la console faceIO. En utilisant cette clé API, vous pouvez interagir avec le back-end FaceIO avec l’API RESTful. L’URL de base de l’API REST est `https://api.faceio.net/`.
Actuellement, l’API FaceIO REST prend en charge 3 fonctions. Suppression du visage d’un utilisateur, définition de la charge utile supplémentaire sur un identifiant facial et définition du code PIN pour un identifiant facial. N’oubliez pas d’utiliser ces points de terminaison d’API à partir d’un…