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
});
});
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
