Kann die Eigenschaft "Stil" von null nicht lesen - Google-Anmeldeschaltfläche

Question

Ich versuche Google zu implementieren, um mich für meine Website anzumelden. Der Sign-In-Button wird korrekt angezeigt und meldet sich zunächst gut ein. Mein Problem tritt auf, wenn ich mich nach der Nutzung der Website auslogge und versuche, zur Anmeldeseite zu wechseln (ich benutze React, also ist es eine Seite). Ich benutze genau die gleiche Funktion, um die Anmeldeseite zu rendern, aber es gibt mir ein "cb = gapi.loaded_0: 249 Uncaught TypeError: Kann die Eigenschaft 'style' von null nicht lesen". Der Fehler in gapi tritt hier (zumindest glaube ich):

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

Dies ist, wie ich die Sign-In zunächst hinzufügen Schaltfläche gerendert werden:

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

, die ich mit einem ReactDOM später machen. Ruf anzeigen.

Hier ist, wie ich behandeln SignOut und 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

Ich hatte ein ähnliches Problem, obwohl ich nicht sicher bin, es ist genau das, auf Ihr Problem beziehen. Ich hatte auf den Button in den HTML-Code als hinzugefügt:

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

Aber ich wollte die Darstellung der Schaltfläche auf Google Anweisungen entsprechend anpassen, so habe ich die Plattform Skript als:

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

Mit dem folgenden onload Funktion:

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

ich habe den gleichen Fehler, den Sie haben: „nicht abgefangene Typeerror: kann Eigenschaft‚Stil‘von null“ gesetzt ist. Mein Problem war, dass ich die Attribute enthalten: class = „g-signin2“ data-onsuccess = „onSignIn“ Sobald ich aus diese Attribute haben und hinzugefügt, um die Schaltfläche wie:

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

Dann wird der Fehler ging weg. Scheint Ihrem Problem sehr ähnlich. Sie könnten versuchen, die Schaltfläche über eine Onload-Funktion hinzuzufügen. Nur ein Gedanke. Sie können die Dokumente überprüfen unter: https://developers.google.com/identity/sign-in/web/build-button

Answer 2

Its a gapi Ausgabe, überprüfen bitte https://github.com/google/google-api-javascript-client/issues/281

haben die gleiche Sache mit angular2, relevant Quellcode:

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

und die Komponente:

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

Ich habe dies behoben, indem ich jedem meiner Anmeldebuttons eine andere ID gegeben habe. Zum Beispiel haben Sie möglicherweise Anmelde-Schaltfläche auf Ihrer Registrierungsseite und Anmeldeseite. Geben Sie jeder Instanz der Schaltfläche eine eigene ID.