无法使用angularjs登录Google登录（gapi） [英] Trouble signing out with Google Sign in (gapi) with angularjs
问题描述
所以我尝试了以下模板尝试集成这个：
So I have tried the following templates trying to integrate this:
HTML ：
<google-sign-in-button button-id="login-button" options="options"></google-sign-in-button>
CSS ：
.directive('googleSignInButton', function() {
return {
scope: { buttonId: '@', options: '&' },
template: '<div></div>',
link: function(scope, element, attrs) {
var div = element.find('div')[0];
div.id = attrs.buttonId;
gapi.signin2.render(div.id, scope.options());
}
};
})
-
我'我也尝试在标题中使用常规登录按钮：
I've also just tried doing this in the header and using the regular sign in button:
HTML ：
<div class="g-signin2" data-onsuccess="onSignIn"></div>
在标题中：
<script>
window.onLoadCallback = function(){
gapi.auth2.init({
client_id: '123.apps.googleusercontent.com'
});
}
</script>
无论我做什么，我都不能弄清楚如何记录用户。在我的控制器中，当我尝试执行 gapi.auth.signOut（）; 时，它说 gapi未定义
编辑：
我也尝试过这个来记录一个人跑步但最理想的是我d想要在任何地方进行注销工作，而不仅仅是在页面加载时。我只是不知道该放在哪里或正确的方法来实现它：
I've also tried dabbling in this to log a person out on run but ideally i'd want to make a log out work anywhere and not just when the page loads. I just don't really know where to put it or the correct way to make it happen:
.run(function ($rootScope, $state) {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init();
auth2.then(function(){
auth2.signOut();
});
});
})
编辑＃2：
我也尝试在我的ui-router上创建这个工厂，但它是没有及时得到数据
I also tried to create this factory with a resolve on my ui-router but it's not getting the data in time or at all
.factory('Auth', function($http, $state, $q, $rootScope) {
var factory = { loggedIn: loggedIn };
return factory;
function loggedIn() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init();
auth2.then(function(){
return auth2.isSignedIn.get();
});
});
}
})
编辑＃3：
我尝试创建服务但由于某种原因我不断收到以下错误甚至测试它：
I tried creating a service but I keep getting the following error for some reason to even test it:
错误：undefined不是对象（评估'gapi.auth2.init'）
Error: undefined is not an object (evaluating 'gapi.auth2.init')
.service('googleService', ['$http', '$rootScope', '$q', function ($http, $rootScope, $q) {
var self = this;
this.signedIn = function() {
auth2 = gapi.auth2.init();
auth2.then(function(){
return auth2.isSignedIn.get();
});
}
this.signOut = function(){
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
}])
.controller('login', ['$rootScope', '$scope', '$q', 'googleService', function ($rootScope, $scope, $q, googleService) {
console.log(googleService.signedIn());
}])
推荐答案
我建立在我之前的小提琴上回答相关问题。
基本上我添加的是控制器范围的一个函数，当用户点击注销按钮时会调用该函数。
I build upon my fiddle from my previous answer on a related question. Basically what I added was a function to the controller scope that would be called when a user clicks on the signout button.
angular.module('app', [])
.controller('MainController', ['$scope',
function($scope) {
$scope.isSignedIn = false;
...
$scope.signOut = function(){
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
$scope.$apply(function(){
$scope.isSignedIn = false;
console.log('User signed out.');
});
});
}
}
])
我使用了Google文档提供的代码片段，它似乎立即起作用。
在更改范围内的变量时要注意，您必须将范围更改包装在
I used the code snippet provided by Google documentation and that seemed to work immediately.
Do pay attention when changing variables in scope, you have to wrap your scope changes in $scope.$apply for angular to force to check changes in scope.
您可以在中找到完整的代码。小提琴。
（我将在某个时候删除这个Google api项目，所以如果它不起作用，请用你自己的API密钥替换它）
You can find the full code in this fiddle.
(I will be removing this Google api project at some point, so replace the API Key with your own if it doesn't work)
这是演示代码，所以如果你真的将它放在项目中，我建议隐藏服务和指令背后的一些复杂性。
This is demo code, so if you would actually put this in project, I'd recommend hiding some of the complexity behind services and directives.
更新：如果你想使用服务，你必须大量使用角度承诺，参见 $ q docs 。
Update: if you want to use a service, you'll have to use angulars promises heavily, see $q docs.
这里有一个关于如何使用promises和callback创建服务的示例。
没有简单的方法来绕过回调地狱。但是我希望把这些东西包装成服务可以解决这个问题。
Here's a sample on how you could create a service using promises and callbacks. There's no simple way to get around the callback hell. But I hope wrapping these things into a service will solve that partially.
这是更新小提琴利用该服务。
这是js代码：
Here's an updated fiddle taking advantage of the service. This is the js code:
angular.module('app', [])
.controller('MainController', ['$scope','googleService',
function($scope, googleService) {
$scope.isSignedIn = false;
googleService.load().then(function(){
$scope.signIn = function(){
googleService.signIn().then(function(){
$scope.isSignedIn = googleService.isSignedIn();
});
};
$scope.signOut = function(){
googleService.signOut().then(function(){
$scope.isSignedIn = googleService.isSignedIn();
});
};
});
}
])
.service('googleService', ['$q', function ($q) {
var self = this;
this.load = function(){
var deferred = $q.defer();
gapi.load('auth2', function(){
var auth2 = gapi.auth2.init();
//normally I'd just pass resolve and reject, but page keeps crashing (probably gapi bug)
auth2.then(function(){
deferred.resolve();
});
addAuth2Functions(auth2);
});
return deferred.promise;
};
function addAuth2Functions(auth2){
self.signIn = function() {
var deferred = $q.defer();
auth2.signIn().then(deferred.resolve, deferred.reject);
return deferred.promise;
};
self.isSignedIn = function(){
return auth2.isSignedIn.get();
}
self.signOut = function(){
var deferred = $q.defer();
auth2.signOut().then(deferred.resolve, deferred.reject);
return deferred.promise;
};
}
}]);
基本上，在load函数中你包含了加载gapi和auth2的复杂性。在您的控制器中解决了加载承诺后，您确定 signIn ， signOut 等将起作用，因为它是加载。
Basically, inside the load function you wrap the complexity of loading gapi, and auth2. After the load promise resolved in your controller, you are certain that the signIn, signOut, etc will work because it is loaded.
这篇关于无法使用angularjs登录Google登录（gapi）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
