-
-
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> |
For some reason this is not loading for me in incognito window in Chrome, anyone face the same issue? Thansk Shyam for putting this together
I've not tested it in the Incognito window..keep the browser web console open and see what errors you get...
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.
For some reason this is not loading for me in incognito window in Chrome, anyone face the same issue? Thansk Shyam for putting this together