如何在没有登录按钮的情况下初始化Google登录? [英] How do I initialise Google Sign in with no login button?
问题描述
以下代码是使用 Google登录的简单测试页. >:
The below code works as a simple test page that uses Google sign in:
<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"，或者将其完全删除了，不仅按钮消失了，而且整个登录库也停止了工作-我遇到了一个未捕获的异常:
However if I remove the class="g-signin2" from the signin button, or remove the button completely not only does the button disappear but the whole sign in library stops working - I get an uncaught exception:
无法读取未定义的属性'init'
Cannot read property 'init' of undefined
当我尝试调用gapi.auth2.init且用户未登录时.似乎auth库依赖于dom中存在的按钮进行初始化.
when I try to call gapi.auth2.init and the user is not logged in. It seems that the auth library relies on a button being present in the dom to initialise.
我打算将其合并到我的Angular应用中，该应用将在舞台上任何按钮出现之前初始化服务中的auth lib.如果用户已经登录，则不会出现登录按钮. 基于这里的行为，如果没有DOM中的一个看起来很狭窄的按钮，我将无法使用此lib.
I am planning to incorporate this in my Angular app that will initialise the auth lib in a service before any button appears on the stage. If the user is logged in already no login button will appear. Based on the behaviour here I will not be able to use this lib without having a button in the DOM which seems rather constricting.
推荐答案
要使用.auth2命名空间，您需要先加载它.合并并进行一些处理，这是我推荐的代码.
In order to use .auth2 namespace, you need to load it first. Incorporate it and juggle some bit, here's my recommended code.
<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.js - 按钮资产不会自动加载，带上你的
- 如果要利用窗口小部件，则必须使用
platform.js和.signin2命名空间，但这是我这里不讨论的另一种方法.
- load
api.jsinstead ofplatform.js - button assets are not loaded automatically, bring yours
- if you want to take advantage of widgets, you have to use
platform.jsand.signin2namespace but that is another approach I won't talk about here.
这篇关于如何在没有登录按钮的情况下初始化Google登录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
