有时不显示AngularJS中的Google登录按钮
我点击了此链接https://developers.google.com/identity/sign-in/web/sign-
in，
以在基于Angular的网站上获取Google登录。
我已经看到一些奇怪的行为。登录按钮有时会显示，但并不总是显示。当我刷新页面时，只有五分之一的刷新，该按钮出现。
我在Chrome和Safari中尝试过，两者的行为相同。
码：
index.html
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="my_client_id">
login.html
<div class="g-signin2" data-onsuccess="onSignIn"></div>
login.js
angular.module('app').controller('LoginCtrl', function($scope) {
window.onSignIn = function(googleUser) {
// Get some info
}
});
问题答案：
我的猜测是platform.js脚本等待DOM就绪事件，然后使用“
g-signin2”类查找div。但是，在Angularjs中，工作原理有所不同。之所以有时起作用，是因为有时div是由Angular渲染的，而有时却不是在Dom-
ready事件之前渲染的。有关于如何使用自己的JavaScript获得相同结果的文档。我做了一个遵循您的路由的示例。
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-view></div>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.6/angular-route.min.js"></script>
<script>
angular.module('app',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/log-in', {
template: '<button ng-click="logInCtrl.onLogInButtonClick()">Log In</button>',
controller: 'LogInController',
controllerAs: 'logInCtrl'
}).otherwise({
redirectTo:'/log-in'
});
}])
.controller('LogInController',function(){
var self = this; //to be able to reference to it in a callback, you could use $scope instead
gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined
gapi.auth2.init(
{
client_id: 'CLIENT_ID.apps.googleusercontent.com'
}
);
var GoogleAuth = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
self.onLogInButtonClick=function(){//add a function to the controller so ng-click can bind to it
GoogleAuth.signIn().then(function(response){//request to sign in
console.log(response);
});
};
});
});
</script>
</body>
</html>
或作为指令：
<!doctype html>
<html lang="en" ng-app="app" ng-controller="MainController">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<google-sign-in-button on-sign-in="onSignIn(response)" g-client-id="CLIENTID.apps.googleusercontent.com"></google-sign-in-button>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('MainController',['$scope', function ($scope) {
$scope.onSignIn=function(response){
console.log(response);
}
}])
.directive('googleSignInButton',function(){
return {
scope:{
gClientId:'@',
callback: '&onSignIn'
},
template: '<button ng-click="onSignInButtonClick()">Sign in</button>',
controller: ['$scope','$attrs',function($scope, $attrs){
gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined
gapi.auth2.init(
{
client_id: $attrs.gClientId
}
);
var GoogleAuth = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
$scope.onSignInButtonClick=function(){//add a function to the controller so ng-click can bind to it
GoogleAuth.signIn().then(function(response){//request to sign in
$scope.callback({response:response});
});
};
});
}]
};
});
</script>
</body>
</html>
写完前面的示例后，我发现了一种更好，更轻松的方法来实现它。使用此代码，您可以像平常一样继承相同的按钮。
<!doctype html>
<html lang="en" ng-app="app" ng-controller="MainController">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="google-signin-client_id" content="CLIENTID.apps.googleusercontent.com">
</head>
<body>
<google-sign-in-button button-id="uniqueid" options="options"></google-sign-in-button>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('MainController', ['$scope',
function($scope) {
//for more options visit https://developers.google.com/identity/sign-in/web/reference#gapisignin2renderwzxhzdk114idwzxhzdk115_wzxhzdk116optionswzxhzdk117
$scope.options = {
'onsuccess': function(response) {
console.log(response);
}
}
}
])
.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()); //render a google button, first argument is an id, second options
}
};
});
</script>
</body>
</html>
-
如果这是基本的/愚蠢的，请原谅我。使用Firebase，注册新用户的“正确”方法是什么？ > 收集他的电子邮件并以平淡无奇的形式传递，然后手动发送到以创建一个新用户？ 使用并以某种方式将其连接到Firebase？https://developers.google.com/identity/sign-in/web/build-button 关于Facebook有什么明显的方法吗？
-
问题内容： 我正在尝试在React应用程序中使用google登录。虽然在应用程序外部使用登录按钮本身很有效，但是在自定义登录组件中使用登录按钮时，我无法按预期工作。当用户登录时，按钮本身应执行一个方法。问题是即使登录有效，执行也永远不会到达该方法。 我可能会缺少一些反应，但是我找不到。有什么帮助吗？在可加载所有内容和组件本身的html下方找到。 注意，我没有在此处粘贴无关的代码;） 问题答案： 在
-
我有一个使用SpringMVC的Java网络应用程序。该 Web 应用程序在 jboss AS7.1 服务器上运行，该服务器使用带有表单认证的 JAAS 登录模块。当用户在表单上填写其用户名和密码时，登录工作顺利。 我现在想创建一个java控制器，它“将用户登录”，就好像用户填写了日志通知一样。 当上述方法完成时，应允许对任何安全页面的任何访问，因为用户被视为已登录。 可以通过访问Jboss的lo
-
null 请注意，我试图展示一个本地旋转器。谢了！
-
1. 申请应用 1.1 创建第三方授权应用 登录 Google 开发者中心：Google 开发者中心 (opens new window) 点击新建项目：新建项目 (opens new window) 确保在第二步新建的项目下，选择“API 和服务”-“凭据” 创建凭据 创建凭据时，选择 “OAuth 客户端 ID” 首次创建凭据时系统会提示“如需创建 OAuth 客户端 ID，您必须先在同意屏幕
-
本文向大家介绍Xamarin.iOS 显示登录警报，包括了Xamarin.iOS 显示登录警报的使用技巧和注意事项，需要的朋友参考一下 示例 以下代码适用于iOS 8及更低版本的iOS，用于创建登录警报。