Adding Google Sign In to your webapp Getting Started

looking for an easy way to add the Google sign-in button to your web app maybe all you want to do is show the user their profile picture in this video I'm going to show you step by step as I add in the Google sign-in button to my web app and show you my avatar and my email address on a web page I get out welcome to my series I'm Danny I'm a senior full-stack engineer working at an EdTech company and I help JavaScript developers ship awesome apps on AWS I recently had a project where I had to create a web portal for internal users this was only gonna have some static content on it so it didn't have a back-end everything was just gonna be loaded up right on the web page we did have some stuff on the back end and there we did one I guarantee that the users requesting those things from the backend were in fact our own internal users so we didn't want to create an entire back-end just to be able to handle this one simple use case we just wanted to personalize the web page a little bit and be able to authenticate the user by email address on the back end so what's with the Google sign-in button Google sign-in has a thing called sign-in for web sites which is a button you can slap on your page that when user clicks it they wind up logging in as far as your page is concerned the button changes it goes from sign-in with Google to find in and from that point forward you have access to the simple things like the users email address the their avatar which is a URL which you can then load on your page so I'm gonna be following along with my with my post you can find it here at intricate cloud IO I've got and some extra details in there like when you'd want to use it first when you wouldn't want to use it but for the purpose of this I'm just going to jump right to the code so if you want to see it in text be sure to check out this post if not you can follow along with this video what we're going to be covering is this thing called Google sign-in for websites it is a way of adding in this sign-in with Google button it's already branded you don't have to do any extra CSS or styling to your webpage all you do is add in a div element and then everything else just kind of falls right into place so I'm going to I'm going to build this step by step I'm gonna jump over to vs code and actually I'm here in my workspace I'm going to create a new directory called demo inside of here I'm going to create an index dot HTML page so I'm gonna do open index.html which is going to load this HTML file right in my browser easy so far so let me open that up in vs code so I'm going to do code dot which will open up vs code in my current directory and the index.html done here I'm just going to throw in some boilerplate when I thrown the head element with a title tag in there or my Google auth demo and then I'm gonna have a body and in there I'm going to put in each one Danny I've done a page oh so I'm gonna jump over here so that it works got my demo page set up so the next thing is you actually have to sign up with with Google in order to obviously be able to add in the sign in with Google button so we can head on over to the Google developer console so that's console dot developers.google.com and I'm going to sign in as any intricate cloud that I owe or you can find the rest of my I'm on this page and it currently says no organization here I was expecting to see the project show up here but if as if I clicked it like from an organization oh it must have created it under my domain name and here it is xenon container and Google Earth demo project so I don't have any api's available to use yet that's not what I'm gonna enable right now I don't actually don't have to enable anything because what we're actually going to use it for is the bare minimum so we are going to request to create some credentials in order to be able to access that API we're going to do all client ID so that our app can access the users data in this case is going to be a link to their profile picture their name and their email address so I'm going to first set a product name on this consent screen because that's what it's telling me I have to do so I'm gonna I think that takes a little bit bigger and this is my of' consent screen so this is a pop-up that's actually going to show up on the page once the user click sign in so you can put your own logo there and the name of your Google API project so I'm gonna call this one little demo Google project I'm not kind of adding an application logo oops I'm going to get their email and their profile that's it I'm not going to enable anything else here on this page cool so now I am back at create Roth client ID so in order for us to call the Google API is we're gonna have to create a client ID in order to generate an access token we're not going to need all that yet but we are going to create credentials that are of web application type so this is my Google off demo web application in the Google developer console I'm going to leave these fields blank so that you can see what happens when when you leave them out or if they're misconfigured which tends to happen kind of often so I created it and here it says here's your client ID you can copy this really long string who your your HTML page so there's also a client secret here but we're actually not going to use it for anything all we really need is the client ID and I'm going to deactivate these credentials anyway right after the video is over so don't get all tweaked so I'm going to copy that client ID and oh so back at our HTML page I need a way to tell the Google script to interact with the Google OAuth project that I just finished creating so for that they provided this facility that you can use behind a meta tag that lives inside of your head element and if you name it so this is just pull straight off there Docs Google sign-in client underscore ID this underscore is very important intent equals that and this will be your client ID so this will look a little this part of the URL will look a little bit different once you actually generate yours so now that we've added in our client ID to the HTML page we can go ahead and add the script so the script we can pull right from Google's own website API is that Google comm slash JavaScript platform KS async the fur which will make sure that the script loads asynchronously and the last piece is to actually add in the button so I have a div the way that their script works is it will comb through your HTML page and look for any element that has the CSS class on it G - sign in - and it will dynamically inject some JavaScript into the page in order to handle the whole the whole workflow and you don't really have to style anything on your own so if I jump over to the browser now I am here I was expecting something on the page oh maybe not so let me make this bigger so they yeah okay so I have an uncaught exception he invalid cookie policy oh right I'm still loading this from a rum as an index file so the way that the Google sign-in button works is it can detect whether you're signed in or not it sets a cookie with your information in it so it won't work if I'm serving it as a file I need to be able to serve it yeah like local or something like localhost index.html so I'm gonna do that and I'm going to use this tool called um icon - em simple HTTP server it is very nice for making a very simple web server that will just serve up all the contents in your current directory so if I just do this by default it will create a server that runs on port 8000 and I'm gonna go to localhost 8080 and I still see my content here there's a few other errors in here though so let's check those out not a valid origin for the client HTTP local state doesn't has that been white listed for client ID pool remember I said I was not going to be I was not going to be filling out those things that and you do have to fill out in order for this to work we are going to jump back to our Google developer console we're going to go to cool off demo project and check out our web application so this is where you have to add an authorized JavaScript origin basically what it ought JavaScript origin is you're telling Google then you know for a fact that only these URLs are supposed to be interacting with this specific client ID so in our case I'm only expecting my users to use localhost 8080 and it says I was client saved I'm going to jump back over here and it says not about you know this is supposed to work I did add it here right HTTP localhost $8,000 yeah you Oh something with some big cash so I did empty cash and hard reload so now that air didn't come up but this one stayed I think this one I can ignore um oh also make that bigger I'm gonna do sign-in so this is the name that we provided all the way over here Oh auth consent screen that's your application name that's what's going to show up in this little pop up here so I'm going to sign in with my Danny and intricate cloud piyo and ro3 as if I sign it so when i refresh the page I get I can see that the button says signed in for a quick second and then it says signed in because it already knows that I'm signed in but I didn't really have to code anything else so all of that is provided just by adding in this G - sign in - to your page that's actually pretty neat the fact that you can do that much stuff in there for the most simplest of web cases this is this is all you want but we're going to explore a little bit more of what else you can do with it because the most important piece is actually being able to see the users information and dynamically add it into the page so in order to be able to identify the user you're going to have to add in a this data onsuccess attribute which is a way of telling the Google script you all a function which I'm going to call on sign-in to call this function on the page and it will then give me the users information so if I go here and I create an inline script and I'm going to create a function called on sign-in they are going to pass me the Google users information I'm going to do the console dialogue user is Google user that get basic or file um and let's make it nice or at least see what's actually there Arkana okay fresh after argument list too many oh okay where am I currently at so far I've got the signed-in button showing up on my page so you can see that now after I've signed in the button says signed in and I haven't had to do anything else in order to get it to do that it'll do that automatically so here we have a JSON string containing a bunch of fields I don't think these fields mean much but hey my informations in here here is my email that I can get via the u3 property or Danny you know if you can get through the obviously the OFA property there are easier ways of getting to that information so I'm going to show you right now because we're gonna do something more interesting other than console logging your user information because it's clearly that's not useful to anybody well so I'm gonna take the information that we have from the user and we're just gonna throw it somewhere on the page so I'm going to create a div element here and then this element is what I'm gonna use to I'm gonna add some stuff to it with some of the users information that I get so I think one easy way I have of doing this is document query selector to get a reference to the content element that we just defined right here and then I'm gonna set that text in there to little user dot get basic profile and there's some methods here that you can use like get name or a given name but in order to find out what those methods actually are you go to the Google sign-in for websites here there's a tab here called reference in this reference you can see all the different methods that are available to you and the Google user that we get is an instance of Google user get basic profile which says we can call the following methods on that object so I'm gonna pull out the I'm gonna pull out get given name and I'm gonna put the image URL dynamically into the page once I've signed it so here it looks like I'm doing that I'm gonna oh and her text was getting basically given name and so if i refresh the page here i'm gonna see just my name well um my given name is Danny what does get name by all i for me my guess my given name would just be my first name well that just shows Danny crest alright so now let me keep my um let me get my picture in here for shits and giggles document you know what I'm gonna this element yes [Music] yeah and then ooh element I create a new element with my image I don't have any jQuery on the page so I'm just using the raw document dot create element or put this together I'm going to create an image element and then on image I'm going to set an attribute called source and then do a Google user dot yeah what is it it image URL I think that one works get image URL get image URL and then I'm going to and that to the content element oh that should give me something Google user kit image URL is not a function Google user have to do it on get basic profile so you know what I'm going to I like those two references to get basic profile I'll call that profile what I'm a colloid profile and then I'm going to our profile I can use airport you all right pom pom pom my name and in a highly pixelated format my one initial for my first thing so cool we have now added the Google sign-in button to the page I've gotten my name to show up as well as in image as well as my avatar to show up well the last part for this tutorial is being able to sign out so that you can go ahead and click sign in again and so you can see the whole process from start to finish and also you probably want to add the ability for your users to sign out of your page anyway so we're gonna add in a sign up button now to do that we're going to have to create another button and we're going to attach an onclick handler to it that's just on the page I'm gonna call that one side now it gets a sign up so I'll go back to here and I've added in the sign up button here at the bottom Oh so let me implement that one to do function and then we actually have to go about signing out is you have to use the Gabi library G API that off to get off instance and then from here I can call sign out it's got a method called sign out and that returns a promise which doesn't have any information so I'm gonna make this I'm so log a user sign out but I don't get anything back from it let's try that refresh the page and it sign out user signed out and the sign-in button change back but I still have my name my name here yeah that's because I have the content element still there if I do send out again nothing changes if I click sign-in and I'm present it oh I automatically sign-in I don't even get the chooser - to authenticate again it's assigned in I can do a sign down again and boom I've added in google logging so this here get off instance there's actually a lot of things that you can do with this API again you can see all of that stuff here on the Google sign-in for websites reference page you happy that also got that get off instance um you have a bunch of things like in the sign-in listener being able to touch a click handler if you want to style your own button there's a few different things that are there so that's actually going to be part of the next video which is doing a little bit more than just making a very ugly demo page that shows my avatar and my user name or in my next video i'm gonna show you a few more hacky things you can do with gapi that off to that get awk instance API we're gonna do things like show and hide content on the page based on whether you're logged in as well as seeing how you can detect when the user is logged in and be able to do different things on the page dynamically so we're gonna do that in the next video make sure to check it out

Channel: Danny Aslam-Perez

Views: 53,754

Keywords: webdev, javascript, google login api for website, google sign in, google sign-in, google login, login with google, web development

Id: KwOmVpd1DUA

Length: 22min 5sec (1325 seconds)

Published: Sun Aug 18 2019