Learn Django - Towards social logins with Google and Django | Django-allauth

building a custom login can be complex there are many steps when you consider the different features that you need to build log in log out sign up email confirmation change login details and that's just for a simple login system the Django framework is pre packed with pre-built functionality so that we can create a simple login system very easily as I demonstrated in a previous tutorial in this tutorial we take a look at a Django package called Django all orth which helps us set up a social login there are two popular packages for comparison Python social earth and the Django or orth package in this tutorial I'm going to take you through how to begin the process of building a social login with Django and Google which will allow users to sign up and log into your site using their existing Google email and password so let's just go through the process quickly building a new Django project so I've made a new folder here on the C Drive called Django so I'm going to go into that just copy the path and open up the command prompt and type in CD and then change to that path so now let's just create the virtual environment so I used Python - em and then virtual environment virtual environment so that's going to set up a new folder with the virtual environment inside of the Django folder so now we've got the virtual machine ready we now - need to activate the virtual machine so it's inside the folder called ve and v4 virtual environments and then there's a folder inside of there called scripts and then inside of that folder we have activate so now we got the virtual machine running now let's install Django so now we're working inside of our virtual environment we need to now install Django so I type in py - then we're going to need the pit manager here and then we're going to install Django so you can already see that I've already installed Django but your should be installed now so now we have Django installed I'm going to use the Django admin to create a or start a new project and this project is just going to be called new project so let's go inside of our folder and have a look and you can see here I have a new folder called a new project now that's not what I want because what's happened here is that we create a new project and our project will be created inside of this folder but we want to create the project inside the Django folder here so that the virtual environment is at the same level as our root project folder so let's just delete this file and run that command again but this time we're going to run the command and utilize the dot afterwards so this is a conditional attribute we can include and that will mean that we utilize the current folder which is Django for our project so if I run this you can now see that we've got the manage py and the new project folder inside of our home or our project directory which is the Django folder so the last step we now need to create a new app inside of our project so we can now use the the manage py file to start a new app and we're just going to call this blog so now we have our project started we can now configure the authentication so here we're going to be utilizing Django or off package so first of all we're going to need to install it so once we've installed the package we head straight over to the settings PI file and in here we're going to add the installed apps include the authentication back-end or define the authentication back-end settings then we need to set up a site ID a login redirect and a social account providers so let's start by going over to the new project folder and inside the settings were open this up so the first step we need to do was to define the installed apps so here if you remember we did make a new app called block so we just need to add that first so now we need to install the authentication package the Django Olof so here in the documentation we are running through the installation so by all means head over to the Django or North documentation and just have a look through the first steps so here you can see that we need to install by typing in pip install Django all off so I head over to my terminal and I type that in so now we've installed the package head back over to the Settings file and we need to now define all the installed apps so there's a few apps that we need to define so the first one is the Django contrib sites so it is imperative to have the Django contrib site feature enabled so if you have a look at the manual it's a hook for associating objects and functionality to a particular website so I would presume that because the all off package provides functionality to configure authentication of multiple sites or instances you would need this to interface or differentiate between the sites in some way so next we need to add our blog back so I did remove that initially might have noticed we did already include this in the installed apps so I placed that below the contracts so it is important that the Django country type is above the rest here and then we add the all off package and then the all off account and then the all off social account and then finally we need to add the provider now in this case were utilizing Google so if you head over to the all off documentation you'll see here that there are plenty of different providers that you can enable and you'll be familiar with most of these a discord Dropbox Amazon Facebook and so on so here we have the Google auth provider so now that we declared all of our installed apps if you move down and just below the templates I've added a new section called authentication backends so here we declare what backends we want to authenticate again so here we're going to obviously be utilizing the all off back-end to authenticate users and we're still going to be utilizing for example the admin so we want to also authenticate against the original Django model back-end also so when we run the migrate in a second we're obviously going to be able to create a super user to login to the Django project so here we want to authenticate the the admin for that as well as utilize the all of authentication back-end and then finally at the end of our settings file we add the site ID equals one so here we can have multiple site IDs and when we get into a database this have become a lot clearer so we need to include that first and then we have the login redirect at the moment that's just slash and then we're going to create our social account providers so again this code has come directly from the manual so you will find a few examples here in the manual so by all means if you're looking to utilize Facebook etc then just browse over the manual and it should give you instructions on how to utilize these social account providers so now we can go ahead and run um migrate so I run make migrations which I don't need to do and then I'm migrated so now that's finished let's create a super user and have a look at what's being created so let's just create a super user so that we can log into the database here I'm just going to be using admin and a password admin so now we had that in place let's just run the server so I type in you I okay so let's have it head over to the server so we're just logging upon logging into your Django administration area you'll see that if you're familiar with this Sachin you would normally see the authentication and also authorization section here groups and users and of course the user that you just created the super user in this case I created was Adam it so you can see some additional models now so for example sites social accounts social application tokens and the social applications so before we get into some of these different settings first of all let's just give you some more information of what this site ID refers to so at the moment the site ID equals one now by default when you install all off package or create the models here inside of sites there's an existing option here called example.com so here you're in this site area you're defining the website where you want the authentication to be placed now example.com this entry here would be site 1 now I've just made a new site entry which was one two seven zero zero one four using port 8000 because that's what we're going to be setting up here the authentication for so because I made this new one here instead of just editing this here you just need to be careful to make sure that you change the site ID for on one in the settings file to number two obviously what you can do like I've alluded to is that you can just go into here and edit this if you want to but I just wanted to point that out so we've already moved ahead and migrated the database and created a super user but the next steps after configuring these settings file is to migrate the database then create a super user and use the database and once you've done that now we're going to create a home template so we're just going to build a simple index page for the home page and then we're going to configure the URLs so there's two URLs that we're going to configure in this example we're going to configure the home or index page and also the accounts so the accounts directory that we're going to configure is where all the all off configuration is going to be placed so we have a look at all the difference pre created templates that all off presents us with when we create the accounts URLs so we have already migrated the database and configured a super user so if you have skipped ahead you just need to go back to the last stage of the last part or the last section and just migrate the database and create a super user so I'm just going to go ahead and create the templates folder and then inside of that a new folder called blog and then inside it there we're going to have a new file called index.html so in my index file I've simply just copied and pasted the bootstrap start a template and then in the middle here I'm just creating a simple container which is going to be placed in the center of the page and we're gonna create a simple if-else and if statement here and I'm just going to check to see if the user authenticated if the user is authenticated so user dot is authenticated then we're just gonna welcome them and include their username of course if they're not logged in we're gonna ask them to please login obviously you can change this to whatever you like but here we just use utilizing this just to show that the fact that the user is logged in just to confirm that the user has logged in so now that I've got my index template I've headed over to the new project folder inside of here the URLs and at the moment we have the path to the admin so we're going to create two paths here we're going to need the include and we're going to also import the template view because we're just going to run the index page from the template view so first of all I'm going to create the account path so here you'll notice that I've included the all off URLs so we're going to use all the default all off URLs and I'm going to show you them later in this project and what that means we'll be able to access all the default templates for the all off package and then we also then need to configure the path for the template which is the so the index page so here the template resides in the folder called blog in the templates and then index dot HTML so we should now be able to test the the home page so just check to see the servers on and if I head over to the home page we now have template does not exist because I just need to now go into my settings file and configure the templates so if you're using Windows inside the settings template if you go over to the template area I've just typed in OS top half join and then open parentheses base underscore dir and then define the template folder so that's what we needs to include so if I go back into my web page and refresh now the templates working okay notice also that it welcomes admin because we are actually still logged in as the user we created when we built the super user now yours might not say admin depends on what super user you created so as I've alluded to the all off package comes with some pre-built templates so in our URLs we configured our URLs to include these templates and we gave it a path of account slash so if we just were now to type in accounts slash we can now see some of the different pre-configured available paths that we have so we have a sign-up slash signups login logout password change password set and so on so if I were now to for example type in sign up if I spell it right so we are already logged in so we're not gonna be able to access that so if I type in logout this is going to take us to a logout or a sign out so I can actually click this button so this template and to reiterate is a prebuilt all off template which we can configure and we go through that later in the tutorial so I can now sign out so you can now see that when I sign out it says welcome friend please login so let's head over to the account login to see what that looks like so at the moment we can sign in and sign up so the sign up should take us to a form which we'd probably want to configure and sign in will take us to this page here which has the username password so if I were to type in admin and I can login as admin so let's just log out or sign out again and then go back to the accounts trying to get in the idea now I got login so here we got the option here of Google so this is where we can click this option here and you can see that as an arrow at the moment and this is where we're going to click Google and that's going to take us to the classic Google login page there we can type our Google email address and password and then that will get used to authenticate to our site so that's the next stage that we now need to configure so we're now ready for the next step so the Google authentication so first of all we need to head over to the Google cloud platform and then just sign up if you haven't already got a Google account so once we've signed in we create a new project and the outcome will be that we have a set of keys so these keys will be utilized with in our database and then we configure the database for the Google authentication and then there we go we should then be able to authenticate using Google so I type in Google API and then click on the Google cloud platform so console developers.google.com in so from here we're going to need to add a new project so at the top here I click I just remove that and then I can select new project so give your project a new name I'm just gonna call this VA Google auth and then I'm going to press create so now with your project selected with your new projects selected now the first thing that you can have a look at is the credentials so what we need to do here is to configure a consent screen or we could do at least configure a consent screen consent screen sorry external and then press create so by all means have a look through these settings here you can add support emails application logo and name etc so by all means add a new name Django or app and just press safe so there's really anything that we need to do to get our application working in that area now let's just go over to credentials so what we need to do here is create some credentials so we're going to be utilizing the OAuth 2.0 client IDs so let's create some credentials here I auth client ID and the application type is going to be web application so the name we just call this or that Django and then we need to add a a URI so here we're just going to type in HTTP colon slash slash 127.0.0.1 : 8000 that's where our project resides and then we need to also include the authorized redirect URI so this isn't something that we just make up if you have a look at the OAuth documentation there are details there what needs to be placed so in this area I type in HTTP colon slash slash localhost that's where we're serving our web page from and then port 8000 and then we need slash accounts slash Google slash login slash call back slash so once you've got that in place just zoom back out and press create and then you're presented with your client ID and your client secret so by all means copy that because we're going to need that in a second but we can get back to that point in a minute if you haven't suppress okay so now let's head over back into our database so just make sure that the server's turned on and we're going to go to the the admin area so just sign in as admin so we've already pre-configured sites if you remember we've added a new site or you might have used here original here so just remember this is site one and this is site to the one two seven zero one one blah is site two so remember that inside of your settings file you need to include number one or number two so number one will be if you've changed the example.com to the local address or if you've included a new entry here like I have this is going to be site number two so just make sure you've got that in place to begin with and then we can move on so with that configured let's just have a look at social accounts what you're going to find in in this model or this part of the database of this table sorry is when someone signed up or logged in using their social account their Google account the accounts are going to be shown in this area so coming out of that table the social application tokens again there's nothing inside of here that we need to configure to set up our login so let's head over to the social application a table so inside of here we need to add a social application so this is going to be a Google and we're just going to call this Google API and then we've got the client ID so here what we can now do is just go back into our actually we can we can rename it to this so I'm going to rename mine to the author Django and now if I click on this option here that's going to copy the ID the client ID but in actual fact we're going to need both keys so the client ID is here so I'll copy that into the client ID and then we have secret key and key so we don't use key with Google we only use the secret key so we can copy the client secret what it's called in Google over to the secret key and we need to apply that to our site and notice that I created two sites like one and two so I need to apply it to one to seven so I choose that one and select this option here and press save so now that's configured let's now log out and let's go back now into accounts and login so now if I press Google I now have the error which is the arid four hundred redirect URI mismatch so this problem is fairly simple to resolve if you go back into your Google API service here and select credentials if we go back into this option here and just reconfigure it if you notice earlier I didn't actually configure this correctly I use localhost and not one to seven so I've changed that over to one to seven point zero zero one eight thousand and I've just pressed safe so once that's in place it might take a couple of seconds before then the account works but you can now see that it is working so if I go back here into the accounts login and select Google it now takes me to choose an account so I choose my account and there we go it now welcomes me so it says welcome very so very is the first name I've included in this account I've made up to show this example so it shows me the first name of my account now what can also do now is go into accounts and then slash log out yep log out and then here I can actually sign out I can also change my email there's a form here to change my email and like I said we can sign out so I'm just going to sign out so there we go we've now actually signed in using a Google account so let's now go into the database and see what's happened so I go into the admin area and we can now see that in users I have a new user here this is my email address and my Google email address first name and last name that's been taken from my Google account and then also the user name is been defined as Barry now if someone else were to sign in using their Google account and their first name was the same name as something that has already exists in our database what would happen is that Jango would increment this to one so it's a very one Barry two very three and so on so that's how multiple users with the first same first name will be managed by Jango so if we go back now into these social accounts we should have now yep a new social account and you can see here that's who have just signed in as and if we then look into the social application tokens you can now see that there is also an entry here for my the user that's just logged in me so I haven't finished yet but let's just summarize here we have now created a simple application for social login we've implemented the Jango all orth application and then configured it and then we've configured the Google API to allow us to log in using our Google email so the last thing I want to just go over is template over rights so by default as I've alluded to before the auto off back egde comes with its own templates so I guess the question is well how do we override these templates so let's just find where the templates of the author application is being used are placed so if I go into my Django project I've got the virtual environment inside of here I've got the Lib folder and then the site packages so if you remember we installed all auth so this folder here has a folder called templates and this is where you're going to and all the templates that's being used so let's just open the open ID and we have a login for example if I go to account we have a so I log in again and log out a sign out so let's just go into the log in I'm gonna open that up so this should look fairly familiar because this is what we've been utilizing to log in so we can utilize some of this code to actually create our own login pages so let's think about now how we can overwrite this so if you want to make your own templates for this project then simply just go back into your templates folder and then inside of here create a new folder called accounts so for example if you wanted to make your own custom login page then we're just going to create a new file called login dot HTML so it's important before you start building templates you just go into the documentation and have a look at the template tags that are required so for example if you wanted to use the social account tags then you'd need to use the load social account in order to do that and there's a whole host of different options here that are available so it's well worth reading through that so here's an example we created the login page and I've just copied and pasted bootstrap template and they've added a new container here and created a form and here what I've done is I've created a simple login form and then I've included the provider login your eye URL sorry to Google so there's going to be a button where you can click and log in via Google so notice that I'm using the load social account at the top here so this code is available in the repository so that by all means have a look at it this is just an example I'm not going to go through line by line so the point is that if you've got a template in here that's the same name as the original template from all off its going to overwrite the original template and it's going to use the template that you've created here so now then if I just go into my project and I would just need to log out and if I go back into the login it should now be utilizing this template sorry I'm in the admin section so I need to go to account login okay that's not happened apologies I've made it a mistake here I need to rename this folder so the folder should be called account not accounts there we go so if I go and refresh this page now you can see that it's now utilizing my template and in here I've got a big button here sign-in with Google and that's going to take me to the signing now notice it didn't ask me if I need to it didn't ask me to sign in it just automatically sign me in so you'll notice if you go into your database and have a look at the social accounts table here a token has been made and it expires on May the 31st so you won't need to actually log in again physically until this expires so moving back to templates we created a login template so you can do exactly the same thing for the logout template and so on so all the templates you can see here can be overwritten by your own templates and of course you can utilize these templates or the code within the templates to help support you develop your own templates so it gives you an idea of the tools the code that you're going to need to create your template or extend the template that's here thank you very much for listening to this tutorial hopefully there was some value in this tutorial and you can now take this step further and explore further the login logout and authentication process of course there's much more to do in order to get this to a place where you might utilize it in production but like I said hopefully this will help you and move towards those steps so this definitely isn't the end of social or login systems I've created two tutorials now with login systems first the basic login system via Django and now looking at social logins so over time I will create more complex login systems more in-depth and eventually will create a whole login system which includes all of the different options and features you would expect to see in the login system so again thank you very much and hopefully I'll see you in the next tutorial if you do have any suggestions for tutorials please let me know and leave them in the comments

Channel: Very Academy

Views: 15,275

Rating: 4.9566159 out of 5

Keywords: django login, django social auth, django tutorial, learn django, django allauth, django

Id: 56w8p0goIfs

Length: 34min 11sec (2051 seconds)

Published: Sat May 30 2020