Angular OIDC认证问题排查：url无code及服务未找到报错

错误含义解释 #

• no code in url：你使用的是OAuth2授权码流程，正常情况下认证服务器（Auth0）在用户登录成功后，会重定向回你的Angular应用，并在URL中携带code参数，用于后续交换访问令牌。但当前因为授权请求失败，服务器返回的是error和error_description参数，导致checkAuth方法找不到预期的code，因此抛出该错误。

核心原因 #

从重定向错误信息Service not found: http://localhost:8080/可以明确：你在customParamsAuthRequest中配置的audience（即http://localhost:8080/）未在Auth0后台完成注册。Auth0要求所有传入的audience必须是预先在控制台注册过的API标识符，否则会拒绝授权请求。

解决步骤 #

1. 在Auth0控制台注册API #

• 登录Auth0控制台，进入APIs页面
• 点击Create API，填写以下信息：
  • 名称：自定义（比如YouTube Clone Backend）
  • 标识符：必须和你前端配置的一致，即http://localhost:8080/
  • 签名算法：选择RS256
• 保存配置

2. 修正前端Auth配置的细节问题 #

• 补全Authority地址：auth-config.module.ts中的authority必须是完整的HTTPS地址，修正为：

  authority: 'https://dev-i63rcznjs255jxgf.us.auth0.com/',
  

• 验证回调地址配置：进入Auth0控制台的Applications，找到你的应用（对应配置中的clientId），确保http://localhost:4200已添加到以下列表：
  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins

3. 修复Header组件的代码错误 #

header.component.ts中的ngOnInit方法调用有误，isAuthenticated是Observable类型，需要订阅获取状态：

ngOnInit(): void {
  this.oidcSecurityService.isAuthenticated$.subscribe(isAuth => {
    this.isAuthenticated = isAuth.toString();
  });
}

4. 重新测试流程 #

• 重启Angular应用，点击登录按钮
• 登录成功后，Auth0会重定向回http://localhost:4200并携带code参数，此时checkAuth方法能正常处理授权码，不会再出现no code in url错误

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