Utilisation de FaceIO pour développer un module d’authentification utilisateur

Dans le développement passé des systèmes d’information d’applications Web, l’authentification des utilisateurs est un module de fonction indispensable. La fonction d’authentification de l’utilisateur comprend l’enregistrement de l’utilisateur et l’authentification de connexion. Dans les méthodes de développement antérieures, la manière courante de réaliser le module de fonction d’authentification de l’utilisateur consiste à utiliser le courrier électronique et les SMS pour vérifier. Désormais, de nombreux ordinateurs d’utilisateurs sont équipés de caméras, qui peuvent pleinement utiliser la technologie d’intelligence artificielle de la reconnaissance faciale pour réaliser l’authentification de l’utilisateur. J’ai utilisé la bibliothèque JavaScript de FaceIO pour implémenter l’authentification des utilisateurs dans le projet d’application Web.

Cet article présente principalement comment développer le module de connexion utilisateur du projet d’application Web via l’interface de service AI tiers. Le code source du projet d’application Web a été téléchargé sur GitHub et est basé sur le protocole MIT. Il n’y a aucune restriction.

Ce projet est un système de microservice Web simple et complet. Le projet adopte la méthode de développement consistant à séparer les frontaux et les back-ends et utilise différents chemins de fichiers de projet. Le front-end utilise React, le back-end utilise Java 1.8 et des microservices avec Spring Boot, et la base de données utilise MySQL. Le front-end intègre FaceIO dans React pour réaliser l’amarrage de l’IA.

Technology stack of WEB APP project
Operating System：Windows 10
Front-end: Node.js 18.0.0, React 18.2.0, FaceIO, CoreUI 4.3.1
Front-end development tool: WebStorm 2019
Back-end: Java 1.8, Spring Boot, JWT, Mybatis, Maven
Back-end development tool: IntelliJ IDEA 2019
Database: MySQL 5.7+

Le code source de ce projet Web comprend le front-end, le back-end et la base de données, et constitue un système d’information d’application Web complet. Le développement front-end utilise React, le développement back-end utilise Java et SpringBoot, et la base de données utilise MySQL. L’interface de service AI tierce utilise FaceIO. FaceIO fournit une bibliothèque JavaScript en ligne qui peut être directement référencée dans le code frontal. Une fois la bibliothèque FaceIO référencée dans le front-end, l’ajout d’une petite quantité de code peut facilement réaliser l’authentification faciale, et après l’intégration avec le back-end, une authentification complète de l’utilisateur peut être obtenue. L’interface utilisateur frontale utilise le modèle gratuit de CoreUI.

L’utilisation de FaceIO n’est pas limitée aux navigateurs. Il peut fonctionner sur n’importe quel navigateur, y compris IE, Chrome, Firefox et Safari. De plus, tous les traitements commerciaux de l’IA sont effectués sur le serveur de FaceIO, donc FaceIO doit avoir accès à la caméra sur le navigateur actuel de l’utilisateur.

Comment utiliser la bibliothèque FaceIO dans le cadre Front End React

Étape 1 : Installer et configurer l’environnement Node.js

Depuis le site officiel de Node.js, téléchargez le package compressé de la version correspondante de Node.js. La version que j’utilise est la V18.0.0. Si vous souhaitez exécuter le projet Web open source que j’ai publié localement, vous feriez mieux d’utiliser également la V18.0.0. Étant donné que la vitesse d’itération de la version Node.js est relativement rapide, si d’autres versions sont utilisées, la bibliothèque JavaScript locale utilisée dans ce projet Web open source peut être incompatible et peut ne pas s’exécuter.

Après avoir téléchargé le package compressé de Node.js, extrayez-le dans le répertoire anglais. Parce que j’utilise IntelliJ IDEA pour développer React front-end, je dois configurer Node.js et NPM dans IntelliJ IDEA et spécifier le répertoire d’installation de Node.js.

Après avoir configuré Node.js et NPM dans IntelliJ IDEA, vous pouvez créer un projet React App via les outils IntelliJ IDEA.

Étape 2 : Demander une identification publique dans FaceIO

FaceIO fournit une bibliothèque JavaScript en ligne. Si vous souhaitez utiliser le service AI fourni par FaceIO, vous devez d’abord demander un identifiant public pour votre application. Connectez-vous, créez d’abord un compte, puis créez une application basée sur votre projet pour obtenir l’ID public. Cet identifiant public doit être écrit dans le code de votre projet React App. Lors de la demande d’un identifiant public, FaceIO fournira à votre application une version gratuite de l’identifiant public, avec une limite du nombre de fois d’utilisation.

Étape 3 : Utiliser FaceIO dans le projet d’application React

L’adresse de la bibliothèque JavaScript externe est fournie par FaceIO.

Dans le code du projet React App, vous pouvez vous y référer comme suit. Par exemple, dans mon fichier de projet WEB Login.js :

  const script = document.createElement('script');
  script.type="text/javascript";
  script.async = true;
  script.src="https://cdn.faceio.net/fio.js";
  document.head.appendChild(script);

Après l’introduction de fio.js, les constantes de définition sont prêtes à l’emploi. Le code ressemble à ceci :

  let myFaceIO;
  useEffect(()=>{
    //eslint-disable-next-line
    myFaceIO = new faceIO("fioab497");
  },[])

fioab497 est l’identifiant public de mon application après l’enregistrement. Vous devez remplacer l’ID public de votre application.

