Get Files at Github
Introduction
In today’s digital world, biometric authentication is becoming increasingly important for secure user registration. This blog explores how to build a face recognition-based user registration system using Node.js, Python (MediaPipe), MySQL, and React.js.
By the end of this post, you’ll understand how to:
- Set up a backend using Node.js and Express.js
- Process face images using Python and MediaPipe
- Store user data and embeddings in MySQL
- Convert images to Base64 in React.js before sending them to the backend
🛠 Tech Stack
- Frontend: React.js (Image conversion to Base64, API communication)
- Backend: Node.js (Express, MySQL)
- Face Processing: Python (MediaPipe, OpenCV, NumPy)
- Database: MySQL
📌 Key Features
✔ Face-based Registration: Users register using their real name, unique code, and face image.
✔ Face Embedding Generation: Extracts facial features using MediaPipe. ✔ Secure Database Storage: Stores user data and face embeddings in MySQL.
✔ Unique Code Verification: Ensures only authorized users can register.
📂 Project Structure
/Face-Recognition-Registration
│── frontend/ # React.js Frontend (To be built)
│── server.js # Node.js backend (API, database handling)
│── face_processor.py # Face processing script (Python, MediaPipe)
│── package.json # Node.js dependencies
│── README.md # Project documentation
└── database.sql # SQL script to create tables
⚡ How It Works
1️⃣ User selects an image in the frontend.
2️⃣ Frontend converts the image to Base64 and sends it to the backend.
3️⃣ server.js verifies the unique code and forwards the image to face_processor.py.
4️⃣ face_processor.py detects the face and generates a face embedding.
5️⃣ server.js stores the processed data in MySQL and updates user details.
🚀 Future Enhancements
✔ Complete Frontend with React.js
✔ Real-time Face Scanning Animation
✔ QR-Based Login using Face Authentication
✔ Decentralized Access Control (Blockchain)
✔ Improved AI-based Face Matching
🏗️ Setting Up the Project
1️⃣ Clone the Repository
git clone https://github.com/guider23/faceScannerForAuthentication.git
cd Face-Recognition-Registration
2️⃣ Install Dependencies
npm install # Install Node.js dependencies
pip install -r requirements.txt # Install Python dependencies
3️⃣ Configure the Database
- Create a MySQL database and import the database.sql file.
- Update server.js with your database credentials.
SQL Table Creation
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
real_name VARCHAR(255) DEFAULT 'Pending',
unique_code VARCHAR(50) NOT NULL UNIQUE,
face_embedding JSON DEFAULT '{}',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
-- Insert placeholder unique codes for testing
INSERT INTO users (real_name, unique_code) VALUES ('Pending', 'ABC1234'), ('Pending', 'DEF5678'), ('Pending', 'GHI9101');
4️⃣ Start the Server
node server.js
🔬 Testing the API
Since the frontend is pending, you can test the API using Postman or cURL.
Using Postman
1️⃣ Open Postman and create a new POST request to http://localhost:3000/register. 2️⃣ Set the request body to raw JSON:
{
"real_name": "John Doe",
"unique_code": "ABC1234",
"image": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
}
3️⃣ Click Send and check the response.
Using cURL
curl -X POST http://localhost:3000/register \
-H "Content-Type: application/json" \
-d '{
"real_name": "John Doe",
"unique_code": "ABC1234",
"image": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
}'
🔗 Conclusion
This face recognition-based user registration system lays the groundwork for a secure, AI-powered authentication mechanism. As we continue to improve it, adding features like real-time face scanning and decentralized access control , it will become a cutting-edge solution in biometric security.
Interested in contributing? Fork the repo, submit PRs, and star the project! 🚀
📝 License
This project is open-source and available under the MIT License.
💡 Got ideas? Drop a comment below or contribute to the repo! 🚀
Contribute Github
Top comments (0)