Question

我正在构建一个小型Angular应用，我正在使用Google登录。我只是使用Google提供的教程中的示例代码。

              <span class="g-signin"
                data-scope="https://www.googleapis.com/auth/plus.login"
                data-clientid="blah"
                data-redirecturi="postmessage"
                data-accesstype="offline"
                data-cookiepolicy="single_host_origin"
                data-callback="signInCallback">
              </span>

这是使按钮登录的元素，我运行此代码以启动

(function () {
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://plus.google.com/js/client:plusone.js?onload=start';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();

，所有这些都是从Google复制的。然后我在我的控制器中使用了这个方法，

.controller('splashController', ['$scope', '$window', function($scope, $window){
        $scope.googleLogin() = function(){
                $scope.googleAuthResult = $window.googleAuthResult;
                console.log($scope.googleAuthResult);
        };


        window.signInCallback = function(authResult){
                console.log("happy");
        };
}])

但问题是，在google +脚本运行之后，它会在Angular World之外寻找这个signInCallback函数，我想保留在Angular中，因为我想通过angular发送令牌而不是像jQuery一样。有什么建议吗？

Answer 1

尝试使用gapi.auth.authorize方法。它调用与按钮相同的功能，但显式地通过Javascript，它还允许您在控制器/服务/范围内传递回调方法。这是我的登录功能：

var authParams =                    // Define a params object for gapi.auth.authorize
{
    client_id       : '****-****.apps.googleusercontent.com',
    scope           : 'https://www.googleapis.com/auth/userinfo.email',
    immediate       : false,
    cookiepolicy    : 'single_host_origin'
};

/**
 * Authenticates the user and authorizes the local browser's JS GAPI Client, returns an object
 * with the GAPI Client's login token or false if it's not yet available, and the deferred 
 * object whose promise will be resolved when the JS GAPI Client authenticates.
 *
 * @param hard      If {{ hard }} is truthy, force the GAPI Client to reauthenticate the user
 *                  and reauthorize the client.  Ensures the client is logged in and the session
 *                  stays active even if it is disrupted external to the application.
 */
this.login = function(hard)
{
    // @TODO:   Consolidate into (!hard && (token || pending) if token can be guaranteed falsey
    //          while pending otherwise ret.logged is unreliable.  
    //          Where's a logical XOR when you need one?
    //////////////////////////
    // If a login is pending and we're not forcing a hard reauth, return the deferred object
    // promising the authorization response and 'logged':false
    if (pending && !hard) return { logged : false, deferred : deferred };

    // If the token is already set and we're not forcing a hard reauth, resolve the deferred
    // promise immediately and return it along with 'logged':token
    if (token && !hard)
    {
        deferred.resolve(token); // Resolve the promise immediately, no login response to wait for
        return { logged : token, deferred : deferred };
    }
    /////////////////////////

    deferred = $q.defer();  // We need to wait for gapi.auth.authorize to respond, reinit the promise
    pending = true;         // Don't restart the process on future calls if an authorization is pending
    gapi.auth.authorize(authParams,this.handleAuthResult);  // Authorize the client, then run the callback

    // Not logged in, return the deferred object
    return { logged : false, deferred : deferred};
}

全部包含在服务中。

Google登录无法识别Angular中的回拨功能

1 个答案: