Set up Google Sign-In for Faster Django Login Experience feat. Tech with Tim

in this video I'll be showing you how to integrate Google sign in with the Django website this will allow you to sign in with your Google accounts and then use Django as you normally would now before we get into that I will mention that my name is Tim I run the YouTube channel Tech with Tim which has hundreds of other programming tutorials and I'm a developer advocate for aquamide with that said let's go ahead and get into the video [Music] alright so let's go ahead and get started that was a quick recap here we're going to be creating a Django project we're then going to be adding Google authentication to that now there is quite a few steps here to set this up however it's not overly complicated and each step is actually fairly small and simple to follow through with so just kind of a warning here make sure you go through the video and kind of pay attention to each individual step if you miss even one of them it may cause this setup to not work properly so if you are having issues Slow Down the video rewind pause Etc take your time with it and just make sure you get all of the steps done correctly okay so let's go ahead and get started here I've opened up visual studio code this is where I'm going to set up this project I've just opened a folder here on my desktop you can do this wherever you want now the first thing we need to do is install Django I imagine many of you already have this installed but if you don't you're going to type pip install and then Django like that okay so that's going to install Django for you now once you have Django installed what you're going to do is use the Django admin command to start a new project so we're going to say Django admin and then start project then you can call this whatever you want I'll just call this Google uh and we initially here Google conflicts with the name of existing python module okay so of course we can't use that let's do Google login Okay so we've created a Google login project now inside of here we have our kind of main app so what we're going to do is CD into Google login and now that we're inside of here we're going to create a new app so I'm going to say Python manage.pi and then this is going to be start app and I'll just call this users now you can call this whatever you want you could call it again Google login or login or Google or something like that but I'll just go with users okay so now we've created our app now that we have done this what we need to do is add our app to our installed applications so we have users here we're going to go to Google login settings.pi we're going to go to installed apps here and we're just going to add users like so alright so now we have created our app we've kind of set up the main Django project and a lot of the work we're gonna have to do is going to be within this settings.pi file now I just want to make it clear here that I am going to assume you have some familiarity with Django so although I will explain what I'm doing I won't explain kind of all of the Django syntax and some more basic stuff that I'm sure most of you have already seen before okay so now that we have our Django app kind of set up what we need to do is actually create a new project on Google since we're going to be using Google services to sign in now what we'll do is we'll go to the Google console which I'll do in a second we'll create a new project we'll set up our oauth consent screen and then we will create some credentials that we can use here from Django so let me open up that page and then we'll go from there alright so I've just Googled here Google Cloud platform our Google Cloud console you're just going to want to go to this URL right here so console.cloud.google.com now from here just change your Google account in the top right hand corner to be the one that you want to use and then create a new project so let me go ahead and do that okay so I've switched my Google account Here and Now what I'm going to do is click on the project Tab and I'm going to create a new project and let's call this Django Dash tutorial okay let's go ahead and create that now we're going to wait for that project to finish and once it's done we're going to select that and then start setting up our oauth which is kind of the Google sign in credentials so let's click on select project we're now inside of Django tutorial now that we'll he we're here sorry we'll expand the navigation menu we'll go to apis and services and the first page we'll go to is this oauth consent screen okay so let me make this full screen so here is where we're going to set up uh kind of the page you'll see when you click on sign in with Google so you've probably seen this before you click on sign in with Google it brings up a page and says you know this company wants to access your information that's really what this screen is that we're setting up and we need to do this first before we can generate our oauth credentials so since we are not a part of a Google Organization we have to select the external here now it's going to tell you that you're only able to use specific test users that's actually not really the case you can sign in with any Google account at least from my experience so don't worry about kind of the description and all of this stuff for right now just click on external and then click create now here we just need to fill in all of this information so let's fill in our app name I'm just going to call this Django tutorial I'm going to blur my email out here so you guys don't see it but we do need to select this you can select a logo if you want and then you can fill in these different details now in my case I don't have a home page privacy policy or terms of service link so I'm not going to put those in and and same with the authorized domains will leave that empty for now and will end up filling that in later lastly you need to make sure that you fill in a developer contact info so do that and then click on Save and continue alright so once you do that you're going to be brought to a Scopes page now at this Scopes page we just need to add the Scopes or the information that we want to get access to so I'm going to click on add or remove Scopes and we're going to add the first two here which is the email and the profile this way we're able to get information like their name their profile photo all of that and then we could use that in Django if we want to but most importantly we just need the email but we'll select both of these for now okay so let's go ahead and click on update now that we're here we'll go save and continue and move to the next page now it's going to ask us if we want to add test users now that's while the publishing status is set to testing it only allows us to use the users that are here as I said before we actually don't need to do this we're able to sign in with essentially any Google account so you can add a test user if you want but in my experience we don't need to and it's still going to work otherwise so let's go ahead and click save and continue alright now it has some information here again I'm going to blur out my emails we'll click on next and then we're pretty much done with this page all right so now I am back on my dashboard and where I'm going to go is to the credentials page essentially what we're going to do here is create some credentials that we're going to use from Django and that's going to allow us to use the kind of service here provided by Google to sign in with Google so we're going to go create credentials we're going to select oauth client ID and then we're going to make sure this is web application because that's what we're doing with Django in terms of the naming call this whatever you want I'm just going to call it Django and then as it says here make sure you have your oauth consent screen alright so now we're going to fill in our authorized redirect URL so we're going to do HTTP colon slash slash and then this is going to be not localhost but 127.0.0.1 and then Port 8000. now as well as that URL we're going to add another one but this is going to have the following it's going to be accounts slash and then this is going to be Google slash login slash callback so make sure you name it exactly this this is just what the Callback URL is going to be uh that we need during the Google sign in process okay so add both of these here to your authorized redirect URLs or Uris whatever you want to call it and obviously if you're using a real domain and not using localhost then you would put the real domain here okay so I'm going to go ahead and create this as it says it can take up to five minutes and there you go it's actually been created already so what we need now is the client ID and the client secret so I am going to download this obviously I don't want to share this information with anyone and I'm going to store it in the same directory where my uh project currently is so that's going to be up here Django Google login let me save that Json file so we have access to it later okay that's all we need to do from Google for right now so now that we've done that let's continue to set up Django all right so now that we're back here into vs code we're inside of settings.pi from our Google login project what we need to do is create a few new variables and then add some content to some of the existing variables so the first thing we need to do is add site underscore ID and we're going to make this equal to one we may need to change this later but for now make this equal to one it's very important you have this variable if you don't have this uh then we're going to have an area that pops up later so just make sure you add site ID equals one this is because we can potentially have multiple sites we need to identify which site it is that we're using for our login okay next inside of our installed apps we're going to add a few more applications for doing kind of our social sign ins right so we're going to say Django dot contrib dot sites that kind of correlates this variable here and then we're going to add all auth now this is built into Django and this allows us to do authentication with things other than uh just what do you call it just a standard sign it we can do this with Google as well now okay so we're going to add all auth Dot and then account we're going to add all auth dot social account and then we're gonna add all auth dot Social account if we could spell this correctly dot providers dot Google Now obviously if you're adding Facebook or other types of authentication then you would do a similar thing here and change this to Facebook GitHub Etc whatever the other kind of sign-in methods are that you want to use in this case I'm just going to show you Google okay so now that we have added our installed applications the next thing that we need to do is specify a variable for our social account providers so in all capitals here we're going to say Social account underscore providers is equal to and then we're going to specify the scopes for our different providers so we're going to put Google and then here we're gonna put in all capitals scope and then we're going to list these Scopes that we specified in our credentials so it's going to be profile and email okay so these are going to match with what we specified when we were creating that kind of Google credential remember we did profile we did email so that's why we're putting those here okay next we're going to do an all capitals again auth underscore params okay and then we're gonna say that's B access type and then this is going to be equal to online okay there we go let me just quit out of this uh python terminal I don't even know how I got into that all right so that is all we need for right now for the Social account providers again if you had other providers then you would list kind of a similar thing here for those in this case we are just using Google okay next thing that we need to do is we need to add something called our authentication back ends and we're going to do this at the very end of our file so scroll all the way down to the end of the file and again in all capitals we're going to add the Authentication underscore back ends and it looks like a spelled authentication incorrectly so let's just use our spell check here okay so authentication back ends and then this is going to be equal to a tuple and inside of this Tuple we're going to put Django dot contrib dot auth dot backends dot and then this is going to be the model back end and then next we're going to do all off dot accounts dot auth back ends dot authentication backend okay so essentially we're specifying that we're using kind of the standard Django back end as well as the all auth back end we need both of these here for this to work for our Google sign-in all right lastly there's two more variables that we need to define the first one is going to be our login and then redirect again we got to spell this correctly uh redirect and then URL and this is going to be equal to slash and then we're going to do our log out underscore redirect underscore URL again this will equal to slash let me fix my spelling here okay perfect so we have our login redirect URL and our log out redirect URL and now we are pretty much done in this settings.pi file okay so now that we have all of our settings in here let me just quickly recap so you don't miss any we have our site ID we added all of these right here so we had our users if you named your app something else you're going to change it obviously so it's not users then all of these django.contrib.sites all auth all auth.account all off dot Social account and then all auth.socialaccount.providers.google we then added our social account providers we then went all the way down to the bottom of our file we added our authentication backends and then our login redirect URL and I log out redirect URL if you have a different page that you want to redirect to obviously you can change this in my case we're just doing the home page okay now that we've done this we're going to go to urls.pi this is from our Google login and we're going to add a set of URLs here so the first URL path that we need to add is path and then this is going to be an empty string and then we're going to say include now this is a function that we need to import so we're going to import this here and we're going to include the URL patterns from our Google and then this is authentication If We spelled this correctly dot URLs now this is coming from the all auth package right so we have Google authentication.urls and this is what provides that callback URL that you saw that we added when we set up our Google project okay next we're going to make another path here and this path is going to be accounts slash and this here is going to give us all of the roots related to our user accounts so resetting the password signing out all of that kind of stuff so we're going to have accounts we're then going to say include and then this is going to be all auth dot urls like that uh and there we go we now have what we need inside of our URLs now one thing we also want to add here is the URLs for our app so for our users app which we'll create in a second so I'm going to say path and then this is going to be users dot URLs and sorry this is going to be slash and then include and then users dot URLs okay my apologies about that all right so these are the URL paths so we need pause the video if you need to copy them in and now that we've done that we're going to open up our users and we are going to create some URLs we're going to make a new file here and this is going to be urls.pi now inside of urls.pi we need to create our URL patterns for our home screen and for a log out screen again we're going to write those in a second so I'm going to say from Django Dot and then this is going to be URLs we're going to import path and then we're going to say from Dot import views all right and that's going to import the views file here which we'll use in a second and we're going to say URL patterns is equal to this is going to be an array and we're going to say path we're going to put an empty string and then we're going to say views dot home so this is going to be our home screen which is just the empty path then we're going to have another path here we're going to call this log out and this is going to be views don't log out underscore View okay so we need to write both of these views which we'll do in a second but that's why we're adding them here to our URLs file now that we've done that let's go inside of views and let's create a view for our home page let's also create a view for signing out so first we're going to say from Django dot contrib dot off import and we're going to import the log out function and then above above here we're going to import the redirect function so first we're going to say Define home and we're going to say request and then we're going to return the render function we're going to render request and then the template we're going to use is called home.html again we'll create that in a second next we're going to say logout underscore View this is going to be a request and then we're going to call the logout function passing the request object this will log out our user and then we're going to return the redirect to the empty route okay so there you go we have the two views that we need that's actually all we need for this file now we need to create this home.html template where we'll have our Google sign in button and some other stuff there as well so we're going to go to users we're going to create a new folder it's very important you name this folder exactly as I have here which is templates it needs to be named exactly that inside of templates we're going to create a new template called home.html again make sure you name it exactly home.html so I'm going to use my built-in Snippets here just to generate some boilerplate code if you don't have that snippet HTML colon 5 then you can just obviously type this out for the title I'm going to say Django Google sign in and then what we're going to do is create a button that allows us to sign in with Google and then we'll display some basic information about our Google sign and like you know if you're signed in if you're not signed in and then allow you to log out so the first thing we need to do here in our template is we need to load our social accounts so we're going to say load Social account and now that we've done that we're going to have the ability to use a login URL which you'll see in a second so I'm going to make a h2 tag here and I'm going to say Google login and then I'm going to put an a tag here for a link now I'm going to say ahref is equal to and then inside of two percentage um kind of what do you call this curly braces here this is one of the syntax in the Jinga templating engine uh we're gonna say provider underscore and then login underscore URL this is a variable and then we're gonna put here Google so what this is going to do is use a special function that's going to give us the URL for Google sign in now I need to make sure that I don't have the same types of quotes inside and outside so notice I have my double quotations and then here I have my single quotes uh you saw I was kind of getting some weird syntax highlighting when I didn't have that so I've just fixed that now okay so that's going to be the URL that we want to go to but then we need to say question mark next is equal to slash now this is essentially defining the route that we want to go to after we come back from this URL so after we come back from the Google sign in page then we're going to say login with Google obviously we could make this look better but for now this is fine okay so that's all we need for now uh we will start testing this in just a second once we go through uh some few kind of smaller steps here all right so this is our home.html template remember we have our views here we have home and we have logout we have our URLs file that has the paths to these different views and then we have URLs here which include these URLs and actually I can get rid of this slash and just make this an empty string I don't think that's going to make a difference but just for consistency here with this path all right now that we've done this what we want to do is just make some migrations on our database to make sure everything is synced up so we're going to say python manage.pi and then it's going to be make migrations and sorry I need to CD into the correct directory so I'm going to CD into Google login and then I'm going to say python manage.pi make migrations and I got an error here saying new module Google authentication so I think I may have spelled this incorrectly uh let me have a look here in my urls so actually my apologies here guys I was referring to kind of a cheat sheet on my uh other monitor and it looks like I've accidentally included this line and we actually don't need this uh don't worry about kind of why I put that there but either way we actually don't need that we only need the URL to our main app and then to the all auth urls okay so my apologies let's get rid of that and now that that is gone we should be able to make our migration so python managed up high make migrations there we go now that we've done that we're going to migraine so we're going to say python managed up high migrate and apply all of our migrations and now that we've done that we can actually run our server and there's a few other steps and then we can see if this is working so I'm going to say Python manage.pi and then run server to run our Django server okay so now our server is running I'm going to open up this URL and notice that we're brought to the home page where we have Google login now we're not quite ready to click this right now you can see if I do this and I get an error and the reason for that is we haven't hooked up our Django site here to our Google credentials so notice we have our client information here let me just save this so it auto formats we have for our client ID and then our client secret this is what we actually need now to kind of add to our project so let's go back to Django and what we want to do is go to slash admin alright so I've just ran into an error here this is due to a spelling mistake notice it says no module named all auth.accounts the reason for that is if we go back to settings.pi we can see I've said all auth.accounts this needs to be account so let's change that back to account my apologies about that and now that that is fixed let's go here and refresh and notice we're brought to the admin page okay so I want to go to admin now what we need to do to sign into the admin page is we need to create a super user account which we may actually need to do before starting the server so I'm going to stop my Django server and I'm going to type python manage.pi and then create super user okay so we're going to create a super user here it says leave blank to use Tim which is actually the name that I want to use so that's fine I'm not going to put an email address in and then for my password I will just do a numeric password to make this easy to remember uh yes that is fine okay so I've created a super user account you should do the same whatever username you want and just a password you're going to remember now we can rerun the server okay and let's go back to our admin page so let's just refresh here and now I'm going to sign it okay so let me sign in here I notice my password was kind of already filled in because I've done this before all right so now we're brought to the Django admin website now here what we need to do is create a new site so we're going to go to sites and notice we have this example.com so what I'm going to do is actually delete this uh so let's go action delete go and yes I'm sure I want to delete that and now I'm going to create a new site now for the domain name all we're going to do is HTTP colon slash slash and then it's going to be 127.0.0.1 and then Port 8000 okay so that's the domain run right now same thing for the display name we'll just go exactly with this all right so let's go save here and now we've added our site now we're going to go to social applications uh and we're gonna add a new social application so for the social application this is where we're going to put in Google notice that's the only one because that's the only provider that we provided when we set it up in our installed apps and now for the name we can make this anything so I'll just call this Google and now we need the client ID and the client secret from our Google configuration file so I'm going to go back here to vs code let me just make this half screen I'm going to open up this file and I'm going to copy my client ID and paste that here I'm going to copy my client Secret same thing I'm going to paste this here we do not need to put anything in for the key what we do need to do is associate this with our site so we're going to click this Arrow to move the site over here and now we can click on Save and we have hooked up our Google kind of social platform or sign in method at this point that should be everything that we need to do uh to actually start using our Google sign-in method so what we can do now is go back to the home page and let's see now if this works I'm gonna go log in with Google and I got an issue here saying accounts Google login does not exist okay so the reason why we're likely getting this has to do with our site ID now I ran into this error previously so don't worry about it I'll show you how to fix it and this is what I was mentioning before so we're going to go back to settings.pi we're gonna go here to our site ID now the sign ID is the ID of the site that we're using for Google sign in and in most cases it is going to be one however you saw that we had a default site there of example.com since we had that it's likely that that site ID was one and the site we just created has an ID of two so I'm going to change this now to B2 and save that should automatically update for me and now if I go back here and I refresh notice that we're brought to the correct page now notice here that we're getting an error and it's saying access blocked this apps request is invalid and it's giving us a redirect URI mismatch so I'm going to go to the error details and it's telling us here that if you're the app developer register the redirect URI in Google Cloud console now I believe we already did that however we may have misspelled it so I'm going to copy the URI that's giving me right here and we're going to go back to our Google console which I actually have open go to our oauth 2 client IDs and we're going to go and and add this URI okay so I'm going to paste this in now this looks to me to be the same maybe it's just that we forgot the trailing slash either way let's save this and now we'll go back and we'll see if this is going to work so let's go back to our main page okay so let's just go here to Port 8000 let's try to sign in with Google and now notice that we were able to sign in we just had the wrong redirect URI so I'm going to blur these emails here so that you don't see them but I will pick an account to sign in with let me go ahead and sign in with let's do this one and now it should bring me back to the home page and I'm now signed in with Google all right so now signing in with Google is working and you'll see that if I click this button again brings me back to the sign in page and again I can sign in with a different account if I want to do that now that we are signed in though I want to show you how we can check if we are signed in and how we can sign out of this account and then you can go and extend this project and build out all of the other kind of Django stuff that you would do using Google sign in so let's close this page and let's now go to our home.html and I'll show you a few little things that we can use here uh to demonstrate whether we are signed in or not just to kind of prove that so beneath my a tag here I'm going to put an if statement so I'm going to go percent I'm going to say if and I'm going to use user which is just a part of the request object so I have access to that in the template and then I'm going to use the is underscore authenticated uh what would you call this property okay so I'm going to check if the user is authenticated let me just end my if here and if they are authenticated then what I'm going to do is put a P tag here and I'm going to say you are signed in as and then I can access the user's email using user.email okay then I'm going to close my P tag next what I'm going to do is create a log out button so I'm going to do a I'm going to say href is equal to logout that's the name of our logout root remember and then I'm going to put log out here and close this tag okay there you go this should now tell us if we are signed in and then allow us to log in so let's go back here and refresh and of course it appears as though I've made a typo so let's go back here and fix this typo go here and refresh and now notice it tells me that I am signed in okay so now that I'm signed in I can sign out by hitting the log out button and notice it's going to call this logout root here which just redirects me back to the home page and signs me up again if I want to sign in I can go ahead and do that and then it's going to tell me I'm signed in as whatever the email is and of course I could log out all right so with that said that's pretty much going to wrap up this video that's really all you need to know in terms of signing in with Google and to do this with other providers is very similar right you're going to use Facebook or GitHub or whatever it is and then kind of follow the same procedures except they'll be slightly different stuff in terms of getting your GitHub API key or your Facebook API key or client ID whatever that may be now just to run you through the steps one more time what we did is we created our Django project we created a Django app we went to settings.pi and we added our installed apps okay these are all the ones that you need right here we also added our site ID then we added our social account providers then we went all the way down here and we added these three Fields so our Authentication backends and our login and logout redirect urls once we did that we went to URLs we added our URL routes so the roots for our app as well as the roots for all auth once we did that we went to users we created a urls.pi file where we added the URLs for our main routes for our home page and for logout we then created these URLs then we went to our templates folder that we created and we created this home template from there what we did was we created a super user we then went to the admin page signed in as that super user created a new site and then we Associated that site with our Google sign-in information which we got from going to the Google Cloud console and creating a new set of credentials as well as filling in our oauth consent screen all right so hopefully that was a good summary I hope this helped you get started with signing in with Google with Django if you like this video make sure to leave a like subscribe to the channel and I look forward to seeing you in another one [Music] foreign [Music]

Channel: Akamai DevRel

Views: 41,640

Keywords: akamai, akamai developer, tech with tim, google, django, google sign in, django tutorial

Id: yO6PP0vEOMc

Length: 30min 13sec (1813 seconds)

Published: Mon Dec 12 2022