在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屋!