Comment authentifier un utilisateur via la reconnaissance faciale dans votre application Web

L'authentification est un aspect crucial de votre application Web. Si vous offrez un service ou vendez un produit à l'utilisateur, vous devez garder une trace de l'utilisateur pour référence future. Tout cela n'est possible que si vous avez mis en place un système d'authentification.

Mais utiliser le bon outil pour le travail est également très nécessaire. Dans le passé, l'authentification par e-mail et par mot de passe était la plus populaire et la plus largement utilisée. Mais avec le temps, un nouveau concept appelé OAuth a été introduit lorsque les grandes technologies ont fait leur apparition avec une énorme base d'utilisateurs. Lorsque vous, en tant que propriétaire du site, faites confiance au fournisseur OAuth pour authentifier un utilisateur, en retour, le fournisseur OAuth vous donne les détails de l'utilisateur.

L'authentification basée sur OAuth est simple pour l'utilisateur. Ils n'ont qu'à maintenir un compte auprès d'un fournisseur OAuth et utiliser ce compte pour se connecter à tous les autres sites Web. Mais la confiance est toujours impliquée dans le processus OAuth.

Après un certain temps, l'authentification sans mot de passe est entrée en scène. Dans ce processus, lorsque vous entrez le nom d'utilisateur ou votre e-mail, ils vous envoient un lien. Si vous collez le lien dans le navigateur, vous êtes automatiquement authentifié et connecté. L'exemple le plus courant d'authentification sans mot de passe est lorsque vous cliquez sur le lien magique d'envoi pour vous connecter à hackernoon.com .

Avec les progrès de l'intelligence artificielle (IA) et de l'apprentissage automatique (ML), les techniques de reconnaissance faciale gagnent en popularité. Avec le temps, à mesure que les ensembles de données grossiront, la précision d'un modèle d'IA augmentera également. De nos jours, nous pouvons également utiliser des techniques de reconnaissance faciale pour authentifier les utilisateurs dans notre application Web.

Dans cet article, nous construisons une application simple, pour montrer comment authentifier un utilisateur à l'aide de la reconnaissance faciale. Dans ce processus, nous allons utiliser les API FaceIO.

Pourquoi nous avons besoin d'une authentification basée sur la reconnaissance faciale

Le besoin de reconnaissance faciale est multiple. J'essaie de mettre en place quelques points ici d'une manière concise. Assurez-vous de lire l'article jusqu'à la fin pour obtenir une compréhension conceptuelle complète et une présentation détaillée de la mise en œuvre.

1. Plus rapide que les méthodes traditionnelles : La méthode d'authentification faciale est très rapide que les moyens d'authentification traditionnels. Il vous suffit de cliquer sur un bouton pour démarrer le processus d'authentification et en une milliseconde, c'est fait. Dans les méthodes traditionnelles basées sur un mot de passe par e-mail, vous devez ajouter vos informations ligne par ligne. Parfois, après une connexion réussie, vous êtes accueilli par un captcha. Comme c'est irritant !
2. Ne nécessite pas de matériel spécialisé : La seule exigence de la technique d'authentification faciale est une caméra. De nos jours, tous les smartphones ont un appareil photo par défaut. Tous les ordinateurs de bureau ont également une sorte de webcams présentes. Par conséquent, les utilisateurs n'ont pas besoin de matériel spécialisé pour utiliser ce service.
3. Réduire l'usurpation d'identité sur les plateformes sociales : la caractéristique la plus importante de l'authentification faciale est qu'elle peut empêcher l'usurpation d'identité. Sur les plateformes sociales, de nombreuses personnes créent de faux comptes en se faisant passer pour quelqu'un. Cela peut être très risqué si le faux titulaire de compte commet un type de crime numérique. Avec l'aide de la reconnaissance faciale, les plateformes sociales peuvent reconnaître si le compte auquel quelqu'un tentait d'accéder lui appartient réellement.
4. Réduire les bots et les scripts automatisés : Les bots et les scripts automatisés sont introduits pour aider les gens à se débarrasser des tâches répétitives. Mais les gens les utilisaient également d'une manière différente pour spammer les autres. Chaque jour, vous rencontrez de nombreux robots et scripts automatisés dans votre vie numérique que vous ne remarquez même pas ou ne réalisez pas. Pour éviter cela, certains sites Web utilisent le captcha. En utilisant la reconnaissance faciale, ce problème peut également être résolu car les bots n'ont pas de visage pour s'authentifier 😄.
5. Axé sur la confidentialité : la confidentialité est un sujet très sensible pour nous tous. Nous devenons tous un peu inquiets lorsque quelqu'un vous demande de vous authentifier à l'aide de vos données faciales. Mais comme nous utilisons FaceIO dans ce tutoriel, le processus d'authentification est purement crypté de bout en bout. Dans le backend, ils ne stockent que le hachage de vos traits de visage. Ils sont entièrement conformes au RGPD et au CCPA. Ainsi, vous pouvez leur faire confiance pour stocker vos données en toute sécurité.

Faire un projet d'authentification faciale

