Cannot read property 'style' of null - Goo

问题:

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)

which I later render with a ReactDOM.render call.

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

回答1:

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>

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>

With the following onload function:

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

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>

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

回答2:

I fixed this by giving a different id to each of my sign-in buttons. For instance, you may have sign-in button on your register page and login page. Give each instance of the button its own id.

回答3:

Its a gapi issue, Please check https://github.com/google/google-api-javascript-client/issues/281

Have the same thing with angular2, relevant source code:

<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>

and the component:

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