Невозможно прочитать свойство 'style' of null - кнопка входа в Google

Я пытаюсь внедрить Google для моего сайта. Кнопка "Вход в систему" отображается правильно и сначала знакомится с людьми. Моя проблема возникает, когда я выхожу из системы после использования веб-сайта и пытаюсь перейти на страницу входа (я использую React, так что все страницы). Я использую ту же самую функцию для отображения страницы входа, но она дает мне "cb = gapi.loaded_0: 249 Uncaught TypeError: Невозможно прочитать свойство" стиль "null". Ошибка в gapi происходит здесь (по крайней мере, я думаю):

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

Вот как я изначально добавляю кнопку Sign-In для рендеринга:

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

Ответ 1

У меня была аналогичная проблема, хотя я не уверен, что она точно связана с вашей проблемой. Я добавил кнопку в html как:

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

Но я хотел настроить рендеринг кнопки в соответствии с инструкциями Google, поэтому я добавил платформу script как:

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

Со следующей функцией onload:

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

Я получил ту же ошибку, что и вы: "Uncaught TypeError: Невозможно прочитать свойство" стиль "null. Моя проблема заключалась в том, что я включил атрибуты: class=" g-signin2 "data-onsuccess =" onSignIn" Как только я вынул эти атрибуты и добавил кнопку как:

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

Тогда ошибка исчезла. Кажется очень похожим на вашу проблему. Вы можете попробовать добавить кнопку через функцию onload. Просто мысль. Вы можете проверить документы: https://developers.google.com/identity/sign-in/web/build-button

Ответ 2

Его проблема с щели, пожалуйста, проверьте 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']);
        });
    };
}

Ответ 3

Я исправил это, указав другой идентификатор на каждую из моих кнопок входа. Например, у вас может быть кнопка входа на страницу регистрации и страница входа. Дайте каждому экземпляру кнопки свой собственный идентификатор.