Nous allons maintenant créer une application Web d'authentification faciale. Ce projet comprend tous les éléments et tout ce que vous devez savoir sur la façon d'implémenter l'authentification basée sur la reconnaissance faciale dans votre application Web.

J'explique le processus étape par étape. Vous pouvez obtenir un code source complet ici . Assurez-vous d'obtenir une clé API gratuite pour suivre.

Installation de la dépendance requise

Créez un répertoire vide et à l'intérieur, créez un fichier index.html . Vous pouvez également ajouter un fichier CSS séparé, mais par souci de simplicité, je vais le garder au strict minimum.

Si vous utilisez VSCode pour le développement, vous pouvez utiliser le serveur live pour servir vos fichiers statiques.

Dans votre index.html , ajoutez ce balisage HTML de base, pour commencer.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>

FaceIO fournit une bibliothèque javascript très pratique pour interagir avec leurs modèles d'IA. Cela nous facilite tellement la vie que nous pouvons implémenter la fonction de reconnaissance faciale en utilisant seulement quelques lignes de code. Pour ajouter la bibliothèque javascript FaceIO, nous utilisons leur CDN (réseau de diffusion de contenu) dans la balise body de notre document HTML.

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

Maintenant, créez un fichier index.js et liez le fichier à l'intérieur de la balise body après FaceIO CDN.

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

