-
-
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> |
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.
Thank you @shyamgupta. You are a life saver.