Ionic Angular11集成Google登录报popup_closed_by_user错误求助

• 抛出的popup_closed_by_user报错并非用户主动关闭登录弹窗导致，核心原因是当前使用的angularx-social-login默认对接的是Google已经停止对新客户端支持的旧版身份认证库。所有2022年之后新建的Google OAuth 2.0客户端ID调用旧库时，会被Google鉴权服务直接拦截，最终抛出这个误导性错误。
• 控制台打印的类库弃用警告就是Google返回的拦截提示：旧版认证库仅对存量老客户端保留短期兼容，新创建的客户端无法通过旧鉴权流程完成登录。

方案1：升级依赖到适配新版GIS库的版本（改造成本最低） #

• 先卸载当前不再维护的旧版依赖：
  npm uninstall angularx-social-login
• 安装适配新版Google身份服务、且兼容Angular 11的版本（注意选择v11.x的大版本，避免高版本带来Angular核心依赖冲突）：
  npm install @abacritt/angularx-social-login@11.0.0

注意：原angularx-social-loginnpm包已停止维护，后续更新都迁移到@abacritt作用域下，旧包永远不会适配新版Google登录逻辑。

• 调整模块配置：
  1. 将原有代码中从旧包导入的SocialLoginModule、GoogleLoginProvider，全部替换为从@abacritt/angularx-social-login导入的同名模块与服务类
  2. 到Google Cloud控制台的OAuth客户端配置页，确认客户端类型为Web应用，将本地调试、生产环境对应的JavaScript来源地址（比如本地调试的http://localhost:8100、原生WebView对应的capacitor://localhost/ionic://localhost、生产域名）完整添加到「已授权的JavaScript来源」列表，地址不要带末尾斜杠、不要写错端口，不需要配置重定向URI。
  3. 参考如下示例调整模块提供者配置：

import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import { GoogleLoginProvider } from '@abacritt/angularx-social-login';

@NgModule({
  imports: [
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              '你申请的Google OAuth客户端ID',
              {
                oneTapEnabled: false, // Ionic环境下关闭一键登录，避免弹窗层级异常
                scopes: 'profile email'
              }
            )
          }
        ]
      } as SocialAuthServiceConfig
    }
  ]
})
export class AppModule {}

• 原有调用登录的业务代码不需要改动，socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID)的写法可以直接复用，重新编译运行后即可正常拉起登录弹窗，不会再出现类库弃用警告和虚假的弹窗关闭报错。

方案2：手动接入新版GIS SDK（适合需要自定义登录逻辑的场景） #

• 如果不想依赖第三方社交登录插件，可以直接在项目index.html中引入官方新版GIS客户端脚本，自行封装登录服务：调用google.accounts.oauth2.initTokenClient方法拉起授权弹窗，拿到access token后传给后端做鉴权校验即可。
• 注意如果用Capacitor打包为原生App，不要使用弹窗模式，要改用重定向模式配合自定义URL Scheme接收登录回调，避免系统WebView拦截弹窗。

• 如果升级依赖后仍然报错，先检查Google Cloud控制台中对应的OAuth客户端是否处于发布状态：测试状态下的客户端仅允许提前加入测试名单的账号登录，非测试账号触发登录时也会抛出类似弹窗关闭的错误。
• Ionic应用运行在原生WebView中时，要确保WebView开启了DOM存储权限，否则Google登录的临时状态无法留存，会出现弹窗拉起后立刻自动关闭的问题。
• 如果本地调试时出现跨域报错，优先核对已授权JavaScript来源列表的配置，域名、协议、端口必须和实际访问地址完全一致，多一个斜杠、错一个端口都会被Google拦截。

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