Angular 14中如何编写Google登录的handleCredentialResponse回调函数

问题根源 #

Google 新版GSI登录脚本会在全局window对象里查找你设置的handleCredentialResponse回调，但你在Angular组件类里定义的方法属于类实例私有方法，不在全局作用域内，所以脚本找不到该函数，才会抛出报错。

一步步解决 #

1. 将组件方法挂载到全局window #

在login.component.ts中，先给window添加类型声明（避免TypeScript报错），再在组件初始化时把回调方法绑定到全局作用域：

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

// 告知TypeScript window对象上存在该回调函数
declare global {
  interface Window {
    handleCredentialResponse: (response: any) => void;
  }
}

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

  ngOnInit(): void {
    // 把组件实例的回调方法绑定到全局window，确保GSI脚本能找到
    window.handleCredentialResponse = this.handleCredentialResponse.bind(this);
  }

  ngOnDestroy(): void {
    // 组件销毁时删除全局变量，避免内存泄漏和全局变量冲突
    delete window.handleCredentialResponse;
  }

  // 实际处理Google登录回调的逻辑
  handleCredentialResponse(response: any): void {
    // 这里可以获取Google返回的凭证，比如解析id_token
    console.log("Google登录凭证: " + response.credential);
    // 后续可将凭证传给后端完成登录验证
  }
}

2. 确认HTML按钮配置正确 #

在login.component.html中，按钮的data-callback属性直接填写handleCredentialResponse即可，无需添加任何前缀：

<div id="g_id_onload"
     data-client_id="替换为你的Google客户端ID"
     data-callback="handleCredentialResponse"
     data-auto_prompt="false">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

3. 动态加载GSI脚本的注意事项 #

如果是动态加载GSI脚本，建议等脚本加载完成后再绑定回调，避免脚本先加载完成却找不到函数的情况：

ngOnInit(): void {
  // 创建GSI脚本标签
  const gsiScript = document.createElement('script');
  gsiScript.src = 'https://accounts.google.com/gsi/client';
  gsiScript.async = true;
  gsiScript.defer = true;
  
  // 脚本加载完成后再绑定回调函数
  gsiScript.onload = () => {
    window.handleCredentialResponse = this.handleCredentialResponse.bind(this);
  };
  
  document.body.appendChild(gsiScript);
}

关键说明 #

• bind(this)：必须添加，否则回调函数内的this不会指向组件实例，无法调用组件内的其他方法或访问属性。
• 销毁时清理全局变量：防止多次创建组件后出现全局变量冲突，同时避免内存泄漏。
• TypeScript全局声明：不加的话TypeScript会报错提示window对象不存在handleCredentialResponse属性。

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