Không thể đọc thuộc tính 'kiểu' rỗng - Nút Đăng nhập của Google

Question

Tôi đang cố triển khai đăng nhập bằng Google cho trang web của mình. Nút Đăng nhập hiển thị chính xác và có dấu hiệu-người đầu tiên. Vấn đề của tôi xảy ra khi tôi đăng xuất sau khi đã sử dụng trang web và cố gắng chuyển sang trang Đăng nhập (Tôi đang sử dụng React, vì vậy, đó là tất cả một trang). Tôi sử dụng chính xác chức năng tương tự để hiển thị trang Đăng nhập nhưng nó cho tôi một "cb = gapi.loaded_0: 249 Uncaught TypeError: Không thể đọc thuộc tính 'style' của null". Các lỗi trong GAPI xảy ra ở đây (ít nhất tôi nghĩ):

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

Đây là cách tôi ban đầu thêm nút đăng nhập được hiển thị:

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

mà sau này tôi làm với một ReactDOM. gọi lại.

Đây là cách tôi xử lý SignOut và đăng nhập:

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

Tôi đã có một vấn đề tương tự mặc dù tôi không chắc chắn nó chính xác liên quan đến vấn đề của bạn. Tôi đã thêm nút trong html như:

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

Nhưng tôi muốn để tùy chỉnh vẽ của các nút theo hướng dẫn của Google vì vậy tôi thêm vào kịch bản nền tảng như:

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

Với onload sau chức năng:

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

Tôi gặp lỗi tương tự như bạn đã làm: "Loại lỗi không khớp: Không thể đọc kiểu thuộc tính" của giá trị rỗng ". Vấn đề của tôi là tôi bao gồm các thuộc tính: class = "g-signin2" dữ liệu onSuccess = "onSignIn" Khi tôi mất những đặc tính đó ra và thêm vào các nút như:

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

Sau đó, các lỗi đi. Có vẻ rất giống với vấn đề của bạn. Bạn có thể thử thêm nút thông qua một hàm onload. Chỉ là một ý nghĩ. Bạn có thể kiểm tra các tài liệu tại địa chỉ: https://developers.google.com/identity/sign-in/web/build-button

Answer 2

của nó là một vấn đề GAPI, Vui lòng kiểm tra https://github.com/google/google-api-javascript-client/issues/281

Có điều tương tự với angular2, mã nguồn có liên quan:

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

và thành phần:

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

Tôi đã sửa lỗi này bằng cách đặt một id khác cho mỗi nút đăng nhập của mình. Ví dụ: bạn có thể có nút đăng nhập trên trang đăng ký và trang đăng nhập của mình. Cung cấp cho mỗi trường hợp của nút id riêng của nó.