Menu
I'm trying to implement Google Sign In and retrieve the profile information of the user. The error is: Uncaught ReferenceError: gapi is not defined. Why is that?
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://apis.google.com/js/platform.js" async defer></script> <script type="text/javascript"> $(function(){ gapi.auth2.init({ client_id: 'filler_text_for_client_id.apps.googleusercontent.com' }); }); </head> <body> </body> </html> 
726
It happens because you have async and defer attributes on your script tag. gapi would be loaded after your script tag with gapi.auth2.init...
To wait for gapi before executing this code you can use onload query param in script tag, like following:
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script> <script> window.onLoadCallback = function(){ gapi.auth2.init({ client_id: 'filler_text_for_client_id.apps.googleusercontent.com' }); } </script> Or for case when you need it in many places, you can use promises to better structure it:
// promise that would be resolved when gapi would be loaded var gapiPromise = (function(){ var deferred = $.Deferred(); window.onLoadCallback = function(){ deferred.resolve(gapi); }; return deferred.promise() }()); var authInited = gapiPromise.then(function(){ gapi.auth2.init({ client_id: 'filler_text_for_client_id.apps.googleusercontent.com' }); }) $('#btn').click(function(){ gapiPromise.then(function(){ // will be executed after gapi is loaded }); authInited.then(function(){ // will be executed after gapi is loaded, and gapi.auth2.init was called }); }); I think you'll find with the above example that this won't work either, as gapi.auth2 will not yet be defined (I know this because I made the same mistake myself, today) You first need to call gapi.load('auth2', callback) and pass THAT a callback which then calls gapi.auth2.init. Here is an example of my _onGoogleLoad function, which is the callback for loading the first platform.js script.
var _auth2 var _onGoogleLoad = function () { gapi.load('auth2', function () { _auth2 = gapi.auth2.init({ client_id: 'OUR_REAL_ID_GOES_HERE', scope: 'email', fetch_basic_profile: false }) _enableGoogleButton() }) } After that, you can use the _auth2 variable to actually sign users in.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
