Impossibile leggere la proprietà 'style' di null - Pulsante di accesso a Google

Question

Sto tentando di implementare Google per accedere al mio sito web. Il pulsante di accesso viene visualizzato correttamente e segnala: le persone stanno bene all'inizio. Il mio problema si verifica quando mi disconnetto dopo aver utilizzato il sito Web e provo a passare alla pagina di accesso (sto utilizzando React, quindi è tutta una pagina). Uso la stessa identica funzione per rendere la pagina di accesso ma mi dà un "cb = gapi.loaded_0: 249 Unchaught TypeError: Impossibile leggere la proprietà 'style' di null". L'errore in GAPI si verifica qui (almeno credo):

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

Ecco come ho inizialmente aggiungo il pulsante di accesso da rendere:

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

che poi ho rendere con un ReactDOM. rendere la chiamata.

Ecco come ho gestire SignOut e 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

ho avuto un problema simile anche se non sono sicuro che sia esattamente legato al tuo problema. Avevo aggiunto il pulsante nel codice HTML come:

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

ma ho voluto personalizzare il rendering del pulsante in base alle istruzioni di Google così ho aggiunto lo script piattaforma come:

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

Con la seguente onload funzione:

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

ho ottenuto lo stesso errore che hai fatto: "TypeError Uncaught: Impossibile leggere la proprietà 'stile' di null". Il mio problema è che ho incluso gli attributi: class = "g-signin2" data-onSuccess = "onSignIn" Una volta ho preso quegli attributi fuori e aggiunto il pulsante come:

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

Quindi l'errore è andato via. Sembra molto simile al tuo problema. Potresti provare ad aggiungere il pulsante attraverso una funzione di caricamento. Solo un pensiero. È possibile controllare la documentazione a: https://developers.google.com/identity/sign-in/web/build-button

Answer 2

E 'un problema di GAPI, Si prega di verificare https://github.com/google/google-api-javascript-client/issues/281

hanno la stessa cosa con angular2, il codice sorgente rilevanti:

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

e il componente:

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

Answer 3

Ho risolto il problema dando un ID diverso a ciascuno dei miei pulsanti di accesso. Ad esempio, potresti avere il pulsante di accesso nella pagina del registro e nella pagina di accesso. Assegna a ciascuna istanza del pulsante il proprio ID.