Implement google sign in angular | Login in with google in angular | Google authentication angular
HTML-код
- Опубликовано: 29 май 2023
- Implement google sign in angular | Login in with google in angular | Google authentication angular
Source Code-
github.com/dnyaneshwargiri/an...
Google developer console-
console.cloud.google.com/gett...
Integrating Google Sign-In into your web app-
developers.google.com/identit...
Angular Reactive From-
angular.io/guide/reactive-forms
Related Videos:
1) Template Driven Forms vs Reactive Forms in Angular
• Template Driven Forms ...
2) How To Install Angular on Windows
• How to Install Angular...
3) Angular folder structure | angular architecture
• Angular Folder Structu...
4) Angular components explained | what is angular component
• Angular Components Exp...
Topic Covered In This Video:
angular google login,
sign in with google,
login with google,
sign in with google form,
login with google in angular,
google authentications,
google authenticator,
sign up with google form,
sign up with google in angular,
sign in with google in express,
login with google in javascript,
login with google in nodejs,
sign in with google in nodejs,
nodejs google api,
express js google sigin in api,
login with google in express,
angular reactive forms tutorial,
login page in angular,
login form in angular
#angular #googleapi #webdevelopment #googleconsole #angularforbeginners #expressjs #google #brogrammers #angulartutorial #javascript #nodejs 
Наука
You can watch part-2 ruclips.net/video/chREkmVEOMI/видео.html for getting logged in user details from google in response and perform sign out.
,, ,,,w,,,,,, ww,,,w,,,,,,,,,,,,w,,ww,,,,,,w,w,,,,w,,,,,w,, ,,,,,,,,,,,,, ,,,,,w,w,w,,x,,,,!? ? ? ? ?????w?????????????? ? ? ? ? ???????????
you are the king, thanks for saving me a lot of time! Nice tutorial brother
Thank you for watching 💜
Thank you! It is great!😀
Thanks for watching :)
Thank you so much❤
Welcome bro ❤️
Perfect
Glad you liked it 🙂
Superb job sir❤❤❤
Thanks a lot 😊
In my project i have several components, My sign in button only showed itself in index.html. On other pages like Authorization.html in Authorization component does work and shown as 0 width 0 height. Maybe you can help me how to implement styles from script or why it now render fully on page?
Styles for signin button are provided by google itself that you can surely configure upto some extent or you can write your own css to fully customise it in your application as you want using proper button selector in CSS and overriding CSS rules.
Hi, what happen if u reload the page after logged in? Because, in my case shows modal of login in again.. thx!!
Yeah that could be true, I did not implemented a full state management here in this example rather purpose was to show how to integrate google sign in in angular. You need to implement state management in your routes so that angular knows when to redirect to which page. E.g. if user logged in goto dashboard, if logged out goto login screen.
hey dude, thanks for the video. everything is happening good but it's about the data-login_uri parameter of the sign-in button. You use your API url, which redirects to your Angular url (4200/dashboard). Thing is I don't wan't to handle my user datas directly with this button, and when I just put localhost:4200/dashboard in this parameter instead of the API url (so then I can just use my Angular service I already have to send the datas to my backend), it does not work, like it can't find the /dashboard path once I am logged (it works before logging). Can you by any chance help me with that? thanks :)
That is very correct scenario you mentioned. If data-login_uri is used controls goes back to backend/ web service. But since in your case you don't wish to do it then you can use something called callback event & keep control at Angular side itself, same I demonstrated in next video if you are interested you can give a try- ruclips.net/video/chREkmVEOMI/видео.html
@@brogrammers also are we limited in term of number of connexions with this button? I was working on my project and the button just disappears from my dom, in any of my git branches, but I can't find any log about this on the google platform :/
@@brogrammers and thanks for the repply !
Cross-Origin-Opener-Policy policy would block the window.closed call. getting this error
Mostly it throws this type of error if there is misconfiguration in allowed origin in domain on your google developer console
my login btn not showed, i'm using angular 17 with ant design + tailwind@@ pls helpme!!!
im having the same issue with angular 17. did you happen to find a solution?
Please create issue on GitHub repo. It is almost impossible for me to solve any issue in RUclips chat.
thx man, plz create a full webapp using angular
Thanks 👍 sure, happy to do that. What kind of wepapp you'll be interested in?
Hi, iam trying to do its not showing any thing after running. Iam not getting the google sign in
let me check & get back 👍
Can you please create issue over GitHub repo in that way I can fix it quickly. GitHub repo link is in Description & everyone has permission to create issue on repo.
i followed the steps but when i paste the HTML in the HTML of the angular component, it doesn't show anything there at all. I inspected, the code i added is there, but google button is not visible.
I've also given my working source code in description, you can check it if you missed something.
@@DeepakPandey-ls3qx To resolve this issue i rendered the gis script when the angular component is mounted or something like that. Then it worked for me.
@@zh1094 i have same problem could you please explain berifly
I have successfully login with Gmail account now where can I seen which account has been logged in on Google cloud console ?
You don't get to see which account logged in on cloud console. It is pointless for console to store this information. It is not possible.
@@brogrammers got it bro 👍
I have downloded your code all things are work well but after click on google login it opening a third window in blank
As I get time- Let me go through the code & rectify it to accommodate any new changes in google lib happened.
Can you please create a issue over GitHub repo tagging me in in that way it becomes convenient for me to actually fix issue than writing here in RUclips comments. Hope you understand, thank you 🙂
Hi bro, any video for data-callback
Hello, can you please elaborate exactly what data callback you are looking?
I watched ur other video sign in with Google and I solved my problem. Thank you 👍 bro
perfect! 🙂
Thanks, bro, How to get user info like first name, last name, email, token ...
I need the same info.
It is easy once you set-up this, making a separate video on it. You can refer documentation link in description if you like to try on your own.
please watch ruclips.net/video/chREkmVEOMI/видео.html for getting logged in user details from google in response
please watch ruclips.net/video/chREkmVEOMI/видео.html for getting logged in user details from google in response
please watch ruclips.net/video/chREkmVEOMI/видео.html for getting user details from google as response
why body empty?
You need to provide permission from dev console which manages what all details one get in response like profile image, name and few other.
@@brogrammers can you please provide me a link where i need to add?
@@vakilsingh5086
There is something called scope of token where you would found it in console's, you can check documentation for exact path.
By the way....you can try below code at client side which does same thing.
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
Reference- developers.google.com/identity/sign-in/web/sign-in
@@brogrammers I followed all the given steps and also given the steps. Still empty body. The user details should come through the resuest of the POST call on server side right? Any sample request payload?
@@OnYourRankML yea I want to know the same I am not getting any user information from the req