Login with google user in AngularJS app

Question

I read this tutorial to connect my AngularJS application using google login. I added a google button as follows (just copy the tutorial):

In my head, I added a meta tag:

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> 

Then the button itself is added:

 <div class="g-signin2" data-onsuccess="onSignIn"></div> 

First, I just copied the onSignIn method (it's just a generic handler so I don't copy it to the question) from the tutorial and put it in the <script>...</script> , and it worked. Now I want to put this method in an Angular controller. Therefore, I created the controller as follows:

 app.controller('GoogleCtrl', function() { function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); } } 

And wrap the button with div:

 <div ng-controller="GoogleCtrl"> <div class="g-signin2" data-onsuccess="onSignIn"></div> </div> 

My code doesn't get to the onSignIn method, and I'm trying to figure out what I can do.

Answer 1

If you follow the instructions, you will end up with a window. onSignIn window. onSignIn window. onSignIn window. onSignIn - try to run it in the browser JS console to now have the same behavior as for creating this function from your controller.

 app.controller('GoogleCtrl', function() { function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); } window.onSignIn = onSignIn; } 

Remember that code executed by a third party such as onSignIn will have to call $scope.$digest , so angular is aware of model changes.

Answer 2

Looking at your code, it seems you might have to add a listener for your function. To keep things simple, you can easily integrate google login into your application using this plugin. https://github.com/sahat/satellizer

Answer 3

You did not specify your version of AngularJS, but that should not matter. I solved this for AngularJS 1.x as follows:

 allControllers.controller('authenticateController', ['$rootScope', $scope', function($rootScope, $scope) { // do whatever you're doing on this page... // initialize The GoogleAuth API explicitly gapi.load('auth2', function() { // Loads the auth2 component of gapi gapi.auth2.init({ // initialize the auth2 using your credentials client_id: $GOOGLE_API_CLIENT_ID }).then(function onInit() { // on complete of init gapi.signin2.render("g-signin2", { // render the HTML button on the screen providing the ID of the element (g-signin2) onsuccess: function(googleUser) { // This executes when a user successfully authorizes you to their data by clicking the button and selecting their account. var profile = googleUser.getBasicProfile(); console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); // Do whatever you need to do to authenticate on your site. } }); }); }); }]); 

 // In your index.html <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script> <script type="text/javascript" src="https://apis.google.com/js/platform.js" async defer></script> // In your login fragment <div id="g-signin2" style="width: 200px; margin: 20px auto 20px auto;"></div>