我们已将我们的 Google 登录代码移到我们的 angularJS Controller 中,并且在页面初始加载后,需要两次点击才能登录。尝试在页面加载后移动初始化代码,但最初仍需要两次点击。知道是什么原因造成的吗?这是代码:
HTML:
<button type="button" id="googleLogin" ng-click="onGoogleLogin()"
class="btn btn-sm btndefault">
Login
</button>
AngularJS Controller :
function GoogleLogin($scope) {
$scope.onGoogleLogin = function() {
gapi.load('auth2', function() {
//Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'CLIENT_ID.apps.googleusercontent.com',
//cookiepolicy: 'single_host_origin'
});
var element = document.getElementById('googleLogin');
auth2.attachClickHandler(element, {},
function(response) {
//https://developers.google.com/identity/sign-in/web/reference
var profile = response.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
console.log('ID Token: ' + response.getAuthResponse().id_token);
},
function(error) {
console.log(JSON.stringify(error, undefined, 2));
});
});
}
}
有什么想法吗?
最佳答案
这最好作为一个指令来实现:
app.directive("googleLoginDirective", function() {
return {
link: postLink
};
function postLink(scope,elem,attrs) {
gapi.load('auth2', function() {
//Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'CLIENT_ID.apps.googleusercontent.com',
//cookiepolicy: 'single_host_origin'
});
̶v̶a̶r̶ ̶e̶l̶e̶m̶e̶n̶t̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶g̶o̶o̶g̶l̶e̶L̶o̶g̶i̶n̶'̶)̶;̶
var element = elem[0];
auth2.attachClickHandler(element, {},
function(response) {
//https://developers.google.com/identity/sign-in/web/reference
var profile = response.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
console.log('ID Token: ' + response.getAuthResponse().id_token);
},
function(error) {
console.log(JSON.stringify(error, undefined, 2));
});
});
}
})
用法
<button type="button" google-login-directive
class="btn btn-sm btndefault">
Login
</button>
当 AngularJS 框架实例化该指令时,它会调用 gapi.load
函数并将 Google 点击处理程序附加到该元素。
有关详细信息,请参阅
关于javascript - Google 登录 API 最初需要两次点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55694969/