Créons maintenant 2 fonctions d'assistance pour faciliter notre processus de développement. L'un sert à inscrire un utilisateur (comme la fonction d'inscription) et l'autre à l'authentification (comme la fonction de connexion).

Inscrire un utilisateur

L'inscription d'un utilisateur est très simple grâce à la bibliothèque javascript fournie par FaceIO. Dans le balisage HTML, ajoutez un bouton avec id="enroll" . Nous accédons à ce bouton dans notre fichier javascript en utilisant la méthode getElementbyID .

Initialisez maintenant l'objet FaceIO dans index.js . Vous devez ajouter l'ID public de votre projet FaceIO. Vous pouvez obtenir l'ID public répertorié dans le tableau de bord de votre projet.

 const faceio = new faceIO("<Your Public ID here");

Ajoutons un écouteur d'événement dans le bouton d'inscription. Lorsque quelqu'un clique sur le bouton, nous exécutons la méthode d'inscription de l'objet faceIO. Cette méthode d'inscription prend une variété de paramètres facultatifs.

1. locale est la langue locale de l'utilisateur.
2. le délai d' permissions timeout correspond au nombre de secondes à attendre avant que l'utilisateur accorde l'accès à la caméra.
3. termsTimeout est le nombre de secondes à attendre pour que l'utilisateur accepte les termes et conditions de FaceIO.
4. idleTimeout est le nombre total de secondes à attendre lors de la tentative de reconnaissance d'un visage.
5. replyTimeout est le nombre de secondes à attendre pour recevoir les données faciales traitées du nœud FaceIO.
6. userConcent est un booléen qui indique si les utilisateurs donnent leur consentement pour scanner leur visage. Si vous avez déjà obtenu le consentement de l'utilisateur, vous pouvez définir la valeur sur true .
7. payload : dans la fonction d'inscription, vous pouvez ajouter une charge utile de votre choix. La charge utile doit être un objet de valeur clé. Vous pouvez utiliser cette fonctionnalité de charge utile pour joindre votre adresse e-mail ou toute autre information relative à l'utilisateur.

Dans notre cas, la fonction d'inscription ressemble à ceci.

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

Lorsque vous exécutez cette fonction, une fenêtre contextuelle apparaît devant l'utilisateur. Cette fenêtre contextuelle contient les termes et conditions. Si l'utilisateur accepte les termes et conditions, il demande l'accès à la caméra. Si l'utilisateur autorise l'accès à la caméra, FaceIO scannera le visage.

Le modèle FaceIO recherche des caractéristiques faciales uniques qui distinguent l'utilisateur des autres. Une fois terminé, vous devez ajouter un code PIN qui est attaché à vos données faciales. Ce code PIN est très important pour l'utilisateur et le conserve en lieu sûr.

Lorsque toutes ces étapes sont terminées, FaceIO renvoie un objet userInfo à l'utilisateur. Cet objet contient un identifiant de visage d'utilisateur qui est un identifiant, un sexe et un âge universellement uniques. Le sexe et l'âge ne sont pas très précis, car ils sont prédits par un modèle d'IA.

Vous pouvez utiliser stocker ce faceID dans votre backend. Lorsqu'un utilisateur souhaite se connecter, vous pouvez faire correspondre ce faceID pour authentifier l'utilisateur.

Au cours du flux de travail, si une erreur se produit, FaceIO dispose d'une longue liste de messages d'erreur. Si l'utilisateur n'autorise pas l'accès à la caméra, l'erreur fioErrCode.PERMISSION_REFUSED est générée.

Si l'utilisateur n'accepte pas la fenêtre contextuelle des termes et conditions, l'erreur fioErrCode.TERMS_NOT_ACCEPTED est renvoyée par le serveur.

Authentification d'un utilisateur

Pour lancer le flux d'authentification, ajoutez un bouton dans votre balisage HTML avec id="authenticate" . Accédez à ce bouton dans index.js à l'aide de la méthode getElementbyID .

Désormais, lorsque l'utilisateur appuie sur ce bouton, nous lançons le flux d'authentification. La fonction d'authentification est très simple.

La fonction d'authentification prend permissionTimeout , idleTimeout , replyTimeout et les paramètres locale comme la fonction enroll enroll() précédente. Le code ressemble à ceci.

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

Lorsque l'utilisateur appuie sur le bouton d'authentification, un écran contextuel similaire à celui de la fonction d'inscription. Il prend l'accès à votre appareil photo et scanne votre visage. Une fois scanné, il vous demande le code PIN que vous avez entré lors de la période d'inscription.

Si vous fournissez le code PIN correct, FaceIO a renvoyé les FaceData et la charge utile que vous avez spécifiées lors du processus d'inscription.

Vous pouvez également revérifier le flux d'authentification en faisant correspondre le faceID de votre serveur.

Notre flux d'authentification est maintenant terminé. Vous pouvez voir que c'est plus facile que d'implémenter un flux d'authentification de mot de passe de messagerie. Tout le gros du travail est fait par le serveur FaceIO et son modèle d'IA, en tant que développeur, vous n'avez qu'à ajouter la logique de l'application pour modifier le flux d'authentification et son expérience.

Fonctionnalités de confidentialité

FaceIO dispose d'un système de protection de la vie privée robuste. Permettez-moi d'en énumérer quelques-uns.

1. Il est conforme au RGPD et au CCPA : Le service FaceIO est entièrement conforme au RGPD et au CCPA. RGPD signifie Règlement Général sur la Protection des Données. Il est adopté en 2018 et oblige toutes les entreprises à protéger les données personnelles et la vie privée de l'utilisateur.

   
   

   CCPA signifie California Consumer Protection Act donne plus de contrôle à l'utilisateur sur ses données. Si vous opérez dans ces régions, vous n'avez pas à vous inquiéter.

   
   

2. Il ne stocke que les hachages : FaceIO ne stocke que les hachages de vos traits de visage. Il ne stocke aucune donnée brute et stocke le moins d'informations possible. La bibliothèque et les widgets côté client ne gèrent aucune donnée biométrique. Tout le processus est effectué au niveau du backend.

FAQ

Le navigateur FaceIO est-il agnostique ?

FaceIO est complètement indépendant du navigateur. Il peut exécuter n'importe quel navigateur, y compris chrome, firefox et safari. Comme tout le traitement est effectué sur le serveur, FaceIO n'a besoin que de l'accès à votre caméra pour fonctionner.

Si vous utilisez un navigateur de confidentialité en désactivant javascript, assurez-vous de les activer. Comme FaceIO doit utiliser javascript pour parler avec le serveur.

Ne pouvons-nous pas construire notre modèle à partir de rien ?

Oui, vous pouvez créer votre modèle à partir de zéro et implémenter la fonctionnalité d'authentification faciale dans votre application Web. Mais pour cela, vous devez avoir une compréhension approfondie de l'intelligence artificielle et des processus d'apprentissage automatique.

Comme la plupart des développeurs Web ne sont pas issus de ce milieu, il est judicieux d'utiliser les services d'autres personnes pour implémenter une fonctionnalité plutôt que de réinventer la roue.

Il existe d'autres solutions sont présentes sur le marché que vous pouvez explorer. L'un est AWS Rekognition. Ce service est proposé par AWS et fonctionne de manière très similaire à FaceIO. La chose intéressante est que vous pouvez opter pour AWS Rekognition dans votre tableau de bord FaceIO.

Oui c'est possible. Vous pouvez maintenant choisir ce que vous voulez et y aller.

Masquer l'identifiant public

Comme nous pouvons le voir dans la partie codage, vous devez donner votre identifiant public lors de l'initiation de l'objet FaceIO. Si vous le souhaitez, vous pouvez le masquer à l'aide de variables d'environnement. Si vous utilisez une infrastructure frontale ou un système de génération, vous pouvez ajouter dynamiquement ces valeurs au moment de la génération.

Si vous utilisez NextJS, vous pouvez utiliser le fichier .env.local pour enregistrer vos informations d'identification sensibles.

Si vous n'utilisez aucun framework, vous pouvez utiliser Vite. Vite prend en charge les variables d'environnement. Il construit et compresse votre projet vanilla js pour un déploiement plus rapide. Créez simplement un fichier .env , mettez-y toutes vos informations d'identification et vous avez terminé. N'oubliez pas de mettre votre fichier .env dans votre liste .gitignore .

Conclusion

Si vous avez lu l'article jusqu'à ce point, je pense que vous aimez cet article. Veuillez le partager avec vos pairs. Si vous souhaitez donner votre avis, je suis disponible sur Twitter en tant que hrishikshpathak . Continuez à lire, continuez à apprendre.