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. : 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 ! Plus rapide que les méthodes traditionnelles : 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. Ne nécessite pas de matériel spécialisé : 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. Réduire l'usurpation d'identité sur les plateformes sociales : 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 😄. Réduire les bots et les scripts automatisés 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é. Axé 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 . Assurez-vous d'obtenir une gratuite pour suivre. ici clé API Installation de la dépendance requise Créez un répertoire vide et à l'intérieur, créez un fichier . Vous pouvez également ajouter un fichier CSS séparé, mais par souci de simplicité, je vais le garder au strict minimum. index.html Si vous utilisez VSCode pour le développement, vous pouvez utiliser le serveur live pour servir vos fichiers statiques. Dans votre , ajoutez ce balisage HTML de base, pour commencer. index.html <!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 et liez le fichier à l'intérieur de la balise body après FaceIO CDN. index.js <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 . Nous accédons à ce bouton dans notre fichier javascript en utilisant la méthode . id="enroll" getElementbyID Initialisez maintenant l'objet FaceIO dans . 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. index.js 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. est la langue locale de l'utilisateur. locale le délai d' correspond au nombre de secondes à attendre avant que l'utilisateur accorde l'accès à la caméra. permissions timeout est le nombre de secondes à attendre pour que l'utilisateur accepte les termes et conditions de FaceIO. termsTimeout est le nombre total de secondes à attendre lors de la tentative de reconnaissance d'un visage. idleTimeout est le nombre de secondes à attendre pour recevoir les données faciales traitées du nœud FaceIO. replyTimeout 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 . userConcent true : 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. payload Dans notre cas, la fonction d'inscription ressemble à ceci. enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "example@gmail.com", 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 à 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. userInfo 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 est générée. fioErrCode.PERMISSION_REFUSED Si l'utilisateur n'accepte pas la fenêtre contextuelle des termes et conditions, l'erreur est renvoyée par le serveur. fioErrCode.TERMS_NOT_ACCEPTED Authentification d'un utilisateur Pour lancer le flux d'authentification, ajoutez un bouton dans votre balisage HTML avec . Accédez à ce bouton dans à l'aide de la méthode . id="authenticate" index.js 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 , , et les paramètres comme la fonction enroll précédente. Le code ressemble à ceci. permissionTimeout idleTimeout replyTimeout locale enroll() 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. : 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. Il est conforme au RGPD et au CCPA 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. : 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. Il ne stocke que les hachages 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 pour enregistrer vos informations d'identification sensibles. .env.local 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 , mettez-y toutes vos informations d'identification et vous avez terminé. N'oubliez pas de mettre votre fichier dans votre liste . .env .env .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 . Continuez à lire, continuez à apprendre. hrishikshpathak
