在AngularJS应用中使用Google用户登录

Question

我阅读本教程是为了将我的AngularJS应用程序与谷歌登录连接起来.我添加了google按钮,如下所示(只需复制粘贴教程):

在头部我添加了元标记:

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

然后添加按钮本身:

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

起初我只是onSignIn从教程中复制了方法(这只是一个通用的处理程序,所以我没有把它复制到问题中)并将它放在<script>...</script>标签中并且它有效.我现在想把这个方法放在一个Angular控制器中.所以我创建了一个控制器如下:

app.controller('GoogleCtrl', function() {
  function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId());
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail());
   }
}

并用div包裹按钮:

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

我的代码onSignIn现在没有使用该方法,我正在试图弄清楚我能做些什么.

Answer 1

如果按照说明进行操作,最终会得到的是window. onSignIn- 尝试在浏览器JS控制台中运行它,现在具有从控制器中创建该功能所需的相同行为.

app.controller('GoogleCtrl', function() {
  function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId());
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail());
   }
  window.onSignIn = onSignIn;
}

请记住,第三方执行的代码onSignIn需要调用$scope.$digest,因此angular可以识别模型更改.