Nie można odczytać właściwości "styl" o wartości null - przycisk logowania Google

Question

Próbuję zaimplementować logowanie Google do mojej witryny. Przycisk logowania wyświetla się poprawnie, a znaki - na początku dobrze. Mój problem pojawia się, gdy wylogowuję się po użyciu strony internetowej i próbuję przejść do strony logowania (używam React, więc to wszystko jedna strona). Używam dokładnie tej samej funkcji do renderowania strony logowania, ale daje mi to "cb = gapi.loaded_0: 249 Uncaught TypeError: Nie można odczytać właściwości" style "o wartości null". Błąd w GAPI występuje tutaj (przynajmniej myślę):

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

To jak ja początkowo dodać logowania przycisk, aby być renderowane:

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

które później renderowania z ReactDOM. renderuj połączenie.

Oto jak sobie radzić SignOut i 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

miałem podobny problem, choć nie jestem pewien, że to jest dokładnie to, związane z danym problemem. I dodał przycisk w HTML jako:

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

Ale chciałem, aby dostosować renderowania przycisk zgodnie z instrukcjami Google więc dodałem skrypt platforma jako:

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

z następującymi onload funkcja:

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

mam ten sam błąd zrobiłeś: „Uncaught TypeError: nie można odczytać właściwości«styl»null”. Moim problemem było to, że zawarte atrybuty: class = „g-signin2” Dane-onSuccess = „onSignIn” Raz wziąłem te atrybuty i dodano przycisk jak:

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

Wtedy błąd odszedł. Wydaje się bardzo podobny do twojego problemu. Możesz spróbować dodać przycisk za pomocą funkcji onload. Tylko myśl. Możesz sprawdzić w dokumentacji pod adresem: https://developers.google.com/identity/sign-in/web/build-button

Answer 2

jego problem GAPI, proszę sprawdzić https://github.com/google/google-api-javascript-client/issues/281

Czy to samo z angular2, odpowiedni kod źródłowy:

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

i składnik:

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

Naprawiłem to, nadając każdemu z przycisków logowania inny identyfikator. Na przykład możesz mieć przycisk logowania na stronie rejestru i stronie logowania. Każdej instancji przycisku nadaj jej własny identyfikator.