I'm using gapi.signin2.render to create a custom Google Sign in button in Angular. The same code worked in another project previously but it's not working now and can't figure out why. My code looks like this
index.html
<meta name="google-signin-client_id" content="xxx.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
...
<div ng-controller="loginController">
<google-sign-in-button button-id="uniqueid" options="googleOptions"></google-sign-in-button>
</div>
loginController.js
function loginController($scope, $rootScope) {
$scope.googleOptions = {
'width': 200,
'height': 50,
'theme': 'dark',
'onsuccess': success,
'onfailure': function () {
console.log('failed');
}
}
console.log($scope.googleOptions); //prints out options
}
function success(response) {
var AUTH_TOKEN = response.getAuthResponse().id_token;
$rootScope.AUTH_TOKEN = AUTH_TOKEN;
console.log('Google token successfully retrieved for user ->', $rootScope.AUTH_TOKEN);
}
and the directive:
function googleSignInButton() {
return {
scope: {
buttonId: '@',
options: '&'
},
template: '<div></div>',
link: function (scope, element, attrs) {
var div = element.find('div')[0];
div.id = attrs.buttonId;
// console.log(`div.id --> ${div.id}`);
console.log(`Google options inside google sign in directive: ${scope.options()}`);
console.log(scope.options());
console.log('div.id->',div.id);
gapi.signin2.render(div.id, scope.options()); //render a google button, first argument is an id, second options
// debugger;
}
};
}
I found this code snippet from this post a while ago and it worked just fine. I don't know why it's not hitting the callbacks now.
