Roa*_*ers 5 javascript google-signin
以下代码用作使用Google登录的简单测试页:
<html lang="en">
<head>
<script type="text/javascript">
function onGapiLoaded() {
auth = gapi.auth2.init({
client_id: "REPLACE_WITH_YOUR_ID",
scope: "profile email"
});
console.log( "signed in: " + auth.isSignedIn.get() );
auth.isSignedIn.listen( function(signedIn){ console.log( "signedin: " + signedIn ) } );
gapi.signin2.render( "signInButton", {
'width': 230,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSignIn
} );
}
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("Name: " + profile.getName());
};
</script>
<script src="https://apis.google.com/js/platform.js?onload=onGapiLoaded" async defer></script>
</head>
<body>
<div id="signInButton" class="g-signin2"></div>
</body>
</html>
但是,如果我class="g-signin2"从登录按钮中删除,或完全删除按钮不仅按钮消失,而且整个登录库停止工作 - 我得到一个未捕获的异常:
无法读取未定义的属性'init'
当我尝试调用gapi.auth2.init并且用户没有登录时.似乎auth库依赖于dom中存在的按钮来初始化.
我计划在我的Angular应用程序中加入它,它将在服务中的任何按钮出现之前初始化服务中的auth lib.如果用户已登录,则不会显示登录按钮.基于此处的行为,如果没有DOM中的按钮,我将无法使用此lib,这似乎相当紧缩.
age*_*tmr 10
要使用.auth2命名空间,您需要先加载它.合并它并兼顾一下,这是我推荐的代码.
<html lang="en">
<head>
<script src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
function onSignIn(googleUser) {
console.log( "signedin");
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("Name: " + profile.getName());
};
gapi.load('auth2', function() {
gapi.auth2.init({
client_id: "REPLACE_WITH_YOUR_ID",
scope: "profile email" // this isn't required
}).then(function(auth2) {
console.log( "signed in: " + auth2.isSignedIn.get() );
auth2.isSignedIn.listen(onSignIn);
var button = document.querySelector('#signInButton');
button.addEventListener('click', function() {
auth2.signIn();
});
});
});
</script>
</head>
<body>
<div id="signInButton"><img src="IMAGE_FILE" /></div>
</body>
</html>
有几点需要注意:
api.js而不是platform.jsplatform.js和.signin2命名空间,但这是另一种我不会在这里讨论的方法.