Angular授权码流程：如何用angular-oauth2-oidc拦截授权响应对接后端？

要实现拦截授权响应、转发code到后端处理的需求，核心是禁止库自动执行授权码换令牌的步骤，改为手动处理回调参数，具体操作如下：

1. 调整OAuth配置 #

修改AuthConfig，确保启用授权码流程，同时阻止库自动发起令牌交换请求：

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  clientId: '你的Google客户端ID',
  redirectUri: `${window.location.origin}/auth-callback`,
  responseType: 'code', // 明确使用授权码流程
  scope: 'openid email profile',
  skipIssuerCheck: true, // 跳过Google Issuer的严格检查
  disableAtHashCheck: true, // Google不返回at_hash，需禁用检查
  extraQueryParams: {
    access_type: 'offline', // 要求返回刷新令牌
    prompt: 'consent' // 强制用户确认授权，确保能获取到refresh_token
  },
  // 不配置tokenEndpoint，避免库自动调用令牌接口
};

2. 手动触发登录流程 #

不要使用库自带的loadDiscoveryDocumentAndLogin()，改为手动加载Google的OpenID发现文档，再触发登录：

import { OAuthService } from 'angular-oauth2-oidc';

constructor(private oauthService: OAuthService) {
  this.oauthService.configure(authConfig);
  // 加载Google的OpenID配置文档
  this.oauthService.loadDiscoveryDocument('https://accounts.google.com/.well-known/openid-configuration')
    .catch(err => console.error('加载发现文档失败', err));
}

// 登录按钮触发的方法
login(): void {
  this.oauthService.initLoginFlow();
}

3. 在回调页拦截并处理授权响应 #

创建一个回调组件（比如AuthCallbackComponent），从URL中提取code和state，验证state合法性后转发到后端：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-auth-callback',
  template: '<p>处理授权中...</p>'
})
export class AuthCallbackComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private oauthService: OAuthService,
    private http: HttpClient
  ) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const code = params['code'];
      const state = params['state'];

      // 验证state有效性，防止CSRF攻击
      if (this.oauthService.validateState(state)) {
        // 发送code到后端API
        this.http.post('/api/auth/exchange-code', { code, state })
          .subscribe({
            next: (res: any) => {
              // 将后端返回的令牌注入oauthService
              this.oauthService.setAccessToken(res.accessToken);
              if (res.idToken) {
                this.oauthService.setIdToken(res.idToken);
              }
              // 设置令牌过期时间
              this.oauthService.setExpirationDate(new Date(Date.now() + res.expiresIn * 1000));

              // 跳转到登录前的目标页面（或首页）
              const targetUrl = this.oauthService.state || '/';
              window.location.href = targetUrl;
            },
            error: (err) => {
              console.error('授权码交换失败', err);
              window.location.href = '/login-failed';
            }
          });
      } else {
        console.error('无效的state参数，可能存在CSRF风险');
        window.location.href = '/login-failed';
      }
    });
  }
}

4. 后端处理逻辑提示 #

后端收到code后，需要携带Google客户端密钥发起请求，换取令牌：

• 请求地址：https://oauth2.googleapis.com/token
• 请求参数：
  • code: 前端传来的授权码
  • client_id: 你的Google客户端ID
  • client_secret: 你的Google客户端密钥
  • redirect_uri: 和前端配置一致的回调地址
  • grant_type: authorization_code
• 成功获取access_token、refresh_token后，将refresh_token存入数据库，仅返回access_token、id_token、expires_in给前端。

5. 后续刷新令牌的处理 #

由于刷新令牌存在后端，前端需要刷新令牌时，调用后端的刷新接口，后端使用存储的refresh_token向Google请求新的access_token，再返回给前端，前端更新oauthService中的令牌即可。

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