Build a Face Login Web App with Spring Boot, Vue, and Tencent Cloud API

Introduction

FACE-UI is a front‑back separated web project that implements a web‑based facial login system. It captures a photo via the front‑end webcam, sends it to the back‑end, and compares it with a stored face library to authenticate users.

Key technologies: Spring Boot, MySQL, JWT, Vue 2.x, and Tencent Cloud face comparison API. Core features include CRUD operations for face lists and logs, storing face images as Base64 in a custom face library, and invoking the cloud API for similarity matching.

Backend (Spring Boot)

1. Import project dependencies

After pulling the repository, import the required JAR files.

2. Project structure

3. Execute MySQL scripts

4. Configure Tencent Cloud

Reference: https://blog.csdn.net/Susan003/article/details/125914027

5. Set secretId and secretKey

After enabling the face service, add the secretId and secretKey to the application.yml configuration.

6. Run the application

Start the Spring Boot application by running FaceEasyApplication.

Frontend (Vue)

1. Install dependencies

npm install<br/># If you use the Taobao mirror
cnpm install

2. Start the development server

npm run serve

3. Login page

The initial login page shows a message that the database contains no faces. The first captured photo registers a new face; subsequent attempts verify the face.

Note: If the webcam is blocked, the capture will fail.

4. Home page

5. List pages

5.1 Add face

5.2 Edit face

6. Log list

The log list records recent login attempts and exceptions.

Project Repository

Backend project: https://gitee.com/susantyp/face-easy

Frontend project: https://gitee.com/susantyp/face-ui