无法读取 null 的属性“样式” - Google 登录按钮

Posted 2023-02-23

【中文标题】无法读取 null 的属性“样式” - Google 登录按钮

【英文标题】：Cannot read property 'style' of null - Google Sign-In Button

【发布时间】：2016-09-25 03:25:18

【问题描述】：

我正在尝试为我的网站实施 Google 登录。登录按钮显示正确，并且最初可以很好地登录。当我在使用该网站后注销并尝试移至登录页面时出现我的问题（我使用的是 React，所以它都是一页）。我使用完全相同的函数来呈现登录页面，但它给了我“cb=gapi.loaded_0:249 Uncaught TypeError: Cannot read property 'style' of null”。 gapi的错误发生在这里（至少我认为）：

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

这是我最初添加要呈现的登录按钮的方式：

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

【问题讨论】：

这不是错误发生的地方。在您的代码中某处必须有一个element.style，其中一些element 评估为null。无论如何，控制台中必须有脚本文件名和行号与错误指示错误发生的位置。

【参考方案1】：

我遇到了类似的问题，但我不确定它是否与您的问题完全相关。我在 html 中添加了按钮：

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

但我想根据 Google 的说明自定义按钮的呈现，所以我将平台脚本添加为：

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

具有以下加载功能：

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

我遇到了与您相同的错误：“未捕获的 TypeError：无法读取 null 的属性 'style'”。我的问题是我包含了以下属性： class="g-signin2" data-onsuccess="onSignIn" 一旦我取出这些属性并将按钮添加为：

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

然后错误消失了。似乎与您的问题非常相似。您可以尝试通过 onload 函数添加按钮。只是一个想法。您可以查看文档：https://developers.google.com/identity/sign-in/web/build-button

【参考方案2】：

这是一个gapi问题，请检查 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】：

我通过为每个登录按钮指定不同的 ID 来解决此问题。例如，您的注册页面和登录页面上可能有登录按钮。为按钮的每个实例赋予其自己的 ID。