Verify if Google Email is being sent in ajax request

Question

I've been reading a bunch into angular and I'm really new into it. I've been asked to develop this app for the company I work in where users need to login using their Google Credentials.

So far this is cake, but I think I'm complicating myself too much. So far, here's what I have:

• Google Button to login
• Callback function that will save the email to a variable and send an AJAX request to save it on database and start session

Problems:

• Google Api says it cannot find the callback function. I'm pretty sure it's something really simple, but I can't really seem to find it.

Here is my relevant angular code:

app.controller('LoginController', function($scope){
        $scope.authResultErrorMessage = "";
        $scope.showAuthResultErrorMessage = false;
        $scope.userEmail = "";
        $scope.handleSignIn = function(authResult){
            console.log("I was called!");
            if(authResult){
                if(authResult['error'] != undefined){
                    $scope.showAuthResultErrorMessage = true;
                    $scope.authResultErrorMessage = "Hubo un error. Intente de nuevo. Si este error persiste, ponganse en contacto con el director de IT.";
                } else if(authResult['error'] === undefined){
                    gapi.client.load('plus', 'v1', loadProfileFromGoogle);
                }
            }
        };
        $scope.loadProfileFromGoogle = function(){
            var request = gapi.client.plus.people.get( {'userId' : 'me'} );
            request.execute(getEmail);
            console.log(request);
        };
        $scope.getEmail = function(obj){
            $scope.userEmail = obj['emails'].filter(function(v){
                return v.type === 'account';
            })[0].value;
            console.log($scope.userEmail);
            $scope.verifyUser($scope.userEmail);
        };
        $scope.verifyUser = function(email){
            $.get('controllers/verifyUser.php', {
                data: email,
            }, function(result){
                    console.log(result);
                    JSON.parse(result);
            });
        };
    });

Here's the html code:

<div ng-controller="LoginController as login">
    <span id="signin-button">
        <span
            class="g-signin"
            data-callback="login.handleSignIn"
            ng-click="login.handleSignIn"
            data-approvalprompt="force"
            data-clientid="201763423039-kdogu6vm1fgsj6hdnafn5k9otkj9ekjj.apps.googleusercontent.com"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://schemas.google.com/AddActivity"
            data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read">
        </span>
    </span>   
</div>

When I click the button, everything goes smoothly, I login, but on the console, the following message shows:

Callback function named "login.handleSignIn" not found cb=gapi.loaded_0:484

I've been smashing my head for a couple of hours now trying to figure out why the function is not being called, or for that matter, if there's a syntax erro currently not being highligted that exists. If anyone could help, I'd be really grateful.

Answer 1

Why don't try this directive :

http://jeradbitner.com/angular-directive.g-signin/