-
-
Save shyamgupta/d8ba035403e8165510585b805cf64ee6 to your computer and use it in GitHub Desktop.
| <!-- Google+ API was shutdown on 3/7/2019. New OAuthFlow (listed below) uses the updated Google sign-in. --> | |
| <!--You just need to update this in login.html page for Udacity's Full Stack nanodegree --> | |
| <!-- Below is the Google link I used for reference --> | |
| <!-- https://developers.google.com/identity/sign-in/web/server-side-flow --> | |
| **login.html Page** | |
| (1) Include the following in <head>..</head> tag: | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script> | |
| <script> | |
| function start() { | |
| gapi.load('auth2', function() { | |
| auth2 = gapi.auth2.init({ | |
| client_id: 'YOUR CLIENT ID HERE' | |
| }); | |
| }); | |
| } | |
| </script> | |
| (2) In the <body> tag, add the below button and div | |
| <button id="signinButton">Google Signin</button> | |
| <div id="result"></div> | |
| (3) Add the below script before the ending </body> tag | |
| <script> | |
| $('#signinButton').click(function() { | |
| function signInCallback(authResult){ | |
| if (authResult['code']){ | |
| $('#signinButton').attr('style', 'display: none'); | |
| $.ajax({ | |
| type: 'POST', | |
| url: '/gconnect?state={{STATE}}', | |
| headers: { | |
| 'X-Requested-With': 'XMLHttpRequest' | |
| }, | |
| contentType: 'application/octet-stream; charset=utf-8', | |
| success:function(result){ | |
| $('#result').html('Login Successful!</br>'+ result + '</br>Redirecting...') | |
| setTimeout(function() { | |
| window.location.href = "/"; | |
| }, 2000); | |
| }, | |
| processData:false, | |
| data:authResult['code'] | |
| }); | |
| } else{ | |
| // handle error | |
| console.log('There was an error: ' + authResult['error']); | |
| $('#result').html('Failed to make a server-side call. Check your configuration and console.'); | |
| } | |
| } | |
| auth2.grantOfflineAccess().then(signInCallback); | |
| }); | |
| </script> |
Shyam, you're the best! Thanks so much :)
Thanks!
Rock on Shyam.. Thanks!
Awesome thanks
Hi Shyam Gupta - This works, Thanks for sharing
Thank you @shyamgupta. You are a life saver.
Thanks for putting this up 👍
Hello,
I've almost got this working with your suggestions above. the /login page has the Google Sign-In button top left and when clicked I get the popup to select a google account but when I do it give me the "one moment please" spinning circle then kicks back to the /login page with the google button gone. Dev Console shows it kicking a 500 error ending in
File "/usr/local/lib/python2.7/dist-packages/oauth2client/clientsecrets.py", line 101, in _validate_clientsecrets prop_name, client_type)) InvalidClientSecretsError: Missing property "redirect_uris" in a client type of "web".
Thoughts?
Should I update Flask?
Since the content of this Lesson is outdated I'm not sure if the suggestions on Lesson 6 9: Quiz: Step 5 GConnect are even valid.
HA! Murphy's Law. As soon as I posted I had a thought and realized I updated my redirect URLs but never re-downloaded the .JSON file. Pulled down a fresh copy of it and the login is behaving fine now :)
HA! Murphy's Law. As soon as I posted I had a thought and realized I updated my redirect URLs but never re-downloaded the .JSON file. Pulled down a fresh copy of it and the login is behaving fine now :)
Welcome!
Thanks for sharing.
I've not tested it in the Incognito window..keep the browser web console open and see what errors you get...