Angular集成Google登录时data-onsuccess未触发onSignIn()函数问题

Google登录的data-onsuccess属性会直接在全局window对象中查找指定的函数，但你的onSignIn是定义在Angular组件类内部的方法——Angular组件的方法默认被封装在组件实例的局部作用域里，并不会暴露到全局window，所以Google的脚本根本找不到这个函数，自然无法触发。

这种方式更符合Angular的组件化思想，避免全局作用域污染，步骤如下：

1. 修改脚本加载逻辑，添加加载完成回调
   我们需要在Google平台脚本加载完成后，手动调用gapi.signin2.render方法来初始化登录按钮，并直接绑定组件内的onSignIn方法：

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

// ... 组件类实现OnInit和OnDestroy接口

ngOnInit() { 
  this.loadScript('https://apis.google.com/js/platform.js').then(() => {
    // 脚本加载完成后，手动渲染登录按钮
    gapi.signin2.render('google-signin-button', {
      'scope': 'profile email', // 按需添加需要的权限范围
      'width': 240,
      'height': 50,
      'longtitle': true,
      'theme': 'dark',
      'onsuccess': (googleUser) => this.onSignIn(googleUser) // 直接绑定组件内的方法
    });
  }).catch(err => {
    console.error('加载Google登录脚本失败:', err);
  }); 
} 

// 把loadScript改成返回Promise的形式，方便处理加载完成事件
public loadScript(url: string): Promise<void> { 
  return new Promise((resolve, reject) => {
    const body = document.body as HTMLDivElement; 
    const script = document.createElement('script'); 
    script.src = url; 
    script.async = true; 
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`加载脚本 ${url} 失败`));
    body.appendChild(script); 
  });
}

2. 修改HTML中的登录按钮标签
   去掉原来的data-onsuccess属性，给按钮一个唯一ID，供gapi.signin2.render定位：

<div id="google-signin-button"></div>

3. 添加TypeScript类型支持（可选但推荐）
   为了避免TypeScript报错找不到gapi对象，安装对应的类型定义：

npm install @types/gapi @types/gapi.auth2 --save-dev

如果你想保留原来的HTML按钮写法，可以临时把组件的onSignIn方法挂载到全局window对象，但要注意在组件销毁时清理，避免内存泄漏：

ngOnInit() {
  // 将组件的onSignIn方法挂载到全局window
  (window as any).onSignIn = (googleUser) => this.onSignIn(googleUser);
  this.loadScript('https://apis.google.com/js/platform.js');
}

ngOnDestroy() {
  // 组件销毁时移除全局方法，防止全局污染和内存泄漏
  delete (window as any).onSignIn;
}

这种方法虽然简单，但会污染全局作用域，不推荐在大型项目中使用。

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