Veuillez noter que dans la fonction crochet useEffect() du code ci-dessus React, il y a une ligne de code //eslint-disable-next-line. Si vous avez installé le plug-in eslint dans votre environnement de développement, vous devez ajouter cette ligne de code. Sans cette ligne de code, la détection eslint pensera qu’il y a une erreur. L’invite d’erreur est la suivante :

ERROR in [eslint]
src\views\pages\login\Login.js
  Line 52:20:  'faceIO' is not defined  no-undef

Dans l’environnement de développement, le projet Web ne pourra pas s’exécuter. Vous devez donc ajouter cette ligne de code de commentaire pour laisser eslint ignorer la détection de la ligne de code suivante.

FaceIO fournit la fonction d’enregistrement de visage enroll(). Le code s’utilise comme ceci :

  const faceSignUp = async ()=>{
    myFaceIO.enroll({
      "locale": "auto"
    }).then(userInfo => {
      console.log("facialId: " + userInfo.facialId)
      console.log(userInfo);
      handleLogin(userInfo,"login/signUp");
    }).catch(errCode => {
      console.log(errCode);
    })
  }

Dans le code ci-dessus, la fonction enroll() entre les données au format de chaîne JSON et les transmet à l’interface d’intelligence artificielle de FaceIO. UserInfo est l’objet de données renvoyé par FaceIO après vérification faciale. handleLogin () est une fonction définie par l’utilisateur qui est utilisée pour communiquer avec mon back-end après avoir reçu l’objet de données renvoyé par FaceIO. Bien sûr, vous pouvez également définir d’autres fonctions personnalisées pour gérer les objets de données renvoyés par FaceIO en fonction de votre situation de développement.

Dans les données au format de chaîne JSON saisies par la fonction enroll(), vous pouvez également ajouter des données de chaîne JSON personnalisées. Le code ressemble à ceci :

  const faceSignUp = async ()=>{
    myFaceIO.enroll({
      "locale": "auto", // Default user locale
      "payload": {
        "user": 123456, 
        "email": "name@example.com"
        }
    }).then(userInfo => {
      console.log("facialId: " + userInfo.facialId)
      console.log(userInfo);
      handleLogin(userInfo,"login/signUp");
    }).catch(errCode => {
      console.log(errCode);
    })
  }

payload est le nœud de données que FaceIO peut renvoyer. Dans « payload », vous pouvez ajouter les données au format JSON dont vous avez besoin pour renvoyer et personnaliser le contenu des données en fonction de vos besoins de développement.

Après avoir appelé la fonction enroll(), le navigateur affichera l’interface utilisateur fournie par FaceIO pour l’interaction homme-ordinateur et démarrera la caméra à l’invite du navigateur. Vous devez cliquer sur « Oui ». L’interface utilisateur fournie par FaceIO confirmera automatiquement le visage de l’utilisateur devant la caméra actuelle deux fois et demandera à l’utilisateur actuel de confirmer le réglage du code PIN deux fois. Le code PIN saisi sera utilisé pour l’authentification faciale.

FaceIO fournit la fonction d’authentification faciale authentication(). Le code s’utilise comme ceci :

  const faceSignIn = async ()=>{
    myFaceIO.authenticate({
      "locale": "auto"
    }).then(userInfo => {
      console.log("facialId: " + userInfo.facialId)
      console.log(userInfo);
      handleLogin(userInfo,"login/signIn");
    }).catch(errCode => {
      console.log(errCode);
    })
  }

Après avoir appelé la fonction authenticate()le navigateur affichera l’interface utilisateur fournie par FaceIO pour l’interaction homme-ordinateur, démarrera l’appareil photo et demandera à l’utilisateur de connexion actuel d’entrer le code PIN défini lors de l’enregistrement du visage.

Ma fonction personnalisée handleLogin () est transmis au backend en fonction des données renvoyées par FaceIO. Le back-end reçoit les données, les analyse et renvoie les résultats au front-end. Le frontal exécute la logique métier suivante. Si l’authentification de l’utilisateur réussit, le backend renverra les données du jeton au frontal. Une fois que le frontal a confirmé que la connexion a réussi, la page passera au tableau de bord pour terminer l’ensemble du processus d’authentification de l’utilisateur.

Après avoir reçu les données de jeton, le frontal enregistre les données de jeton dans le stockage de session du navigateur actuel de l’utilisateur. Je personnalise un élément nommé « Autorisation » dans le stockage de session pour stocker les données du jeton. Le code de fonction pour enregistrer les données du jeton ressemble à ceci :

const setAuthorization = (Auth) => {
    sessionStorage.setItem('Authorization',Auth)
}

Le code de fonction pour obtenir les données du jeton ressemble à ceci :

function getAuthorization () {
    let Author = sessionStorage.getItem('Authorization')
    if (Author === null) return ''
    return Author
}

J’ai défini le chargement automatique des données de jeton dans le système. Lors du traitement commercial ultérieur, lors de l’accès à l’API backend, les données du jeton seront automatiquement placées dans l’autorisation de l’en-tête de la demande. Le code ressemble à ceci :

instanceForm.interceptors.request.use(
    (config) => {
        config.headers.authorization = getAuthorization()
        return config
    }
)

Le code source frontal de mon projet peut être téléchargé depuis GitHub.

Comment terminer l’authentification de l’utilisateur sur le backend

Dans le projet Web, j’utilise SpringBoot comme backend et le langage de développement est Java 1.8. Dans le framework Spring, créez une classe de couche de contrôle qui gère l’authentification de connexion de l’utilisateur. Cette classe LoginController est également une interface API pour gérer l’authentification de connexion de l’utilisateur. Le code est comme ceci :