Angular中Google Sign-In的data-callback无法识别TypeScript函数

问题根源 #

Google Sign-In的data-callback属性只会查找全局window对象上的函数，而你在Angular组件中定义的onSignInGoogle属于组件内部作用域，并没有暴露到全局，因此会触发「回调不是函数」的错误。

正确实现方案 #

方案一：将组件方法绑定到全局window对象 #

在组件的生命周期钩子中，把组件方法挂载到window上，同时保留组件的this指向，确保回调能正常访问组件内的其他逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    // 绑定组件方法到全局window，箭头函数保留this指向
    (window as any).onSignInGoogle = (googleUser: any) => this.onSignInGoogle(googleUser);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除全局绑定，避免内存泄漏
    delete (window as any).onSignInGoogle;
  }

  onSignInGoogle(googleUser): void {
    console.log("onSignInGoogle has been called");
    // 处理Google登录逻辑，例如获取用户基础信息
    const profile = googleUser.getBasicProfile();
    console.log('用户ID: ' + profile.getId());
    console.log('用户名: ' + profile.getName());
  }
}

HTML代码保持不变：

<div id="g_id_onload" data-client_id="your_client_id" data-callback="onSignInGoogle" class="mt-3"></div>
<div class="g_id_signin" data-type="standard"></div>

方案二：手动初始化Google Sign-In SDK（推荐） #

跳过data-callback的全局函数依赖，直接通过JS SDK手动初始化，指定组件内的回调方法，更符合Angular的封装逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';

// 声明全局google变量，避免TypeScript报错
declare var google: any;

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
  private authInstance: any;

  ngOnInit(): void {
    // 初始化Google Sign-In
    this.authInstance = google.accounts.id.initialize({
      client_id: 'your_client_id',
      callback: (googleUser: any) => this.onSignInGoogle(googleUser)
    });
    // 渲染登录按钮到指定容器
    google.accounts.id.renderButton(
      document.getElementById('google-signin-container'),
      { theme: 'outline', size: 'large' }
    );
  }

  ngOnDestroy(): void {
    // 组件销毁时清理授权实例
    if (this.authInstance) {
      this.authInstance.disconnect();
    }
  }

  onSignInGoogle(googleUser): void {
    console.log("onSignInGoogle has been called");
    // 处理登录逻辑
  }
}

对应的HTML只需提供按钮容器：

<div id="google-signin-container" class="mt-3"></div>

关键注意事项 #

• 组件销毁时必须移除全局绑定或清理授权实例，防止内存泄漏。
• 使用(window as any)是TypeScript的临时类型断言，用于绕开自定义全局属性的类型检查，属于安全操作。
• 确保已在项目的index.html中正确加载Google Sign-In SDK脚本：

<script src="https://accounts.google.com/gsi/client" async defer></script>

内容的提问来源于stack exchange，提问作者Enrico Cortinovis