How to make a google login system in 5 minutes
How to make a google login system in like 5 minutes...
You need:
- A google account
- A website not on localhost
- Patience
- Html, css, js knowledge
Step 1: Set everything up:
Go to this link: https://developers.google.com/identity/sign-in/web/sign-in and follow the instructions given according to what they say. Copy and paste all the links, but DO NOT WORRY ABOUT CONFIGURING A PROJECT YET
Include the following code first:
<script src="https://apis.google.com/js/platform.js" async defer></script>
To create a Google Sign-In button that uses the default settings, add a div element with the class g-signin2 to your sign-in page:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
After you have signed in a user with Google using the default scopes, you can access the user's Google ID, name, profile URL, and email address.
To retrieve profile information for a user, use the getBasicProfile()
method.
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. }
** You can enable users to sign out of your app without signing out of Google by adding a sign-out button or link to your site. To create a sign-out link, attach a function that calls the GoogleAuth.signOut()
method to the link's onclick
event.**
<a href="#" onclick="signOut();">Sign out</a> <script> function signOut() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { console.log('User signed out.'); }); } </script>
Step 2: configure a project
this can be confusing, as it is really. Go to: https://console.developers.google.com/ . Basically, you make a new project, and somewhere it will ask for api related stuff. Search for "Google+ Api" and enable it. Then create some credentials, with OAuth client. This will say you need to complete something else first, so do that but don't upload a picture for it, or google will have to verify it. Then, you can click credentials again, and do exactly above till you see another set of questions, where you answer them. Origin and redirect for this project are https://google-api-installation.rohilpatel.repl.co/ , since I didn't want my data to go to another page.
Step 3: finish it all
Replace the client Id with the meta tag they gave you earlier on (one of those html tags), and if you did everything that the first website did, you should be able to login...except that you won't see anything since you need to write to the DOM!!!
If you need the notes:
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
LEAVE A COMMENT BELOW IF YOU ARE EXPERIENCING TROUBLES. ALSO, THIS SITE WON'T WORK ON HTTP, ONLY HTTPS!
Do you need a credit card or just a Google cloud account to use Google oauth?
Just a normal account would work @SharpCodeDev
ooof I'm gonna have to tell my school someone hacked their chromebook...jk cool!
Lol. And this is completely secure since Google gives you the information. @techgeek680
ok good! @RohilPatel
Is your logo a leaf or killer queen black?
Let's just call it a leaf @AncientBison
This post helped me to for setting up google login in my application. Thanks
No problemo! @PavanBaddi
Thanks for this, it could really help me with my future projects.
Nice job mate, thanks for sharing this with us.
No problem man! Just as any questions if u want below. @edgyneer087x
thanks,this is a lifesaver, IL be sure to leave a shoutout in my website,Again thanks so much,
-CoolCoder
Hee hee lol. Do you have discord? I can help guide you more if you want! @CoolCoderz133
@RohilPatel Yeah WyattGowing#3060
Will do, thanks...idk why I'm seeing this now lol @CoolCoderz133
@RohilPatel yes im Mr.Wyatt#3622
Very good, thank you.
No problem! @mertocak
Why did you post this twice? https://repl.it/talk/share/How-to-make-a-simple-google-login-page/33626
This one so people learn how to do it, and the other one to share it.Since more people will see it there than here, although I'm sort of wrong. @theangryepicbanana
@RohilPatel Ah ok. Just thought I'd ask
Ok lol, ur not gonna take any of them down, are u? @theangryepicbanana
@RohilPatel No. After looking them over, they aren't repeated posts so they're both fine :)
ok thank you @theangryepicbanana
This is a wonderful and accurate representation of what proper programming looks like. I've taken a look at some of your work, and it's pretty good. Have you done anything in C++ yet? I'd like to figure out how to finish my FPS shooter game for my Ubisoft interview. Where can I learn how to do something extraordinary things with C++ back-end?
I don't know much about c++, and thanks for my work compliments! Can I get your discord? That might be a better place to talk. Thanks! @RayvelArjoon
@RohilPatel #6975
Friend me: RohilPatel#4864 @RayvelArjoon
@SilentShadowBla here you go!
Get on discord @SilentShadowBla
Mines says
script error.
Error 400: redirect_uri_mismatch
The Google+ API is enabled, and it still does not work!
I might make a tutorial that will explain all of this in greater detail @Squirrel777
@Squirrel777 It doesn't work in the replit itself. Open your website link in the browser. It worked for me that way because I had the same error.
@MayankSK44689 This is due to the new google crossover. Chromium is discontinuing the javascript library.