Generating HTML Code

[00:00:00]
>> With Apple is similar a little bit more complicated apart from paying the annual amount, okay, so we are done with this part so we are done with the console for now. Now going back to the setup, so there is no link, okay? So if you scroll down, there is a section here that says code generator, okay?

[00:00:28]
In code generator, what you have is some kind of a visual tool to create the sign-in buttons automatically. The only requirement before actually pasting this code is if I go back again to the top in the setup, or in fact after the setup, is to load the client library here.

[00:00:56]
So that is just copy and pasting this in my HTML. By the way, you already have that here to copy and paste. Okay, from the companion website. And you will see this script body in a second. In fact, I can just copy it right now. So I am going to copy and paste this in my HTML.

[00:01:23]
Okay, by the way, brace yourself for having a lot of messages in the console right now, mostly when you are in localhost. So when you are in localhost, some things, some security policies when this library is trying to bring data from Google, it doesn't work. So you will start seeing errors in the console, okay?

[00:01:44]
And that's Google, it's on Google, okay? And it's because it's localhost. But anyway, it will work, just pray for that. So now, now that I have the client, let's go back to our generator here. So I'm going to look again To the code generator. So I need to paste here my Google client ID.

[00:02:09]
Where is the Google client ID in the credential sections? You can always copy the ID from here. Okay, so I will paste it here, and it says, okay, what's the context or what do you wanna show to the user, sign in, sign up, or just use? You pick, it's about the wording.

[00:02:30]
At the end, it's just the same, okay? Then, what's the URL for your login? And if you have a single page application, we are not going to provide a URL, we are going to swap to a JavaScript callback. So I need to provide a global function that I will have in my window global object that will be executed by Google after a successful login.

[00:02:57]
Make sense? And for that, that's why I have this function that I call that login from Google that receives the data. And it's sending that data to our Auth object to a function that we need to create, okay? But for now, I'm going to use this name login from Google, the global function.

[00:03:20]
So coming back here, that's the name of my function. Okay, next and here I need to enable one of these two options, I can enable both. One tab or sign in with Google, Sign in with Google is like the, let's say the simplest one. It's the one that has the icon sign in with Google, you can customize the theme.

[00:03:48]
They're not like infinite themes, but yeah, the blue one, okay. You can change the text a little bit, continue with Google or sign in with a Google name. Then the height, if you want it to be small, and kind of that's all, okay? You can define here what kind of icon do you prefer?

[00:04:14]
Also the theme of the icon. But I mean, you cannot do wherever you want, and by the way, you can see how it looks like on light themes and dark themes as well, how it would look like, okay? So that's like okay, and also you can prefer redirect or a popup because we are a single page application.

[00:04:32]
We prefer in a pop-up, so it's not really making any redirects. It will take the language from user's computer, but if you wanna force English, you can do it from here. If not, it's kind of weird that, I mean, if you have a browser in Portuguese, it will appear.

[00:04:51]
I mean, maybe your whole website is in English and that part is in Portuguese. So it feels weird. So some authors or some content creator for just speaking English and that's all, so it doesn't feel like why is this part of my websites in a different language. And one tab is the one that is more aggressive, turning on or not.

[00:05:16]
Man is more aggressive because he's the one that will actually pop up and leave over your content, suggesting aggressively to the user to sign in with one tap to this website. This is the one that will show your face on other people's websites, or it was doing that until today.

[00:05:38]
And also, you can enable auto-select credential, okay, and even on some browsers, ITP browsers here, you can get what that means. This is a native dialogue. I mean, if you are in Chrome on Android, instead of seeing a div, it can pop up a native dialog from Chrome with your image saying, do you wanna sign in, in this website automatically?

[00:06:04]
And you can disable that if you don't want that. Let's be the more aggressive that I can, okay? So I will say everything, yes. Get cold, and I just need to copy and paste this into my HTML somewhere. Okay, so I will copy this, go back to my HTML.

[00:06:25]
And let's, I think I will do that in the login. I can also do that in the register, but yeah, after registering an account instead, after that, I could open a new fieldset for this. I'm going to paste these dips. Yeah, I don't like them to be dips, but anyway.

[00:06:52]
It is what it is. So by the way, all the properties that I have should define are there in data custom properties so you can change them from here. So now, I'm saving this, my client ID, you can see it's public so it's there, that's my public ID, but maybe you're thinking, hey, what happens if someone else is getting my public ID and publishing this in their own websites?

[00:07:20]
Well, remember that from the backend of Google, we need to enable origins. So Google will not let other origins to use my client ID. Make sense? So now if I go back to my website, let's do one more thing before testing this. Remember the global function that I have?

[00:07:45]
My global function is calling login from Google on the Auth object. That doesn't exist right now. So let's create that one. Login from Google. And for now let's say, it receives data, and it just sending that data to the console so we can see what we received from Google before connecting this with our backend, okay?

[00:08:17]
So refreshing. Well, look at this. Remember, I already said be careful because you will start seeing a lot of error messages. These error messages are coming from Google. And it's okay. Look at this. And you see that at the bottom. In fact, let me remove this. Let's put it there.

[00:08:44]
So that dialogue, continue as Maximiliano, that's the aggressive website. So that's my face, my Gmail account, okay, continue as Maximiliano with my name, in a website that this is the first time I'm visiting, at least from this account. It's aggressive, okay? This UI will probably disappear. It will be less aggressive in the next years, okay?

[00:09:13]
But for now, it's there. If I say, okay, I wanna continue as Maximiliano, actually, it says, okay, I need to confirm that I wanna sign in to Coffee Masters as Maximiliano. Okay, confirmed. Verifying. Okay, cool. Everything you saw there are just dibs on my dome that wasn't the native experience, in fact it will happen also in Safari, because it said or everything happens in HTML, okay?

[00:09:42]
So if I inspect now and go to my console despite all the error messages, okay? There is an object. And in this object, okay, I have a client ID, that's my public client ID. And I have something that says credential, okay? And yeah, I have my credential here.

[00:10:02]
And probably you're thinking, okay, what's that, okay? Well, that's a JWT. Is the JSON Web Token, okay? And yeah, it feels like nothing appears as useful from there, but there are some websites such as jwt.io where you can actually quickly debug this. So I can paste this, and I can see what's inside.

[00:10:35]
And this is actually a JSON with data that was encoded as a string, as what, as one string. So here you can see my given name, a family name. Okay, my picture. So this is a link to the JPEG of my face in case you wanna download that and save that in your database.

[00:10:53]
Okay, and also you will find there my email and my AUID. My audience ID. Actually, this is kind of my ID within Google. So I should save this server side, that means that's me so next time, if I login with Google again, that will be my idea. By the way, that ID changes per client to avoid fingerprinting, okay, so tomorrow if I log in another website, they will get a different one.

[00:11:30]
So it's not representing me. So that is me on this website.