How to use facial-recognition to authenticate users with webcam in a site
Introduction
In this article you will learn how to implement authentication with facial-recognition using AWS Rekognition. You will need a database, a back-end application, a front-end web application and an account at AWS. If you don’t have this environment set you can check my article “How to create a dockerized full-stack environment with MySQL, NestJS and NextJS”, there is a GitHub link in the end of it. I recommend you to clone the project and follow the instructions in the readme file.
Understanding AWS Rekognition
You can think on AWS Rekognition, for this case, as a system that scan faces in images (or videos), assign an unique ID to it and store it in a list with another faces. And that’s it. Nothing more.
The AWS Rekognition system has two very important concepts: faces and collections.
Each face has an ID and collections are lists of faces. Collections are identified by a name that you define.
Integrating AWS Rekognition with our system
So, let’s say you want to open the webcam in the browser and detect if the person in front of the cam is a person that exists in your database.
Back-end logic
- Create a collection in AWS Rekoginition that will store the face of the users from your system
- Insert the user face in the collection at the moment the user is registered in your system, then get the Face ID and update the user entry in the database with his Face ID
Front-end logic
- The user will register himself by setting his name, age and taking a photo
- If the back-end can’t find his face in the collection, it means that the user is not registered, so it will start the registration process
- Then the user will the login button
- The site will take a picture of the person using the webcam and will send the picture to the back-end to search this person in the collection
- If the back-end find the person in the collection, it will get it’s Face ID, search the database looking for an user with this exactly Face ID and return it as the response.
Implementing the project
This can be done in any programming language with any database system, I’ll post some examples using MySQL for the database server, Typescript as programming language, NestJS as back-end framework and NextJS as front-end framework. But the logic is the same for any other stack, you just have to make sure you understood the last topic.
Back-end implementation
Step 1: Create users table
Step 2: Create users collection
Step 3: Create endpoint to register user
This endpoint will be called /register and will:
- Search the collection to see if the user is already there (if is already registered)
- If he is not registered, register the user in the database
- Call AWS Rekognition API to insert the main face from the image into the collection
- Return the Face ID from that image
- Update the user in the database with his Face ID
Step 4: Create endpoint to search for an user by it’s Face ID
This endpoint will be called /login and will:
- Search the collection to get the Face ID of the person trying to login (if the person is not registered it won’t find and will not return a Face ID)
- Search the user in the database by it’s Face ID
- Return the user, if found, or nothing, if not found
Front-end implementation
- Registration form
- Register button
- Login button
- Take picture with webcam
- Show picture taken
- Show user data after login
Complete project
You can find the complete project using MySQL, NestJS and NextJS in my GitHub repository.
Please leave a 👏 or a ⭐️ if it helped you.
