Angularx-social-login谷歌登录重定向模式无法获取SocialUser对象

问题原因 #

当把谷歌登录的ux_mode设为redirect后，调用signIn方法会直接跳转到谷歌授权页面，当前页面的JS上下文会被销毁——这就导致原来的then回调根本不会执行，而且页面重定向回应用后，是全新的页面实例，之前的authState订阅也无法触发。必须在页面重新加载后手动处理谷歌返回的授权响应。

解决方案 #

1. 修正登录按钮逻辑 #

移除signIn的then回调，因为重定向后该回调永远不会执行：

// 登录按钮点击事件
onGoogleLogin(): void {
  this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
}

2. 在应用初始化时处理授权响应 #

在根组件（比如AppComponent）的ngOnInit中，同时订阅authState并尝试获取用户信息——这会自动处理重定向回来的授权码：

ngOnInit(): void {
  // 订阅authState，获取到用户后执行后续逻辑
  this.socialAuthService.authState.subscribe((user) => {
    if (user) {
      this.googleUser = user;
      this.handleAuthenticated();
    }
  });

  // 触发重定向响应的解析，若没有授权码会抛出错误，可忽略
  this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).catch(err => {
    console.log("无有效授权响应，用户未触发登录", err);
  });
}

3. 关键配置检查 #

• 确保谷歌开发者控制台中，你的OAuth 2.0客户端ID已添加正确的重定向URI（比如本地开发的http://localhost:4200，生产环境替换为实际域名）。
• 确认app.module.ts中的谷歌登录配置包含ux_mode: "redirect"，且scope设置正确：

const googleLoginOptions = {
  ux_mode: "redirect",
  scope: "openid email profile", // 替换为你的实际权限
  plugin_name: 'login' 
};

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