Angular 15集成@abacritt/angularx-social-login时谷歌登录弹窗自动弹出

问题说明 #

构建Angular 15应用集成谷歌登录功能时，页面一初始化就自动弹出账号选择弹窗，预期仅点击登录按钮时才触发弹窗。已在SocialAuthServiceConfig中设置autoLogin: false，但未生效。

提供的代码片段 #

服务配置代码 #

{
  provide: 'SocialAuthServiceConfig',
  useValue: {
    autoLogin: false,
    providers: [
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider(
          environment.googleLoginKey
        )
      },
      {
        id: FacebookLoginProvider.PROVIDER_ID,
        provider: new FacebookLoginProvider(
          environment.facebookLoginKey
        )
      }
    ],
    onError: (err) => {
      console.error(err);
    }
  } as SocialAuthServiceConfig
}

登录相关逻辑代码 #

this._externalAuthService.authState.subscribe((user) => {
  this.user = user;
  this.loggedIn = (user != null);
});

问题原因 #

1. 订阅authState触发自动会话检查：像angularx-social-login这类社交登录库，初始化时若检测到浏览器缓存的谷歌登录会话，会自动尝试恢复登录流程，进而弹出账号选择弹窗——哪怕设置了autoLogin: false，这个会话检查逻辑依然会触发。
2. 初始化阶段误触登录逻辑：若在组件初始化（比如ngOnInit）中无意中调用了登录相关方法，也会导致弹窗自动弹出。

解决办法 #

1. 修改谷歌登录提供者配置 #

在谷歌登录提供者的初始化参数中添加refreshToken: false，禁止自动恢复会话；可选添加prompt: 'select_account'，确保每次登录都需要手动选择账号：

{
  id: GoogleLoginProvider.PROVIDER_ID,
  provider: new GoogleLoginProvider(
    environment.googleLoginKey,
    {
      refreshToken: false,
      prompt: 'select_account'
    }
  )
}

2. 仅在点击按钮时触发登录流程 #

移除初始化阶段对authState的订阅，改为点击登录按钮时调用signIn方法，再处理登录结果：

// 登录按钮点击事件处理函数
loginWithGoogle() {
  this._externalAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).then(user => {
    this.user = user;
    this.loggedIn = true;
  }).catch(err => {
    console.error(err);
  });
}

对应模板中的按钮绑定：

<button (click)="loginWithGoogle()">谷歌登录</button>

3. 清除浏览器缓存的旧登录态 #

如果之前有过登录记录，浏览器缓存的凭证可能触发自动登录，可在组件初始化时先调用登出方法清除会话：

ngOnInit() {
  this._externalAuthService.signOut().then(() => {
    // 清除会话后的后续操作
  });
}

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