Angular11使用angularx-social-login实现谷歌登录如何获取authorizationCode

问题原因 #

默认angularx-social-login的GoogleLoginProvider默认走隐式授权流，仅提取返回的accessToken，不会暴露授权码（authorizationCode），且你的现有配置缺少必选参数，导致无法触发授权码返回逻辑。

解决步骤 #

第一步：调整基础配置 #

补充必填的授权参数，关闭自动登录（自动登录场景下无法获取首次授权的授权码）：

{
  provide: 'SocialAuthServiceConfig',
  useValue: {
    autoLogin: false,
    providers: [
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider(CLIENT_ID, {
          response_type: 'code',
          access_type: 'offline',
          prompt: 'consent', // 强制用户重新同意授权，确保返回授权码和刷新令牌
          redirect_uri: window.location.origin, // 必须和谷歌云控制台配置的授权重定向URI完全一致
          scope: 'openid email profile' // 按需补充你需要的权限范围
        }),
      },
    ],
   } as SocialAuthServiceConfig,
}

第二步：扩展GoogleLoginProvider获取授权码 #

默认返回的SocialUser对象不包含授权码字段，需要自定义扩展Provider提取返回的授权码：

import { GoogleLoginProvider, SocialUser } from 'angularx-social-login';

// 自定义谷歌登录Provider
export class CustomGoogleLoginProvider extends GoogleLoginProvider {
  async signIn(): Promise<SocialUser & { authorizationCode: string }> {
    const baseResult = await super.signIn();
    let authorizationCode = '';
    // 重定向模式从URL参数提取code
    if (window.location.search.includes('code=')) {
      const urlParams = new URLSearchParams(window.location.search);
      authorizationCode = urlParams.get('code') || '';
    } else {
      // 弹窗模式直接从授权响应提取code
      authorizationCode = (baseResult as any).code || '';
    }
    return { ...baseResult, authorizationCode };
  }
}

第三步：替换配置中的默认Provider #

将配置里的GoogleLoginProvider替换为你自定义的CustomGoogleLoginProvider即可。

第四步：调用登录获取授权码 #

import { SocialAuthService } from 'angularx-social-login';

constructor(private socialAuthService: SocialAuthService) {}

handleGoogleLogin() {
  this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).then((user: any) => {
    // 此处即可获取到需要的授权码
    console.log({ code: user.authorizationCode });
    // 后续将授权码传给后端，交换accessToken和refreshToken即可
  })
}

注意事项 #

• 谷歌云控制台的OAuth同意屏幕必须处于已发布状态，测试状态下授权码有效期仅1小时，刷新令牌仅能使用5次
• 授权码仅可使用一次，使用后立即失效，必须传给后端进行令牌交换
• 若需要每次登录都返回刷新令牌，必须保留prompt: 'consent'参数

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