Javascript OAuth2 Google Login & Logout Example Using Access Token in Browser

uh Hello friends today in this tutorial I will be talking about the or2 Google login using JavaScript this will be a very simple application so you can see this is the login button out there sign in with Google and as soon as I click this button guys what will happen here basically it will ask for my permissions you need to select your account here basically I am just you just need to go to Advanced option here and basically go to our project and allow the permission here so basically the first permission we are getting is the personal email profile email profile picture so it is automatically selected and the second permission is view your YouTube account so this is a second permission and click on continue and as soon as you click it you will see it will welcome to profile page it will redirect you to the video full name is coding section this is my account here and this is a profile picture so basically if you open this image it is hosted here you can see that so you can get accordingly to to your own account it will tell you your full name and show you this profile picture and also we will have a simple log out button guys also so as soon as you click the logout button you will be redirected to the home page so let me select log out here so once again you are redirected to the home page and now the nice thing about that basically as I click the logout button all the access token is revoked now we once again need to Grant the permission once again so if you click the sign in button again you need to go to the process once again go to the advanced option so this is actual logout you need to Grant the permission once again like this so let's suppose you close close out this window here without clicking the logout button and now if you open this window once again what will happen it will give you this once again you can see that and let me press logout button here and now if you try to access that you can see your full name is undefined because we have revoked the access token the access token is no longer available inside the browser so we can't access the information so once you press the logout button you need to explicitly go to the home page you need to Grant the permission just click this button you need to grab the permission and basically you need to select your account you need to basically Grant the permission here click the button scope these are called as Scopes inside or to and if I just inspect element guys you will see this is my access token this is the object which is returning here which is local name picture all that stuff so as you all know inside or to flow we have access token we have refresh token so all these things are very much imported when you are studying this so we will be looking at a very simple example on how to get the access token from the authorization code so all this we will be coming covering it into your JavaScript we will not be using any sort of third-party library of Google and will be complete in JavaScript and we are using some or2 playground guys to getting all the Scopes of all the apis you can see that it's very much useful developers.google.com what playground so it's a great tool provided by Google to debug any sort of API code so for this tutorial guys if you want the full source code I have given the source code in the description of this video so this is my step-by-step blog post where I have written the source code in detail so if you want the full source code and also you need to read the blog post also alongside watching this video I will highly recommend that you go to the description of this video to get all the source code now let's get started guys by building this application so what I will do is that I will delete all this code you can see a series of three files are needed for this application let me delete all this and start from scratch so now guys the very first why we will make is the index.html file here basically this will actually contain our sign in with Google button so we will write here or2 sign in Google sign in like this with logout so basically guys here we will be having a simple heading here or2 Google sign in and after that guys we will have a simple button here so we will simply say sign in with Google and basically we can attach a on click event handler so whenever you click this button we will execute the sign in method here like this and also we need to include our Javascript file guys so script Source script.js that's it so now we need to make this JavaScript file guys which is script.js in the root directory so just make it so we need to write this function which is sine n so here guys we need to get the information from the Google developer console so whenever you are building this application first of all we will basically write the end point on which we will be invoking this the user to so basically this is called as or2 endpoint so this is the actual endpoint guys basically this is equal to https account start google.com o slash or2 and slash version two slash auth so here we just need to make a simple fetch API get request and here we need to pass our client ID redirect URI Scopes as well so this is the actual or2 endpoint and for this you need to create a form here guys automatic element we will submit this form automatically so document.createelement we will use this method and basically we can create a dynamic form here and we need to basically set the attribute of this form set attribute and basically the method of this form will be get so as you can see there are two ways of submitting the form either post or get so we are making a get request here and basically now the second attribute we need to set is the action attribute as you all know inside form we have the actual attribute as well so here we just need to submit to or to endpoint that we have configured right here you can see that we are setting the action attribute to this nice and after this guys we need to add the parameters to pass to or2 endpoint so now we need to add the parameters so for that we will be creating this object params and this will be an object guys and it will contain this client ID client underscore ID and here you need to paste your client ID which you will get from the Google developer console and then you redirect URI redirect URI is nothing but whenever the sign in process is complete whenever you have granted the information Scopes so which redirect URI Google must point to so we need to provide this redirect URI and then the third option will be response type guys so this can be either three values guys either you can just access the authorization code you can just send the request for Access token so this value can be token or code but in this case we required access token so here we will provide the token and then guys we need to provide the scope as well so scope is nothing but which Scopes you want to get information so there are various Scopes out there for different Google apis so first of all we will need the simple scope for the user information user profile profile picture and email so this will be coming from http's Google apis.com user info Dash profile and also if you want to provide multiple Scopes out there you can put a space here and then you can go to or2 playground and it has specific scopes for various apis YouTube data API version 3. so let's suppose you also only read the read on the scope of this API so here you will copy the scope and simply paste it simply paste it so we have provided two Scopes you can provide as many Scopes as you want depending upon your application and then guys you need to provide a property which is include granted Scopes this property needs to be true just to provide true a Boolean parameter so inside single parameter single quotes and the last but not least we have the state this is not mandatory but you can pass this value like pass through value any value you can pass it accordingly so this is your object so now we need to get the client ID and the redirect URI from the Google developer console so for that you need to have a Google account here go to their Google Cloud console and basically you need to create the credentials here click on this option or to client ID and this will be a web application that we are creating here so that's why authorized JavaScript Origins so what is meant by this so basically it's the home page of your application so let me open this home page or start this open with live server so if you're developing it for localhost as in this case you can see 127 550 index.html so what is your localhost or website address so in this case my address is localhost alongside with the port number you don't need to write index.html you just need the uh regular path name so we will go to it and simply add URI and simply paste it so you can see that don't write this trailing slash here simply outside this that's it this is your JavaScript or regions and now the redirect URI redirect URI is the URI to which you will redirect the user after authentication so we will create a file called as profile dot HTML so here we will be showing the profile of the user so we will simply say profile of user and when they are authenticated they will be redirected to this page here and here we can say welcome to profile page and basically the address of this page let me open this you will see this is a full address you need to copy the full address so wherever you are redirecting the user simply paste it here add URI and simply paste it that's it and now click on create option so basically if you create it you will get your client ID and the client secret so this will be different for you so don't copy my information so I will delete this client ID after this video so you will no longer use it simply paste it this client ID and basically this is your redirect URI so in this case my retract URI is simply that we have submitted here this is the redirect URI simply paste it here so that's it so this is the information guys correct information I have shown you step by step how to get the client ID and the reader qri so please make sure that you have followed that after this guys now we can simply submit this form programmatically so that in the background so where p in param so we will use a simple for Loop so for every parameter inside this object we will simply create a input element here so document dot create element input for every property inside this object before we will have a input element so input dot set attribute this will be not be shown on the browser so this will be hidden so input type hidden and we can also set the name attribute name is equal to the actual parameter so for the first case this will be client ID then redirect URI response type scope include printed Scopes and State after this we will set the attribute of value so what value that we need to provide so this is equal to the params so this is key value pair so params the indexes for the first iteration will be 0 then 1 2 3 4 like this and then we need to Simply append this to the form so we will use the append child method guys and we will append this input element so this will every time iterate for all the object first of all it will do for the client ID it will add to the form then it will go to the redact URI like this so after this guys to programmatically submit the form we'll call this submit method on the form form dot submit so it will automatically submit the form for us and first of all we need to add the form to the Dom elements so document Dot document.body Dot append child and we will add this form element and then we will click the submit button programmatically so now it will happen guys if I open this index.html file in the browser let me see here let me zoom in here so that you can clearly see click on this button so you will see it is automatically uh you can see that if I select this account here you will see Google hasn't verified this app so you can simply go to the advanced option and click on this and now you just need to you can see project wants to access your Google account so this is already checked here you need to check this option if you want to Grant this permission click on continue and basically you will see welcome to profile page and this is the nice thing guys you can see the access token here in the browser URL itself so we need to capture this access token we need to store it inside our local storage or you can store it inside mySQL database or any sort of database you are using so this is the hash value the state value that we passed here pass through value and this is the access token in the URL itself and also we need to build a mechanism so that we can hide this and basically we can remove all these URL parameters in the browser so that in the practical application we don't need to show the user this information this is very important information they can make wrong use of it so for doing this inside your profile.html we need to write some JavaScript code here so right here first of all we will capture this information this access token and then we will hide this so here basically inside our Dom here we will simply have a H2 element and here we will simply say your full name is and here then we will be dynamically putting this and then we will have a image tag here guys we will give an ID to it also that's it and then we will have a simple button of logout so when you click this button we will execute a function which is log out so just make this function function log out that's it so now guys first of all what we need to do is that we need to capture the information which we have received here inside access token in the URL parameters so we need to make a simple params object here params is a empty object so after this guys we need to uh we will be getting the access token from the URL parameters by using some kind of regular expression reh so I will copy paste this regular expression it is all all the source code is given in the description of this video so this is the regular expression you will see and then we will simply run a while loop guys m is equal to this is a variable index variable and this contains a execute method guys and here we will be accessing the location dot hvf so basically this simply corresponds to the URL itself so what is the URL so it will get access to that so inside this while loop we will get params and this will be decoded URI component and here we will pass the m one and we will equal to decoded URI component so this is some logic guys which is able to access that access token so if you don't understand it it is completely fine M2 M2 so that's it this is all that we need to write inside this while loop after this we will capture this access token inside the local storage we will write if condition here object dot keys and here we will simply say params and we will check the length if the length is greater than 0 then be for perfectly know that some keys are there we need to store that inside our local storage so local store is set item we need to set the item we can call this as auth info and basically we can convert this to the Json dot stringify we will convert the Json to a string and we will pass the params here so basically this is an empty object that we configured here you will see that so the access token all that data access token expiry date all that information which is coming from the Google server will be stored inside this local storage variable which is auth info that's it and after this guys we if you see here basically what I'm talking about uh and also if we need to hide this information we need to hide the access token so for hiding date we will be using this method window.history dot push State and basically here we need to pass in the first argument is empty object and then we need to say document.title we need to replace to it and put a slash and then the URL to replace here so profile.html that's it so no longer your access token and all those so important information will be shown it will be replaced by this so no page refresh will be there this will be without page refresh now to print out our access toker we will get the info here and we will first of all parse it using json.parse and inside this we will pass our local storage dot this time we'll get the item from the local storage so you will say get item and here we will get the item using the key provided which is auth info you can see at the time of setting we have provided this key here we need to provide the same key when we are getting the things from the local storage and now we can console log this which is info access token like this and we can even say here info expired expires in so these are two properties present inside that object so you can even print out the whole thing here as well you can even just print out the whole thing here and now let me just refresh it and start from scratch so click this option guys so what will happen here it will ask for the permission if you go to inspect element go to console you will see that this is your oh object is returned to us this is your access token with this help of access token you can access any Google API YouTube API Drive API Google spreadsheet API any sort of API expires in it it only expires in the one hour which is this is value in seconds 3600 seconds so after one hour it will automatically get expired in the next video I will show you how basically you can refresh this access token using a refresh token this is the second video and this is your pass through value this is your Scopes that you have provided and this is token type is Bearer this is option and basically this is we have extracted the access token and this is expiry date and no longer you will see these information is not no longer showing here so now basically guys we just need to show the profile full name and the profile picture so after this we will simply make a simple get request using fetch API so after we get all this information so you'll say fetch and as soon as page loads we will make this fetch request Google apis.com slash or2 slash version three slash user info so basically this is the URL guys which will get access to our profile picture and the email address and as you all know inside Forge fetch you need to provide the headers as well so we need to provide a headers in this case also so headers is will be simply authorization header so authorization and here we will pass the bearer so b e a r e r so the token space followed by the token so this is template string you will see we are passing dynamic so here we just need to pass our access token access underscore token like this so now guys it will return basically a promise we can handle this by dot then and this will contain our data first of all we need to convert this data to Json and then again our date this will be returning the info information and we can concern of the info object like this and now inside this info object guys you will see we have our full name and image let me give it a ID to it of name so we need can we we can just simply Target it by the ID that we have given so document.getelement by ID name so inner HTML we can Pro manipulate the inner HTML so plus is equal to info dot name that's it and then we will show the image as well image we will set the attribute called as the source attribute and this will be equal to info dot picture so even see that and now if you refresh it guys what will happen now if I now refresh it click on this you will see your full name is coding section you will see but the picture hasn't been shown let me see so let me see why the pitch oh sorry this function expects sorry inside script.js as you would see guys this is a function Nordic property so source the second argument we need to pass here info dot picture that's it so again if you refresh it click on this you will see the picture is also displaying here guys your full name coding section then we have a simple logout button and you will see inspect element if you go to console here we receive an object here which provides these properties given name name name picture local you can see that you can even do it for different accounts as well let me take this account for example click on this option so your full name is you can see this is a profile picture of the account so now guys we need to click the logout Button as I click the logout button we need to remove the access token we need to revoke it so that the user can't use it so for doing this guys you will write this logout function and uh we have defined this logout function here let me see let me search for it log out yeah this is a function guys you can see that so now we need to write this function so when we press the logout button basically when we we again need to make a simple fetch request this time this will be a post request and the URL just note down this URL it's very important this is https over to Google apis dot com and slash revoke r-e-v-o-k-e question mark and here you need to provide your token token is equal to and then we will concatenate our token which is info Dot access token access underscore tokens so we just need to remove this token from our account put X comma and the second argument is the method this time the method will be post and also we need to provide the headers as well guys so the headers are will be like this we will be providing again this header which is this time the header will be different which will be content type content type and this time this will be application slash X www form x dash form URL encoded this is a header you need to pass here that's it so basically guys this will return a promise this will have the data as well so we can redirect the user back to the home page so we can simply say here location Dot hdf and here we can simply reduct the user http localhost 5500 index.html that's it that's all in this code guys you will see we are simply making a post request to the crl revoke token and we are providing our access toker and this will be a post request and we are providing this header that's it so once you load this page guys if you now press the logout button you will be you will see as we click log out you will be redirected to the home page so once again if you click it you need to Grant the permissions once again the process needs to go by itself here this is really important we need to also log out users as well so whenever the user wants to log out they can press this button and we cannot no longer we can go to this page and access information so this is really frequency undefined coming here so this is a tutorial guys over to JavaScript Google login and logout using access token so all the source code is given in the description of this video if you want any doubt here you can write comment on this video and please hit that like button as well and I will be seeing you in the next video Until then thank you very much

Channel: Coding Shiksha

Views: 29,100

Keywords: google login, oauth2 login, oauth2 google login javascript

Id: bOd4eFqIg00

Length: 28min 46sec (1726 seconds)

Published: Tue Nov 29 2022