无法读取空对象的属性'style' - Google登录按钮

Question

我正在尝试为我的网站实现Google登录。登录按钮正确显示并成功登录。但是，当我在使用网站后退出并尝试移动到登录页面时（我正在使用React，因此它都在一个页面中），问题就出现了。我使用完全相同的函数来呈现登录页面，但它给出了“cb = gapi.loaded_0：249未捕获的类型错误：无法读取null的'style'属性”。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()
}

- Filip Bujaroski

---

错误不在那里。你的代码中一定有一个 element.style，其中某个 element 的值为 null。无论如何，在控制台中必须指示脚本文件名和行号以及错误发生的位置。 - user2570380

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
  });
}

我遇到了和你一样的错误："Uncaught TypeError: Cannot read property 'style' of null"。我的问题在于我包含了这些属性：class="g-signin2" data-onsuccess="onSignIn"，当我将这些属性去掉并改为以下按钮时：

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

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

- VirtualMitra

Answer 2

我通过为每个登录按钮分配不同的ID来解决了这个问题。例如，您可能在注册页面和登录页面上都有登录按钮。给每个按钮实例分配自己的ID。

- MarzSocks

Answer 3

这是一个gapi问题，请检查https://github.com/google/google-api-javascript-client/issues/281

在使用angular2时也遇到了同样的问题，相关源代码：

<app>Loading...</app>

<script>
    gapi.load('auth2', function() {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: 'YOURCLIENT_ID.apps.googleusercontent.com'
        });
    });
</script>

还有这个组件：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';

declare var auth2: any;

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {
    @ViewChild('googleButton') el: ElementRef;

    constructor(private router:Router, private authService: AuthService) { }

    ngAfterViewInit() {
        let self = this;

        if (this.authService.isLoggedIn) {
            self.router.navigate(['home']);
        }

        auth2.attachClickHandler(self.el.nativeElement, {}, (googleUser) => {
            var token = googleUser.getAuthResponse().id_token;
            self.authService.login(token);
            self.router.navigate(['home']);
        });
    };
}

- Curly Brace