Angular PKCE Auth0应用GitHub认证后无法跳转至指定redirectUri

核心问题排查与修复步骤 #

1. 确认GitHub OAuth应用回调URL配置完全匹配 #

登录GitHub后台，进入「Settings > Developer settings > OAuth Apps」找到你的应用，确保Authorization callback URL与代码中redirectUri（即https://wbidmaxapp.com）完全一致：

• 必须包含完整协议（https/http）
• 域名、路径完全匹配，不能多/少斜杠，大小写一致

2. 修复代码中URL参数拼接错误 #

你的authService.ts里构造授权URL时用了HTML实体&，在JavaScript字符串中应直接用&，否则会导致参数解析异常：

// 修改前
const url =
  `${authorizationEndpoint}?` +
  `response_type=${responseType}` +
  `&redirect_uri=${encodeURIComponent(redirectUri)}` +
  `&scope=${encodeURIComponent(scope)}` +
  `&code_challenge=${encodeURIComponent(codeChallenge)}` +
  `&code_challenge_method=S256` +
  `&state=${state}`;

// 修改后
const url =
  `${authorizationEndpoint}?` +
  `response_type=${responseType}` +
  `&redirect_uri=${encodeURIComponent(redirectUri)}` +
  `&scope=${encodeURIComponent(scope)}` +
  `&code_challenge=${encodeURIComponent(codeChallenge)}` +
  `&code_challenge_method=S256` +
  `&state=${state}`;

3. 配置Angular路由处理回调并完成Token交换 #

GitHub认证成功后会跳转至redirectUri，如果该路径没有对应路由或未处理回调参数，会触发404。需添加回调路由与处理逻辑：

步骤1：添加回调路由

在app-routing.module.ts中配置对应路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthCallbackComponent } from './auth-callback/auth-callback.component'; // 新建组件

const routes: Routes = [
  // 其他现有路由
  { path: '', component: AuthCallbackComponent } // 若redirectUri是根路径，直接用此；若为/callback则path设为'callback'
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：在回调组件中处理Token交换

在AuthCallbackComponent中实现参数解析与Token交换：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styleUrls: ['./auth-callback.component.css']
})
export class AuthCallbackComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit(): void {
    const code = this.route.snapshot.queryParamMap.get('code');
    const state = this.route.snapshot.queryParamMap.get('state');
    const storedState = sessionStorage.getItem('authState'); // 需在发起认证时把state存入sessionStorage
    const codeVerifier = sessionStorage.getItem('codeVerifier');

    // 验证state防止CSRF攻击，确保参数完整
    if (code && state === storedState && codeVerifier) {
      this.exchangeToken(code, codeVerifier);
    } else {
      // 参数异常，跳转至错误页或首页
      this.router.navigate(['/']);
    }
  }

  private exchangeToken(code: string, codeVerifier: string): void {
    const tokenEndpoint = 'https://github.com/login/oauth/access_token';
    const clientId = '你的GitHub OAuth客户端ID'; // 从GitHub应用后台获取

    fetch(tokenEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      body: new URLSearchParams({
        client_id: clientId,
        redirect_uri: 'https://wbidmaxapp.com',
        code: code,
        code_verifier: codeVerifier,
        grant_type: 'authorization_code'
      })
    })
    .then(res => res.json())
    .then(data => {
      // 保存Token到存储
      sessionStorage.setItem('githubAccessToken', data.access_token);
      // 跳转至目标页面（如首页）
      this.router.navigate(['/']);
    })
    .catch(err => {
      console.error('Token交换失败:', err);
      this.router.navigate(['/']);
    });
  }
}

步骤3：完善认证发起时的State存储

在authService.ts的initiallogin方法中，将生成的state存入sessionStorage：

// 生成state后添加
sessionStorage.setItem('authState', state);

4. 若使用Auth0集成GitHub，需调整认证端点 #

你提到用了Auth0配置PKCE且GitHub为认证提供商，正确做法是通过Auth0的授权端点发起认证，而非直接调用GitHub接口。修改authService.ts的authorizationEndpoint为Auth0的端点：

const authorizationEndpoint = 'https://你的Auth0域名.us.auth0.com/authorize';

并添加connection=github参数指定使用GitHub登录，同时确保Auth0后台已配置GitHub为身份提供商，且回调URL与代码中redirectUri一致。

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