Face recognition login using ReactJS And OpenCV

Kavan Thakar
Apr 12 · 5 min read
Photo by John Noonan on Unsplash

Being a developer, one thing which comes in the mind is authentication for our system. As there are various applications that run on different platforms such as web applications, desktop applications, mobile applications each of which needs some sort of security mechanism. This article is about a face recognition login system which is applicable for the web application.

It is mandatory to have two basic framework configurations on your system which are ReactJS and Python Flask. Here ReactJS will be used for the front end part and Flask will be used as a lightweight backend API for the python backend.

Follow my GitHub link along with this article. Let us first see the architecture of our system.

Image by author: System Architecture

Creating Backend Application

First of all, you need to create a table in the MySQL database and give it a name register.

Now clone my GitHub repo in your local system and install necessary front dependencies using the node command and backend dependencies using python installer.

Now start the terminal and run the script.py file available in the Backend folder. This will start the flask server and waits for requests from the client. Now start the react application by running the npm start command that will start serving web application on the default port.

Image by author: Flask Server Started
Image by author: ReactJS Server Started

Let us understand the flow of our system. First, let’s import important modules for our Flask server.

Now some important steps to be followed for our API.

Finally, we will create a function that will get data i.e. encodings of the person and along with his name from the database.

Now we have flask API register and login as below.

Creating ReactJS Application

Here I have used ReactJS for the frontend and the code can be found in my GitHub repo you can download and run this application. Here you can go to the register or login option from the navbar and proceed further.

If the user is not registered and tries to log in then it will prompt with the message ‘You are unknown first register your self’. And will mark this person as unknown and saves it in the directory for future reference.

Image by author: Recognized As An Unknown Person

Now a user can proceed to register where he/she will have to provide his/her name which will be used to identify the person while login and his/her photo will also be taken and it will be converted to an encoding vector of size 128. Let us perform registration first. Code of <Register /> component is as below

Image by author: Pre Registration Screen
Image by author: Post Registration Screen

So, after doing the registration, let’s do login again. Now photo should be identified as a person with a registered name. Code for <Login /> component is as below.

Image by author: Person Recognized
Image by author: Post Login Screen

Conclusion

In this article, we saw that we can integrate ReactJS with computer vision in order to create a face recognition login application. This application can be integrated into your system where the login phase will be this application and the post-login application can be customized from your side.

Here you may also train your own deep learning model and get encodings in order to improve the model accuracy. For this, you may have to spend some resources out there that may turn into great outcomes.

To conclude, the image recognition field is advancing very fast and this article shows a very simple approach. Face recognition can also be used as a sentiment detection based on a person’s face.

References

  1. https://github.com/ageitgey/face_recognition

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data…

Sign up for Analytics Vidhya News Bytes

By Analytics Vidhya

Latest news from Analytics Vidhya on our Hackathons and some of our best articles! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Kavan Thakar

Written by

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store