如何使用 AngularJS 实现 Google+ 登录

Question

我有一个AngularJS应用程序，我想实现G+登录。 我已经浏览了他们的示例，它们作为独立的应用程序工作。

https://developers.google.com/+/web/signin/

在我的 Angular 应用程序中，我可以显示 G+ 登录按钮。 但是我被困在回调上。 我是否将回调函数放在控制器 js 文件中？

如果是这样，并给定此控制器：

app.controller('myController', function ($scope) {
    function signinCallback(authResult) {

在我的数据回调中，我如何命名它，以便它转到 myController 中的 signinCallback？

    <span id="signinButton">
      <span
        class="g-signin"
        data-callback="signinCallback"
        data-clientid="123456789.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>

Answer 1

Google+

PhotoHunt 示例应用程序演示了 AngularJS 与 Google+ 的集成。该示例在 Ruby、Java、Python 和 C#/.NET for Web 中可用。值得注意的是，AngularJS前端中的以下代码：

用于呈现按钮的标记：

<span id="signin" ng-show="immediateFailed">
  <span id="myGsignin"></span>
</span>

JavaScript 将标记粘附到代码中：

$scope.signIn = function(authResult) {
  $scope.$apply(function() {
    $scope.processAuth(authResult);
  });
}
$scope.processAuth = function(authResult) {
  $scope.immediateFailed = true;
  if ($scope.isSignedIn) {
    return 0;
  }
  if (authResult['access_token']) {
    $scope.immediateFailed = false;
    // Successfully authorized, create session
    PhotoHuntApi.signIn(authResult).then(function(response) {
      $scope.signedIn(response.data);
    });
  } else if (authResult['error']) {
    if (authResult['error'] == 'immediate_failed') {
      $scope.immediateFailed = true;
    } else {
      console.log('Error:' + authResult['error']);
    }
  }
}
$scope.renderSignIn = function() {
  gapi.signin.render('myGsignin', {
    'callback': $scope.signIn,
    'clientid': Conf.clientId,
    'requestvisibleactions': Conf.requestvisibleactions,
    'scope': Conf.scopes,
    'apppackagename': 'your.photohunt.android.package.name',
    'theme': 'dark',
    'cookiepolicy': Conf.cookiepolicy,
    'accesstype': 'offline'
  });
}

在进程身份验证中，应会看到访问令牌，并可以更新 UI 以反映这一点。您还可以在 GitHub 上查看完整控制器的 JavaScript 代码。

Answer 2

我不确定这是否有效，但我会像这样尝试：

module.factory("GPlusAuthService", function ($q, $window) {
    var signIn;
    signIn = function () {
        var defered = $q.defer();
        $window.signinCallback = function (response) {
            $window.signinCallback = undefined;
            defered.resolve(response);
        };
        gapi.auth.signIn({
            clientid: "123456789.apps.googleusercontent.com"
            cookiepolicy: "single_host_origin"
            requestvisibleactions: "http://schemas.google.com/AddActivity"
            scope: "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read",
            callback: "signinCallback"
        }) 
        return defered.promise;
    };
    return {
        signIn: signIn;
    }

});
module.controller('myController', function ($scope, GPlusAuthService) {
    $scope.signIn = function() {
        GPlusAuthService.signIn().then(function(response) {
        });    
    }
});

<span id="signinButton" ng-controller="myController">
   <span class="g-signin" ng-click="signIn()"></span>
</span>

Answer 3

在用户同意登录后将调用的函数在数据回调中指定，此函数需要全局可访问，即绑定到 window 对象。
从控制器访问全局对象是一种反模式，作为中间立场，您可以使用 Angular 提供的$window，您可以在测试中模拟它