Authentification faciale sans mot de passe sur les sites Web ! (FACEIO)

Qu'est-ce que FaceIO et pourquoi l'utiliser ? ?

FaceIO est un service qui permet aux sites Web et aux applications de reconnaître une personne grâce à son visage à l'aide d'une webcam.

Au lieu de saisir un mot de passe ou d'utiliser une empreinte digitale, les utilisateurs peuvent simplement regarder la caméra et l'application peut confirmer qui ils sont.

Ceci est utile car :

• ⚡ C'est plus rapide que de taper des mots de passe.
• ? C'est plus sécurisé car seule la personne avec ce visage peut accéder à l'application.
• ? Les utilisateurs n'ont pas besoin de mémoriser des mots de passe compliqués.

Comment fonctionne FaceIO ?

Il existe deux actions principales avec FaceIO :

1. ⛳ Inscription d'un utilisateur : Cela signifie enregistrer le visage de l'utilisateur pour la première fois.
2. ? Authentifier un utilisateur : Cela signifie vérifier si la personne devant la caméra est la même que la personne qui s'est inscrite plus tôt.

Configurer FaceIO dans une page Web ?️

Pour utiliser FaceIO, vous devez ajouter leur bibliothèque JavaScript (un code spécial qui effectue la détection des visages) à votre site Web. Voici comment procéder :

1. Inclure le script :
Ajoutez une balise de script dans votre fichier HTML qui pointe vers la bibliothèque de FaceIO :

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

? Ce script permet à votre site Web d'utiliser les fonctionnalités de FaceIO.

2. Créer des boutons pour s'inscrire et s'authentifier :
Dans votre HTML, ajoutez deux boutons :

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

? Lorsqu'un utilisateur clique sur ces boutons, il s'inscrira (enregistrera son visage) ou s'authentifiera (vérifiera son visage).

Inscrire un utilisateur ?

Le processus de sauvegarde du visage d'un nouvel utilisateur est appelé inscription. Voici le code JavaScript correspondant :

function enrollNewUser() {
    const faceio = new faceIO("app-public-id"); // Replace with your app's ID

    faceio.enroll({
        locale: "en", // This sets the language to English
        payload: {
            email: "user@example.com" // Link this user's email or any other unique ID
        }
    }).then(userInfo => {
        console.log("User enrolled successfully!");
        console.log("User ID: " + userInfo.facialId);
        console.log("Enrollment Date: " + userInfo.timestamp);
        alert("Enrollment successful! Welcome, user.");
    }).catch(err => {
        handleError(err);
    });
}

?‍♂️ À quoi sert ce code ?

• Il appelle la fonction enroll() de FaceIO pour démarrer le processus.
• locale désigne la langue préférée de l'utilisateur.
• payload sont des informations supplémentaires sur l'utilisateur (comme son e-mail ou son identifiant).
• Si cela fonctionne, un message indiquant "Inscription réussie !" s'affiche. et enregistre des détails tels que l'identifiant de l'utilisateur et la date.
• Si cela ne fonctionne pas, il appelle la fonction handleError() pour vérifier ce qui ne va pas.

Authentifier un utilisateur ?

Voici comment vérifier si un utilisateur est bien celui qu'il prétend utiliser son visage :

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

?‍♂️ À quoi sert ce code ?

• Il utilise la méthode Authenticate() de FaceIO.
• En cas de succès, il enregistre un message et souhaite à nouveau la bienvenue à l'utilisateur.
• Sinon, il appelle handleError() pour comprendre le problème.

Pour obtenir la clé API (également connue sous le nom d'**App Public ID) dans FaceIO, suivez ces étapes simples :**

1. Inscrivez-vous à FaceIO :

   • Allez sur le site Web FaceIO et créez un compte si vous n'en avez pas encore.
   • Connectez-vous avec votre nouveau compte.

2. Créer une nouvelle application :

   • Une fois connecté, accédez au Tableau de bord.
   • Cliquez sur "Créer une nouvelle application".
   • Remplissez les détails requis comme le nom et la description de votre application, puis cliquez sur "Créer".

1. Trouver l'identifiant public de l'application :

   • Après avoir créé l'application, vous la verrez répertoriée dans la section « Applications » de votre tableau de bord.
   • Ici, vous trouverez votre ID public de l'application. Il s'agit de la clé API que vous utiliserez dans votre code JavaScript pour connecter votre site Web à FaceIO.

2. Copiez l'identifiant public de l'application :

   • Cliquez sur l'icône de copie à côté de l'identifiant public de l'application pour la copier.
   • Maintenant, vous pouvez coller cette clé dans votre code là où il est indiqué "app-public-id".

Exemple : Remplacez « app-public-id » dans le code JavaScript par votre véritable identifiant public d'application :

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

Maintenant, votre application est connectée à FaceIO et prête à utiliser les fonctionnalités de reconnaissance faciale !

Avant de précéder, laissez-moi vous montrer comment exécuter FaceIO sur un serveur en direct.

Fonctionnement sur un serveur Live :

• FaceIO exige que les fichiers JavaScript soient servis à partir d'un serveur HTTP en direct, et non à partir d'URL file:// (fichiers locaux).
• Assurez-vous que vous exécutez votre fichier HTML sur un serveur. Vous pouvez utiliser des outils comme l'extension Live Server de VS Code ou Node.js.

Tout d'abord, installez node.js sur votre ordinateur, puis installez le package suivant dans le projet FaceIO :

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

Ensuite, utilisez-le par la commande suivante :

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

Voici le lien du serveur live dans votre terminal vscode :

Gestion des erreurs ?

Tout ne se passe pas toujours bien, nous devons donc gérer les erreurs lorsqu'elles se produisent. Voici une fonction qui fait cela :

function enrollNewUser() {
    const faceio = new faceIO("app-public-id"); // Replace with your app's ID

    faceio.enroll({
        locale: "en", // This sets the language to English
        payload: {
            email: "user@example.com" // Link this user's email or any other unique ID
        }
    }).then(userInfo => {
        console.log("User enrolled successfully!");
        console.log("User ID: " + userInfo.facialId);
        console.log("Enrollment Date: " + userInfo.timestamp);
        alert("Enrollment successful! Welcome, user.");
    }).catch(err => {
        handleError(err);
    });
}

?‍♂️ À quoi sert ce code ?

• Il prend un code d'erreur et le fait correspondre à un message spécifique.
• Par exemple, si un utilisateur n'autorise pas l'accès à la caméra, il lui indique qu'il doit l'activer.
• Chaque cas d'erreur aide l'utilisateur à comprendre ce qui n'a pas fonctionné et quoi faire ensuite.

Pourquoi FaceIO a-t-il besoin d'un serveur HTTP ? ?

Vous vous demandez peut-être pourquoi ce code doit s'exécuter sur un serveur au lieu de simplement l'ouvrir sous forme de fichier normal dans votre navigateur. Voici pourquoi :

1. ?‍? JavaScript et sécurité :

   • Le code JavaScript s'exécute dans votre navigateur (côté client). Mais pour des raisons de sécurité, il ne peut pas communiquer directement avec un serveur qui n'est pas celui d'où il provient.
   • C'est ce qu'on appelle la politique de même origine. Il protège vos données contre l'accès à des sites Web que vous n'avez pas ouverts.

2. ?️ FaceIO doit parler à son serveur :

   • Lorsque vous inscrivez ou authentifiez un visage, la bibliothèque FaceIO envoie des informations à son serveur pour comparer ou enregistrer des données.
   • Pour ce faire en toute sécurité, il doit provenir d'une adresse Web appropriée (comme http://votresiteweb.com) et pas seulement d'un fichier local sur votre ordinateur.

Gérer votre application avec la console FaceIO ?

FaceIO propose un Gestionnaire d'applications basé sur le Web. C'est comme un tableau de bord où vous pouvez tout contrôler sur votre application :

• ? Gestion des utilisateurs : ajoutez, modifiez ou supprimez des utilisateurs.
• ? Gestion des groupes : regroupez les utilisateurs en groupes pour mieux les gérer.
• ? Gestion des autorisations : décidez qui peut faire quoi dans votre application.
• ? Monitoring Analytics : vérifiez combien d'utilisateurs utilisent votre application et comment ils interagissent avec elle.
• ? Fonctionnalités de sécurité : utilisez des éléments tels que l'authentification multifacteur pour rendre votre application plus sûre.

Récapitulatif des points clés ♻️

1. FaceIO aide les sites Web à reconnaître les utilisateurs grâce à la reconnaissance faciale, ce qui rend la connexion plus rapide et plus sécurisée.
2. Pour utiliser FaceIO, vous devez inclure leur bibliothèque JavaScript, créer des boutons et configurer les fonctions d'inscription et d'authentification des utilisateurs.
3. La Gestion des erreurs est importante pour guider les utilisateurs en cas de problème.
4. Un serveur HTTP est nécessaire pour contourner les règles de sécurité du navigateur et communiquer correctement avec les serveurs de FaceIO.
5. Le Gestionnaire d'applications vous aide à contrôler les utilisateurs, les paramètres et la sécurité.

En suivant ces étapes, vous pouvez créer un site Web sur lequel les utilisateurs peuvent se connecter simplement en regardant leur webcam ! Vous transformez votre site Web en une application futuriste qui reconnaît les visages et le rendez plus convivial et sécurisé pour attirer votre intervieweur ou votre client !

---

J'espère que cette explication vous a été utile ! Il couvre tout, du fonctionnement de FaceIO à sa configuration et à sa gestion. Faites-moi savoir si vous avez d'autres questions !

Lire la suite : compétences pour devenir développeur backend en 6 mois (feuille de route)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!