无法读取null的属性'style' - Google登录按钮

Question

我正在尝试为我的网站实施Google登录.登录按钮正确显示并且最初签名人员.当我在使用网站后尝试移动到登录页面(我正在使用React,因此它只是一页)时,我的问题就出现了.我使用完全相同的函数来呈现登录页面,但它给了我一个"cb = gapi.loaded_0:249未捕获的TypeError:无法读取属性'样式'的null".gapi中的错误发生在这里(至少我认为):

 a.El;window.document.getElementById((c?"not_signed_in":"connected"

这是我最初添加要呈现的登录按钮的方式:

elements.push(h('div.g-signin2',{'data-onsuccess': 'onSignIn'}))
        return h('div.page_content',elements)

我后来用ReactDOM.render调用渲染.

以下是我处理SignOut和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()
}

Answer 1

我遇到了类似的问题，但我不确定它是否与您的问题完全相关。我在 html 中添加了按钮：

<div id="gdbtn" class="g-signin2" data-onsuccess="onSignIn"></div>

但我想根据 Google 的说明自定义按钮的渲染，因此我将平台脚本添加为：

<script src="https://apis.google.com/js/platform.js?onload=renderGDriveButton"></script>

使用以下 onload 函数：

function renderGDriveButton() {
  gapi.signin2.render('gdbtn', { 
    'height': 50
  });
}

我得到了与您相同的错误：“未捕获类型错误：无法读取 null 的属性‘样式’”。我的问题是我包含了以下属性： class="g-signin2" data-onsuccess="onSignIn" 一旦我取出这些属性并将按钮添加为：

<div id="gdbtn"></div>

然后错误就消失了。看起来和你的问题非常相似。您可以尝试通过 onload 函数添加按钮。只是一个想法。您可以在以下位置查看文档： https: //developers.google.com/identity/sign-in/web/build-button