如何在不发现的情况下配置 OAuth 代码流

Question

这是我第一次尝试使用 OAuth。我正在使用 Angular 13 + angular-oauth2-oidc 库，我正在尝试配置代码流。我的问题是，在教程中默认使用发现文档，但我的身份验证服务器没有类似的东西，所以当在开始应用程序中询问 identity_provider_url/.well-known/openid-configuration 时，我收到 404 错误。问题是如何在不从 auth 服务器加载发现文档的情况下配置代码流？我只找到 implicit flow 没有发现文档的配置。这就是我的代码现在的样子：

auth.config.ts

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

export const authCodeFlowConfig: AuthConfig = {
  // Url of the Identity Provider
  issuer: '**************', // identity provider URL,
  redirectUri: window.location.origin + '/index.html',
  clientId: 'spa',
  dummyClientSecret: 'secret',
  responseType: 'code',
  scope: 'read, write',
  showDebugInformation: true,
};

app.component.ts

import {Component} from '@angular/core';
import {authCodeFlowConfig} from './sso.confiig';
import {OAuthService} from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'sso';

  constructor(private oAuthService: OAuthService) {
    this.oAuthService.configure(authCodeFlowConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin(); // I don`t want this
  }
}

login.component.ts

import {Component, OnInit} from '@angular/core';
import {OAuthErrorEvent, OAuthService} from 'angular-oauth2-oidc';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private oAuthService: OAuthService) {
    this.oAuthService.events.subscribe(e => (e instanceof OAuthErrorEvent) ? console.error(e) : console.warn(e));
  }

  public async login(): Promise<void> {
    await this.oAuthService.initCodeFlow();
  }

  public logout(): void {
    this.oAuthService.logOut();
  }

  public get userName() {
    let claims = this.oAuthService.getIdentityClaims();
    if (!claims) return null;
    return claims;
  }
}

Answer 1

查看 AuthConfig class 并尝试将 loginUrl 设置为授权端点并显式设置令牌端点。看看这是否会给您带来不同的错误。

一个好的库应该允许您明确设置端点。例如，几年前我的一个 SPA 无法与 Azure AD 一起使用，因为它不允许对令牌端点的 CORS 请求。我通过在 oidc client library 中设置一个令牌端点指向一个 API 来解决这个问题，这样我就可以从那里调用令牌端点。

Answer 2

扩展 auth.config 关于额外的 loginUrl 和 tokenUrl 解决了这个问题。

这是我的配置文件的最终版本：

export const OAUTH_CONFIG: AuthConfig = {
  issuer: environment.identityProviderBaseUrl,
  loginUrl: environment.identityProviderLoginUrl,
  logoutUrl: environment.identityProviderLogoutUrl,
  redirectUri: environment.identityProvideRedirectUrl,
  tokenEndpoint: environment.identityProviderTokenUrl,
  clientId: environment.clientId,
  dummyClientSecret: environment.clientSecret,
  responseType: 'code',
  requireHttps: false,
  scope: 'write',
  showDebugInformation: true,
  oidc: false,
  useIdTokenHintForSilentRefresh: false
};

当然，我们应该记得删除 loadDiscoveryDocumentAndTryLogin() .

  public configureCodeFlow(): void {
    this.authService.configure(OAUTH_CONFIG);
    this.authService.setupAutomaticSilentRefresh(undefined, 'access_token');
    this.authService.tryLoginCodeFlow();
  }

如何在不发现的情况下配置 OAuth 代码流

How to configure OAuth Code flow wihout discovery

oauth

oauth-2.0

angular

angular-oauth2-oidc