无法读取null的属性'style' - Google登录按钮 [英] Cannot read property 'style' of null - Google Sign-In Button
问题描述
我正在尝试为我的网站实施Google登录。登录按钮正确显示并且最初签名人员。当我在使用网站后尝试移动到登录页面(我正在使用React,因此它只是一页)时,我的问题就出现了。我使用完全相同的函数来呈现登录页面,但它给了我一个cb = gapi.loaded_0:249未捕获的TypeError:无法读取属性'样式'的null。 gapi中的错误发生在这里(至少我认为):
I'm trying to implement Google sign in for my website. The Sign-In button shows up correctly and signs-people in well initially. My problem occurs when I log out after having used the website and try to move to the Sign-In page (I'm using React, so it's all one page). I use the exact same function to render the Sign-In page but it gives me a "cb=gapi.loaded_0:249 Uncaught TypeError: Cannot read property 'style' of null". The error in gapi occurs here (at least I think):
a.El;window.document.getElementById((c?"not_signed_in":"connected"
这是我最初添加要呈现的登录按钮的方式:
This is how I initially add the Sign-In button to be rendered:
elements.push(h('div.g-signin2',{'data-onsuccess': 'onSignIn'}))
return h('div.page_content',elements)
我后来渲染使用ReactDOM.render调用。
which I later render with a ReactDOM.render call.
以下是我处理SignOut和SignIn的方法:
Here's how I handle SignOut and SignIn:
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
// console.log('User signed out.');
signedin = false;
auth2 = null;
renderPage()
});
}
var google_idtoken;
var signedin = false;
// set auth2 to null to indicate that google api hasn't been loaded yet
var auth2 = null;
function onSignIn(googleUser) {
auth2 = gapi.auth2.getAuthInstance({
client_id: 'ClientID.apps.googleusercontent.com'
});
google_idtoken = googleUser.getAuthResponse().id_token;
wrongemail = true;
// if(auth2 != null && auth2.isSignedIn.get() == true){
if ((((auth2.currentUser.get()).getBasicProfile()).getEmail()).split("@").pop() == 'domain.com'){
signedin = true
wrongemail = false
}
updateSources()
// renderPage()
}
推荐答案
虽然我不确定它与您的问题完全相关,但我遇到了类似的问题。我在html中添加了按钮:
I had a similar problem though I'm not sure it's exactly related to your issue. I had added the button in the html as:
<div id="gdbtn" class="g-signin2" data-onsuccess="onSignIn"></div>
但我想根据Google的说明自定义按钮的渲染,所以我添加了平台脚本:
But I wanted to customize the rendering of the button according to Google's instructions so I added the platform script as:
<script src="https://apis.google.com/js/platform.js?onload=renderGDriveButton"></script>
使用以下onload函数:
With the following onload function:
function renderGDriveButton() {
gapi.signin2.render('gdbtn', {
'height': 50
});
}
我遇到了同样的错误:未捕获的TypeError:无法读取属性 'null'的样式。我的问题是我包含了属性:class =g-signin2data-onsuccess =onSignIn一旦我取出这些属性并将按钮添加为:
I got the same error you did: "Uncaught TypeError: Cannot read property 'style' of null". My problem was that I included the attributes: class="g-signin2" data-onsuccess="onSignIn" Once I took those attributes out and added the button as:
<div id="gdbtn"></div>
然后错误就消失了。似乎与您的问题非常相似。您可以尝试通过onload函数添加按钮。只是一个想法。您可以访问以下网址查看文档: https://developers.google.com / identity / sign-in / web / build-button
Then the error went away. Seems very similar to your issue. You might try adding the button through an onload function. Just a thought. You can check out the docs at: https://developers.google.com/identity/sign-in/web/build-button
这篇关于无法读取null的属性'style' - Google登录按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!