如何实现谷歌+登录与angularjs [英] how to implement google+ sign-in with angularjs

问题描述

我有一个AngularJS应用程序，我想实现G +登录。我已经通过他们的样品了，他们作为独立的应用程序工作。

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

在我的角度应用程序，我能够显示G +登入按钮。但是我卡在回调。难道我把回调函数在我的控制器js文件？

如果是这样，并给予该控制器：

  app.controller（'myController的'，函数（$范围）{
    功能signinCallback（authResult）{
 

在我的数据的回调，我怎么这样它去里面signinCallback myController的名字呢？

 ＆LT;跨度ID =signinButton＆GT;
      ＆LT;跨度
        类=G-登入
        数据回调=signinCallback
        数据的clientid =123456789.apps.googleusercontent.com
        数据的CookiePolicy =single_host_origin
        数据requestvisibleactions =htt​​p://schemas.google.com/AddActivity
        数据范围=htt​​ps://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read
      ＆LT; / SPAN＆GT;
    ＆LT; / SPAN＆GT;
 

解决方案

使用Google+ PhotoHunt示例应用程序演示了使用Google+的整合​​AngularJS。样品是在Ruby中，使用Java，Python可用，C＃/。NET的Web。
附注应在AngularJS前端下面code：

标记来呈现的按钮：

 ＆LT;跨度ID =登入NG-秀=immediateFailed＆GT;
  ＆所述;跨度的id =myGsignin＆GT;＆下; /跨度＆GT;
＆LT; / SPAN＆GT;
 

JavaScript来标记胶水code：

  $ scope.signIn =功能（authResult）{
  $范围。$应用（函数（）{
    $ scope.processAuth（authResult）;
  }）;
}$ scope.processAuth =功能（authResult）{
  $ scope.immediateFailed =真;
  如果（$ scope.isSignedIn）{
    返回0;
  }
  如果（authResult ['ACCESS_TOKEN']）{
    $ scope.immediateFailed = FALSE;
    //授权成功，创建会话
    PhotoHuntApi.signIn（authResult）。然后（功能（响应）{
      $ scope.signedIn（response.data）;
    }）;
  }否则如果（authResult ['错误']）{
    如果（authResult ['错误'] =='immediate_failed'）{
      $ scope.immediateFailed =真;
    }其他{
      的console.log（'错误：'+ authResult ['错误']）;
    }
  }
}$ scope.renderSignIn =功能（）{
  gapi.signin.render（'myGsignin'，{
    '回调'：$ scope.signIn，
    客户端ID：Conf.clientId，
    requestvisibleactions'：Conf.requestvisibleactions，
    范围：Conf.scopes，
    apppackagename'：'your.photohunt.android.package.name'，
    '主题'：'暗'，
    '的CookiePolicy'：Conf.cookiepolicy，
    接入类型：离线
  }）;
}
 

在processAuth，你会看到一个访问令牌，并可以更新您的UI来反映这一点。您还可以看到<一个href=\"https://github.com/gguuss/gplus-photohunt-server-csharp/blob/master/PhotoHunt/js/controllers.js\"相对=nofollow>在GitHub上全控制器的JavaScript code。

I have an AngularJS app, and I want to implement G+ sign-in. I've gone through their samples, and they work as standalone apps.

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

In my Angular app, I am able to display the G+ sign-in button. But I'm stuck on the callback. Do I put the callback function in my controller js file?

If so, and given this controller:

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

On my data-callback, how do I name it so that it goes to signinCallback inside myController?

    <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>

解决方案

The Google+ PhotoHunt sample app demonstrates an AngularJS integration with Google+. The sample is available in Ruby, Java, Python, and C#/.NET for web. Of note should be the following code in the AngularJS front-end:

Markup to render the button in:

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

JavaScript to glue the markup to code:

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

Within processAuth, you should see an access token and can update your UI to reflect this. You can also see the full controller's JavaScript code on GitHub.

这篇关于如何实现谷歌+登录与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！