google sign in page This is a topic that many people are looking for. cfcambodge.org is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, cfcambodge.org would like to introduce to you This ad is based on:. Following along are instructions in the video below:
Gotten stuck in a rabbit hole figuring out how to add “Log In with Google” to your web app? In this series, I’ll show you how to get started with a hello world example
For an easy way to add the google sign in button to your web app. App. Maybe all you want to do is show the user their profile picture in 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 indexhtml.
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 indexhtml 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 developersgooglecom.
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 indexhtml 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 8000. 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 .
Thank you for watching all the articles on the topic This ad is based on:. All shares of cfcambodge.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
