Django tutorial: How to authenticate using Google

welcome to a new video and this one we're gonna be showing how you can authenticate using Google in your Django projects I'm going to be starting this project from scratch and I'm working out of es code and so all you need to do to get started is just create a virtual environment for yourself so I'll just create mine called env and then you can activate it once you have that activated you can then go and install Django and when we're using the latest version which is three point 0.5 and once that's installed you can then go and create a Django project by calling Django - admin start project and let's just call it social auth and I'm gonna put a dot at the end of that to put all the folders and files here in this directory that I'm working out of so once you at this point now we can actually get started so we're gonna be making use of a package called Django all auth I've done a couple videos on this package and there's quite a lot of resources out there on how to set it up so I'm gonna go relatively quick through this package if you're not familiar with it I'll leave a link to a video that explains how to use this package more in-depth but let's just go and install it so just install it there so long then we need to add the authentication back ends so we're going to go into the settings and I'm just gonna do that let's say right here underneath the database then we need to add some of these apps to the installed apps so I'm gonna copy all of those and we can go into the installed apps based them all here we already have the auth in there we have messages we just need to add the Django concert sites there then we've got all of the all of that account social account and then we can go and add the Google provider so I'm just gonna get that from over here and just add that in over there then we just need the site's ID so I'll just put that over there and then add this to the URL patterns so I'll do that in over here now it's changed us to a path and then just imports include over there so now that we have that we can go and run manage that pi migrate and there we go there's our initial migrations we can then go and run the server and we can then go to our localhost / accounts slash login and now here you'll see we have the Django OAuth template for login and there you can see we also have the link for Google now to configure this correctly we're going to need to go into the admin and create a Google application for us to authenticate with and also going to need to go to the developer console to make use of the Gmail API so that we actually have an app on Google that we can authenticate with so let's go and create a super user so that we can login to the admin so I'll run create the super user and then run the server again then if we go and log into the admin here you'll see we have the social accounts app and if we go to applications we can add an application and select the provider which is Google and I'll just say this is demo Google and then we need a client ID and we need a client secret key now I'm just going to put one two three one two three there and we're gonna add our available site which in this case is the only site we have which is example comm so I'm going to save that and then what we can do is you can go to our sites and we can choose to rename this so again on to say this is a demo Google and here you'd actually put your actual domain so let me switch that around well then this would be like domain.com whatever your domain is and so like that what this should now look like if we go to slash accounts login and I'm actually logged in already so let me log out there and go back here then now you see it says here or sign up for a demo Google account which is the site name now we need to go and enable the Gmail API the easiest way to do this is actually to use one of the QuickStart guides from Google so what you can do is you can go to developers.google.com and this is where you can get more information about everything you'll see at the bottom there's the developer consoles and the first one is the Google API console I'm going to open that up in another tab so on console developers.google.com/plus all and this is where you manage all of your projects that utilize api's so we're going to take a look at how you can create it from scratch in here in a second but first we're going to look at just a really quick way to get it up and running and that's just by going to this path over here so you go to developers.google.com/startups you to authenticate now we're not going to be using this guide because this is just authenticating with HTML and everything but this button here which is to enable the Gmail API what it's going to do is it's going to create a cloud platform project which is going to be here inside your console and it's automatically going to enable the Gmail API for you so what you can do is you can click this button enable the Gmail API that might just take a couple seconds to convey it's going to do this underneath the logged in gmail account in your browser so whatever account you logged in with it's gonna create this project under that account so once you've done that if you click the drop down for the projects you'll see that you have a bunch of different projects here and you can see one of them I have here is QuickStart this is the one that was created by this QuickStart guide so if I go to that QuickStart project then here you can see I have an active Gmail API being used so I can click on that again this was all set up just by clicking enable the Gmail API and so now here you are on the Gmail API as you can see over here and what you want to do is go down to credentials and there you're going to see both 2.0 client IDs and there's an OAuth client you're gonna click on that and it's just given a default name or client and then there's the authorized JavaScript origins so for use with requests from a browser and you can see by default you'll have localhost port 8000 as one of the your eyes and that's for development purposes so that this can all work you'll also notice here on the right that you have a client ID and the client secret so you're going to want to copy those values so I'll copy my client ID then I'm just going to log back into the admin here I'm going to go back to my social application to the demo Google and paste my client ID in there and then paste my client secret in there so then I can just save that but now before we go and test this I am logged in here so what I'm going to do is log out of the admin and what we're also going to do is inside our Google app over here we're going to add an authorized redirect URI the reason for this is because once you click on this button to log in with Google it's going to redirect you to Google you can select the account that you want to log in with which is your gmail account and it's going to redirect you back to the Django server and there needs to be a callback URL on our side that is going to handle that and that's what Django wolf provides out of the box so we don't need to configure anything for that but to see what that callback URL is what you can do is just go to the providers and then I'm just going to scroll down to Google and then here you'll see that this is the specified callback URL so slash accounts slash Google slash login slash callback you're going to copy that go into your Google app and add a redirect URI which is going to point towards that callback URL we can then just save this bear in mind that if this was in production you'd be putting your domain name instead of localhost so then like that I'm logged out of the admin so I'm gonna click on Google and now you can see that it's given me the option to choose my Google account so I'm gonna select my account and then what it does is it redirects us back to our callback URL which then authenticates us and then locks us in and when we get logged in we get pushed to this slash accounts slash profile URL to know that we're logged in what we can do is go to slash admin and there you can see it says you're authenticated as just django so you can see that I am authenticated what I'll now do is go and login into the admin and what you can do is go to social accounts and there you can see we now have an active social account which has my user just Jenga my UID and the provider being Google and that's basically everything you need to do to set up authentication with Google now back here inside the app if you want to know how you can get to this point without having to go through the QuickStart first again you're going to need to select the project that you're working under so I'll just create a new project from scratch and I'll just give it that default name so now my project is created so I'm going to click to view that project and now I'm switched over to that project so I'm going to click this menu here and under api's and services I'm gonna go to library and then here is where you can see all of the api's and services and what I'm going to do is I'm going to search for Gmail and there you can see you have the Gmail API so I'm going to click on that and then you have the button to enable this API so I'm going to click that and then like that now I'm back here at Gmail API underneath my new project and then from there we need to create credentials so then here we need to basically go through this form so watch which API are you using so Gmail API where will you be calling the API from you'll be calling it from the web browser what data will you be accessing this is going to be user data what credentials do I need so here you create your own Roth client ID and in order to do that you have to set up and I will consent screen so I'll just click to do that and so then here you can see it takes me back to our consent screen on the api's and services and this is going to be an external one so it's available to any user then we hit create and you're going to need to go through this process of adding a logo an application name this is basically all you of your apps settings and once you've done that you can then come back to over here to add your credentials so then again you'll add your authorized JavaScript origins so that's going to be localhost 8080 direct URL which is going to be this URL again so I'll just copy this and once you've done that and your consent screen is done then you'll be back at the point at which we started the video using the QuickStart so you can see the QuickStart really gets you going a lot faster but of course you're going to need to fill in all of this stuff anyway and that's basically it so that's how you authenticate users using Google so thanks for watching if you enjoyed this video leave a comment down below don't forget to subscribe and I'll see you in the next one [Music]

Channel: JustDjango

Views: 51,359

Rating: 4.9312406 out of 5

Keywords: django, django tutorial, python django, python, Django Web Framework (Software), django project, Python, django tutorial for beginners, python 3, python 3.5, django python, python tutorial, how to python django, django 2.0 tutorial, django 3.0 tutorial, django 2020, django google authentication, django google auth, django social auth, django gmail, django social auth tutorial, django google tutorial

Id: NG48CLLsb1A

Length: 13min 7sec (787 seconds)

Published: Tue Apr 14 2020