Angular15中angular-oauth2-oidc的loadDiscoveryDocumentAndLogin返回false问题

一、先修复代码中的语法错误 #

你的environment.ts存在语法问题，直接导致配置读取失败：

• 所有中文单引号（‘）替换为英文单引号（'），比如clientId: ‘myClient ID',改为clientId: 'myClient ID',
• 补全缺失的单引号：oauthDomainURL: myoAuthDomain.com',改为oauthDomainURL: 'myoAuthDomain.com',
• 修正双斜杠错误：postLogoutRedirectUri: 'http://localhost:4200//logout',改为postLogoutRedirectUri: 'http://localhost:4200/logout',

二、修正AuthConfig关键配置 #

以下配置缺失或不合理，是导致loadDiscoveryDocumentAndLogin()返回false的核心原因：

1. 动态设置HTTPS要求：本地开发用HTTP，需根据环境切换requireHttps：

   // environment.ts
   requireHttps: environment.profile !== 'TEST', // TEST环境关闭HTTPS校验
   

2. 开启登录后清除Hash：避免URL中残留的token信息干扰后续流程：

   // Appconstants.ts的authConfig中添加
   clearHashAfterLogin: true,
   

3. 手动指定发现文档地址（可选）：如果Issuer自动发现失败，直接配置OpenID发现文档URL：

   // Appconstants.ts的authConfig中添加
   discoveryDocumentUrl: 'https://myIssuer.com/.well-known/openid-configuration',
   

三、重构登录逻辑 #

原代码中loadDiscoveryDocumentAndLogin()后重复调用tryLogin()，导致流程混乱。loadDiscoveryDocumentAndLogin()本身已包含加载发现文档→尝试从URL取token→未登录则跳转授权页的完整逻辑，无需额外调用tryLogin()。修改后的login()方法：

async login() {
  this.oAuthService.configure(authConfig);
  this.oAuthService.tokenValidationHandler = new JwksValidationHandler();

  try {
    const isLoggedIn = await this.oAuthService.loadDiscoveryDocumentAndLogin();
    if (isLoggedIn) {
      if (this.oAuthService.hasValidIdToken()) {
        const userClaim = this.oAuthService.getIdentityClaims();
        if (userClaim) {
          sessionStorage.setItem('token', this.oAuthService.getAccessToken());
          // 登录成功后可跳转到目标页面，比如dashboard
          // this.router.navigate(['/dashboard']);
        }
      }
    } else {
      // 未登录则初始化隐式授权流
      this.oAuthService.initImplicitFlow();
    }
  } catch (err) {
    console.error('登录流程出错:', err);
  }
}

四、Angular 15 OAuth2 标准配置步骤 #

1. 安装依赖

   npm install angular-oauth2-oidc angular-oauth2-oidc-jwks --save
   

2. 配置AuthConfig
   • 必填参数：issuer（授权服务器地址）、clientId（客户端ID）、redirectUri（登录回调地址）、scope（权限范围，比如openid profile email）
   • 可选优化：clearHashAfterLogin: true、requireHttps（根据环境动态设置）、discoveryDocumentUrl（手动指定发现文档）
3. 初始化OAuthService
   在根组件或路由守卫中配置服务，设置tokenValidationHandler，调用loadDiscoveryDocumentAndLogin()启动流程
4. 登录状态校验
   使用this.oAuthService.hasValidAccessToken()或this.oAuthService.hasValidIdToken()判断用户是否登录
5. 路由守卫
   为需要登录的路由添加守卫，未登录时自动跳转授权页

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