在AngularJS应用程序中实现谷歌sso时遇到问题

Question

所以我一直在尝试在我的 angular 应用程序中实现谷歌单点登录;但是，有时当我重新加载页面时，按钮会消失。我的角度应用程序正在使用角度路由。如果我把我的按钮放在这之外，它会按预期工作。当它通过部分加载时，它只是遇到问题。知道我该如何解决这个问题吗？

    <div class="g-signin2" data-onsuccess="onSignIn"></div>
    <div ng-view></div>

Answer 1

正如@agektmr所说，问题与angular和platform.js相互作用的方式有关。

为了使用自动渲染按钮，您需要在加载DOM时触发库。

我所做的是在onComplete方法中调用以下代码（我正在使用AngularMaterial对话框，但您应该能够很容易找到类似的方法）：

$timeout(function() {
  $window.gapi.signin2.render('g-signin2');
});

唯一的区别是在你的html中，你应该改变你的div，而不是添加一个g-signin2类，你应该添加一个g-signin2 id：

<div id='g-signin2' data-onsuccess='yourMethod'></div>

如果你愿意了解更多关于谷歌的实现，你可以看看这里。

Answer 2

我建议使用命令式方法来实现按钮。

<div id="signin">
  <button>sign-in</button>
</div>
<script>
document.querySelector('#signin').addEventListener('click', function() {
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signIn();
});
</script>

在此处查找更多具体示例https://github.com/GoogleChrome/google-sign-in

由于时间原因，您指示的代码不起作用。 platform.js库试图处理它，但失败了，因为它是在角度渲染 DOM 之前。