Avec le développement du numérique, les systèmes d’information sont également en constante évolution. Dans le passé, nous avons développé de nombreux systèmes d’information d’applications WEB matures. Avec l’amélioration continue du niveau de sécurité, la méthode traditionnelle de connexion au compte s’aggrave de plus en plus dans l’expérience utilisateur actuelle. Par exemple, après vous être connecté à l’application WEB sur un ordinateur, lorsque vous changez d’ordinateur et entrez le compte et le mot de passe corrects pour vous connecter, l’application WEB ne peut pas déterminer si c’est vous ou quelqu’un d’autre qui vous êtes connecté illégalement en raison de le changement d’adresse IP et d’appareil. Il vous demandera de vérifier s’il s’agit à nouveau de vous par e-mail ou par numéro de téléphone portable. Cette mesure de sécurité est raisonnable, mais elle mettra les vrais utilisateurs mal à l’aise. Si nous ajoutons la fonction d’authentification faciale dans le module d’authentification de l’utilisateur pour confirmer l’utilisateur de connexion actuel, cette mesure de sécurité peut éviter une mauvaise expérience utilisateur.
L’authentification faciale peut être facilement effectuée à l’aide de FACEIO, et la quantité de code ajoutée aux applications WEB est très faible. Il fournit des bibliothèques JavaScript en ligne, qui peuvent être directement référencées dans les pages Web frontales. Sous le code
<script src="https://cdn.faceio.net/fio.js"></script>Nous utilisons le nom d’utilisateur (ou l’e-mail) de connexion et le mot de passe de connexion pour authentifier l’identité de l’utilisateur au niveau du front-end, ce qui est une manière cohérente. Cependant, dans les applications Web modernes, la reconnaissance faciale pour la vérification d’identité a été utilisée dans divers scénarios. Alors, est-il possible d’intégrer la méthode de connexion par nom d’utilisateur (ou e-mail) et mot de passe avec la méthode de connexion par authentification faciale dans l’application WEB ? La réponse est oui.
FACEIO fournit des fonctions d’enregistrement d’identité faciale et d’authentification faciale. Une fois que l’utilisateur s’est connecté à l’application WEB, nous pouvons lier les informations d’identité faciale de l’utilisateur de connexion actuel via l’enregistrement de l’identité faciale de FACEIO. Une fois que l’utilisateur a lié avec succès les informations d’identité faciale, l’utilisateur peut se connecter à l’application WEB directement via l’authentification faciale sur la page de connexion. Son résultat de connexion d’authentification a le même effet que le résultat de connexion du nom d’utilisateur (ou de la boîte aux lettres) et du mot de passe. Avant d’utiliser FACEIO, vous devez enregistrer votre application sur le site officiel de FACEIO et obtenir l’identifiant public de votre application. Cet identifiant public doit être utilisé dans le code suivant.
Cet article présente comment intégrer les deux méthodes d’authentification de l’identité de l’utilisateur dans l’application WEB. Cela implique le front-end, le back-end et la base de données. J’ai téléchargé le code du projet de cette application WEB sur GitHub.
Cette application WEB est un petit projet simple. Cependant, cela peut vous donner une idée de développement.
Technology Stack
Front-end: HTML5, JavaScript, FaceIO, JQuery, Bootstrap, thymeleaf
Back-end: Java 1.8, Spring Boot, Mybatis, Maven
Development tool: IntelliJ IDEA 2019
Database: MySQL 5.7+Comment ajouter l’authentification faciale sur le front-end
Dans le procédé de développement d’intégration des deux méthodes d’authentification de l’identité de l’utilisateur, l’enregistrement de l’identité faciale et la vérification de l’identité faciale doivent être implémentés respectivement dans le frontal. Dans l’interface de connexion de l’utilisateur, la logique métier de l’authentification faciale doit être implémentée. Une fois que l’utilisateur s’est connecté avec succès, la logique métier de l’enregistrement de l’identité faciale doit être implémentée.
Dans le processus, l’utilisateur doit d’abord utiliser le nom d’utilisateur (ou e-mail) et le mot de passe pour l’authentification. Après une connexion réussie, effectuez l’enregistrement de l’identité faciale. Une fois l’enregistrement de l’identité faciale réussi, l’utilisateur peut utiliser l’authentification faciale pour se connecter à la page de connexion de l’utilisateur lors de la future connexion à l’application WEB.
Connectez-vous à la page Web « login.html ». Voir la capture d’écran ci-dessous:
Étape 1 : Une fois que le nom d’utilisateur (ou l’adresse e-mail) et l’authentification par mot de passe ont réussi, enregistrez l’identité faciale
Dans ce code de projet, après une authentification réussie, l’adresse Web passera à « /dashboard ». Le fichier correspondant à l’adresse de la page Web « /dashboard » est « /templates/dashboard/index.html », qui utilise le moteur de template Java Thimleaf. L’adresse de la page Web est définie sur le back-end. Le code est comme suit:
package com.auto17.WebAddFacialAuth.controller;
import com.auto17.WebAddFacialAuth.domain.WebUser;
import com.auto17.WebAddFacialAuth.service.IWebUserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
@Controller
@RequestMapping("/dashboard")
public class DashboardController extends BaseController{
protected final Logger logger = LoggerFactory.getLogger(DashboardController.class);
private String prefix = "dashboard";
@Autowired
private IWebUserService webUserService;
@GetMapping()
public String index(ModelMap modelMap, HttpServletRequest request){
HttpSession session = request.getSession();
Long userId = (Long) session.getAttribute("userId");
logger.info("login user="+userId);
if(userId==null){
logger.error("user is not login");
return "redirect:/login.html";
}else {
WebUser webUser=webUserService.selectWebUserById(userId);
modelMap.put("webUser",webUser);
}
return prefix + "/index";
}
}Dans le code du fichier « /templates/dashboard/index.html »:
<div class="card bg-danger text-white mb-4">
<div class="card-body">Facial Auth</div>
<div class="card-footer d-flex align-items-center justify-content-between"
th:if="${#strings.isEmpty(webUser.facialId)}">
<a class="small text-white stretched-link" onclick="startFacialAuth()">Unbound</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
<div class="card-footer d-flex align-items-center justify-content-between"
th:if="${!#strings.isEmpty(webUser.facialId)}">
<span class="small text-white stretched-link" th:text="${webUser.facialId}"></span>
</div>
</div>Jugez s’il faut lancer l’enregistrement de l’identité faciale en fonction des données de facialId. Le code d’enregistrement de l’identité faciale se trouve dans la fonction startFacialAuth(). Le code est affiché ci-dessous :
function startFacialAuth() {
webFaceIO.enroll({
"locale": "auto"
}).then(userInfo => {
addFacialAuth(userInfo);
}).catch(errCode => {
console.log(errCode);
webFaceIO.restartSession();
})
}Dans le code ci-dessus, la fonction addFacialAuth (userInfo) est utilisée pour conserver les données enregistrées avec succès depuis FaceIO dans ce système :
function addFacialAuth(userInfo) {
let obj = {};
obj.facialId = userInfo.facialId;
operatePost("login/addFacialAuth",obj,addFacialAuthEnd);
}Les données facialId obtenues sont transmises au backend via des requêtes Ajax. Une fois que le serveur principal l’a reçu, il est enregistré dans la table d’informations sur l’utilisateur (web_user). Une fois les données facialId enregistrées, l’utilisateur peut utiliser l’authentification faciale pour se connecter pour l’authentification des applications WEB suivantes.
Étape 2 : L’utilisateur utilise l’authentification faciale sur la page de connexion
Le code de la page de connexion « login.html » est présenté ci-dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Web APP</title>
<link href="https://dzone.com/articles/css/styles.css" rel="stylesheet" />
<script data-fr-src="js/fontawesome.6.1.0.all.js"></script>
</head>
<body class="bg-black">
<div id="layoutAuthentication">
<div id="layoutAuthentication_content">
<main>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header">
<h3 class="text-center font-weight-light my-4">
Web APP Login
</h3>
</div>
<div class="card-body">
<form id="form-webUser-login" onSubmit="return userLogin();">
<div class="form-floating mb-3">
<input class="form-control" id="loginName" type="text"
name="loginName"
placeholder="Login name" required/>
<label for="loginName">Login name</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" id="passWord" type="password"
name="passWord"
placeholder="Password" required/>
<label for="passWord">Password</label>
...