Face ID Authentication in Python Django using Face Recognition Library | Part 1

in this tutorial series we will be using Python's face recognition library to integrated with Django in order to create a face ID authentication solution So currently I'm authenticated on a home page which requires authentication let me log out and let me log in so first of all let's log out now you can probably see me and I'm going to take a photo in order to log into the system here's the photo and now we are logged in all right so before we get started let's take a look at what have I done so far so I started a brand new Django project and currently I'm in the core directory in the settings py file and if we scroll down to the template section over here I told Django where to look for additional ones and I created this directory and inside of it I placed base HTML and we will take a look at this file in just a few seconds then if we scroll all the way down we can find some configuration for the static and media files and we also included those settings in the URL patterns and then if we take a look at the base HTML file this is just an ordinary bootstrap starter template with some modifications you can say we have a jQuery script CDN and we also have blog scripts and block content for template inheritance purposes and this block content has been placed in a div with a class contain container and margin top 3. I also created a super user so we can be actually able to log in to the Django Administration and as you can see I'm already logged in so now let's discuss what we are going to use in order to create this face ID login solution we will use the face recognition package and we will install it right now however we will use it in the upcoming part or the part after that so this is the package that we are going to use in our Django project we are going to integrate face recognition with our Django project in order to provide the solution that you saw in the intro so before we actually discuss what it does let's just simply install it for future video purposes okay so first of all I'm going to quit the development server from running and if you write pip install face recognition you will probably fail to install it uh face recognition requires email a cmake to be installed first so let's install cmake uh pip install cmake okay and now let's try to install face recognition so face recognition requires dlib library and dlib Library requires a cmake so right now it's building a wheel for dlip and it will take a few seconds or even few minutes so let's be patient and we will see each other once it's ready all right so we successfully installed face recognition and together with it click numpy pillow and delhi now let's add two additional applications to our project the first one is going to be profiles python managed pystart app profiles and the other ones is going to be logs python manage py start app Vlogs and I'm going to explain why we need those apps in a few seconds so first of all let's go back to visual studio code as you can see we have those applications logs and profiles so we can actually go back to the settings py file to the installed apps list and we can add both of those applications so logs and profiles and actually we will begin with the profiles so if we head over to the profiles application to the models py file we will create a new class called profile which inherits from modos.modo so this class will have a one-to-one relationship to the user so we can write one two one field and then we need to import our user from the from Django con trip con trip out models we want to import the user model and on delete we want to write models Cascade okay so now that we have the user connected to the profile we can actually store some additional information in this profile class so for example a very important for us field will be the photo field so let's add an image field and let's specify that this will be optional and also let's specify the upload to photos okay so the photos that we upload to the profile will be stored in the media folder in the photos directory okay and we can add additional fields for example bio okay models text field okay we can also add a created updated so maybe let's just add a created field and that is it okay then let's return a string representation method or let's use a F string and here let's Place profile of self user username all right so the profile class has been created so we could actually extend the user model however I like to store some additional information about the user in a separate class and in this case it is the profile class all right so now we can proceed and go to the logs over here we will have another class which we will call accordingly log and it also of course inherits from models.modo and here we will have a foreign key relationship to the profile because with this class we will be able to measure accuracy of the face recognition so first of all I want to say that maybe it's not a good idea to implement this solution right away into production it all depends what kind of application you are building and for who you are building this application but if there are a lot of similar people they're most likely will be a situation where user a gets logged in to the user's B account so what we are going to do with this class is to identify the logs so we will have an information about the profile and then we will also have information about the photo and then we can later compare if the profile match the photo okay so there might be a situation where the profile is user a and the photo belongs to the user user B okay so this is made for measuring the accuracy later on so anyways we can write a profile which is now a foreign key relationship as mentioned before to the profile so we need to bring in the profile class from dot models from profiles sorry profiles.models we want to import the profile and then we can pass in the profile over here with on Elite equal to modals Cascade and then we will have the photo and this will be also a model's image field and here we will specify the upload to logs okay so it will be in a separate directory in the media folder and we could also add a Boolean field uh is correct okay and that is it we can also add may be created and let's now focus on the string representation method or let's use the F string again and here let's put in log of and then self profile ID okay so now that we have those two classes that are necessary for our project let's register both of these classes in the administration so I will begin this time from the logs from dot models we want to import log and then admin site register log okay and then in the profiles let's do the same thing from dot models we want to import profile and then admin site register profile okay so um we can now go to the terminal run the migrations python manage py make migrations and python manage py migrate alright and python manage py run server okay so now what we need to do is to create a signal for the profiles application so whenever a user is created we want the profile to be created automatically so let's do this very quickly let's create a separate file called signals py and let's do the necessary Imports so first of all I'm going to bring in the sender which in our case is going to be the user because the user is going to inform the profile that hey a user has been created we need a profile to this user so from Django contrib Alf models we want to import the user and then from dot models we want to bring in the profile which will get created and then from Django EB dot models.signals yes import post save okay and from Django dispatch we want to import the receiver decorator so now we can use this receiver decorator as in the post safe signal specify that the sender is going to be the user and let's create a function create profile which takes in the sender the instance created and keyword arcs and here we will specify we will do a check if the user is created so if created is true then we want to create a profile to this user so let's write profile objects create where the user is going to be the instance okay so this should give us the profile however this won't work just yet we need to register the signals so first of all let's go to the apps py let's place in the ready method let's import the profiles signals and then in the init py let's specify a default app config set to profiles apps and then the profiles config all right let's save this and we have the development server running so let's test this out I'm going to hit refresh we have the logs we have the profiles let's add a user test user let's set some passwords and let's save let's go to the profiles and there it is profile of test user perfect as the next step let's go back to visual studio code let's go to the core application and here let's create a views Pui file and here what we will have is a few views so first of all let's import from Django shortcuts render and then we can specify that we need a login view so this is the place where we will have and the camera access we will take photos and we will be able to if we are successful move to the home view so let's place in the login view first so this will return render and then we will pass in the request and then I'm going to put in a main HTML file directly in the templates folder um and I'm not going to pass anything to this particular template so we have the login view then we will have the logout View log out View which also takes in a request and here we need to import and log out so from Django contrib path we want to import logout okay and then over here we can simply use this logout path in the request and then what we want to do is to redirect to the login so we can return redirect we need to import redirect okay redirect and we want to be taken to the login so I'm going to name the login View later as login okay then we will have the home view the home view will be wrapped with the login required decorator so we can bring in this decorator from Django con trip of of decorators we want to import login required so only if we are successful we are going to be taken to the home View so let's write it down home View and here we will return render request we will specify that um this will be the home or let's do some adjustments I'm going to change this name to login HTML and then I'm going to name this particular template as main HTML okay and here I'm also not going to pass anything to this particular template okay and then we will have a view which will cooperate with the login View and it will return a Json response if we are successful to login or not so I'm going to call this find user view find user view like this okay and this of course also takes in a request and then we will have if something able to find user we will return a Json response which needs to be imported as well from Django HTTP you want to import Json response so we will have Json response with the message or maybe success with the success key set to true and in other case we will simply return successes equal to false okay but for now let's leave it as it is and as the next step we need to actually bring those views and register them in the urlspy file so I'm going to save the views py file and move into core URLs and here I'm going to begin from importing those views so from dot views we want to import login View logout View the home View and the find user view okay so first of all let's place in the home view so this is going to be the main path home View and then here we will specify the name as home then we will have the path for the login View and the name is going to be as mentioned before login and the path for the logout is going to be very similar log out log out View name is going to be set to logout okay here I missed the dash and then we will have a path called classify and this is going to be defined user View and the name is going to be set to classify like this all right let's save this and as the next step let's move to the static directory here let's create a main JS file and let's console log the hello world or let's rename this to logging so I'm going to change this to login.js okay because it will be associated with the login template which we are going to create right now so login HTML and then over here what we need to do is to inherit from base HTML we'll need to load this login.js so let's load static let's open up block Scripts and here we will place a script with a source of then static static and we want to refer to not main but log log in JS and add defer and close the script tag okay so this is for the blog scripts and then in the block content we will need a video and we will also need a special div for showing the image which is taking care which is taken during the login attempt and then we will have some buttons to Simply take this image take this photo or reload the uh the screen okay all right so first of all what I'm going to do is to begin with adding maybe the let's add the video first so video and we will simply set the auto play auto play to true and then I'm going to add an ID equal to vdo element and then I'm going to close the video tag and then I'm going to place a div with a ID set to image element so this is going to be our photo I'm going to close it and I'm also going to add a div where we will place in some buttons okay so first of all let's begin with the take photo button this will have a class equal to and then let's add BTN BTN primary so let's make this button blue and yeah this is basically what we need to do for the class let's add the ID as capture BTN and let's simply close it and set the label as take photo take photo okay all right and then we will have another button with a class equal to and then we will have a BTN BTN maybe info over here we can add a class of margin top three and this will be the reload BTN okay so and this is it so this is our login HTML we will uh see if it's working we will see if it requires some additional styling and now let's add the main HTML so this is going to be the template which we will see once we are actually successful so once we are actually logged in so it will inherit also of course from base HTML and then in the block content we can place logged in as and then request user dot user name and I'm just going to add some break lines and I'm going to add a href and here we will refer to the logout okay so URL and then log out foreign so let's add a class equal to vtn BTN Danger making this a red button and log out and let's close the attack all right let's save this and yeah let's see if this will work so we see a blank page let's go back and yeah fix the spelling mistake log content let's hit refresh and we have logged in as the username now if I press log out we are taken to the login page however we don't see any video we don't see and the live camera over here in the video element so um what we need to do first of all is to login back to the administration because right now if we are logged out we can't visit the main page anymore we have page not found so in this case what we can do is to go to the settings py we can add a login URL and set it to login okay and then if we go back we are now taken to login so we are now trying to access the main page we are now logged in so it takes us to login okay so now let's uh login through Django Administration once again okay now we should be able to access the main page and let's go to the console and sorry actually we wanted to go to the login because over here we just wanted to have the confirmation that we loaded the static file in a correct way in the in the static file is the login.js so now what we can do is to check if the get user media method which will allow us to have the access to the camera is supported by the browser so we can do this if check Navigator then media devices and get to user media if this is the case we will request an access to the user's camera by calling this get user media method and we will pass an options object with a video property set to true so let's do it Navigator and then media media devices and then get user media we need to specify that the video is set to True okay and this will return a promise which will be handled with the then a catch syntax so here we will have a stream okay in this stream will be set to the video element so we will need the video element then we need to access the source object property of that video element and we need to assign the stream to that that property that video element property so first of all let's grab the video element video is equal to and then it was document get element by ID and I think we set the ID as video element okay element okay and then we can access video Source object and assign it to the Stream all right let's save this let's hit refresh and there we have it there you see me so what we can do is to go back to main HTML sorry not main HTML but uh login HTML and over here we can add text Center then we can add a div with a class equal to text Center and this image element yeah we will see how it will be styled for now let's leave it as it is let's save this refresh and now we have everything centered and I think we can finish off over here if you enjoyed this tutorial and if you like this project please consider subscribing to the channel and hope to see you guys soon take care and bye bye

Channel: Pyplane

Views: 17,555

Keywords: faceid django, face recognition python, face recognition django, face recognition django project, face id webdeveloper, web development, django tutorial 2023, django face id, python face recognition tutorial, django web development, django project 2023, python authentication, python authentication system, python authentication tutorial, django face recognition login, face recognition, face recognition attendance system

Id: gQf1yDbm-VU

Length: 28min 50sec (1730 seconds)

Published: Thu Feb 16 2023