如何使用angularjs实现谷歌登录

发布时间：2020-12-17 17:52:56 所属栏目：安全来源：网络整理

导读：我有一个AngularJS应用程序,我想实现G登录.我已经完成了他们的样本,他们作为独立的应用程序工作. https://developers.google.com/+/web/signin/ 在我的Angular应用程序中,我可以显示G登录按钮.但我坚持回调.我是否将回调函数放入控制器js文件中？如果是这样

我有一个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>

解决方法

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'
  });
}

在processAuth中,您应该看到一个访问令牌,并且可以更新您的UI以反映这一点.你也可以看到the full controller’s JavaScript code on GitHub.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!