在AngularJS应用中使用Google用户登录 [英] Sign-in with google user in an AngularJS app

问题描述

我已阅读本教程以连接我的AngularJS应用程序与谷歌登录。我添加了google按钮，如下所示（只需复制粘贴教程）：

I read this tutorial in order to connect my AngularJS app with google sign-in. I added the google button as follows (just copy-pasting the tutorial):

在头部我添加了元标记：

In the head I added the meta tag:

<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控制器中。所以我按如下方式创建了一个控制器：

At first I just copied the onSignIn method (that's just a generic handler so I'm not copying it to the question) from the tutorial and put it in a <script>...</script> tag and it worked. I now want to put this method in an Angular controller. So I created a controller as follows:

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 方法，我正在试图弄清楚我能做些什么。

My code doesn't get to the onSignIn method now and I'm trying to figure out what can I do.

推荐答案

如果按照说明进行操作，最终会得到的是窗口.onSignIn - 尝试在浏览器中运行它J S控制台，现在具有相同的行为，您需要从控制器创建该功能。

If you follow the instructions, what you will end up with is window. onSignIn - try to run it in your browser JS console, now to have the same behaviour you will need to crate that function from your controller.

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知道模型更改。

Remember that code executed by 3rd party like onSignIn will need to call $scope.$digest, so angular is aware of model changes.

这篇关于在AngularJS应用中使用Google用户登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！