如何配置OAuth代码流清除发现

Question

这是我第一次尝试使用OAuth。我正在使用角13 + 角-OAuth2-oidc库，并试图配置代码流。我的问题是，在教程中，发现文档是默认使用的，但是我的auth服务器没有这样的功能，所以在这个请求identity_provider_url/.well-known/openid-configuration的应用程序中，我得到了一个404错误。问题是如何配置代码流而不从auth服务器加载发现文档？我只为隐式流找到了没有发现文档的配置。这就是我的代码现在的样子：

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类，尝试将loginUrl设置为授权端点，并显式设置令牌端点。看看这是否会给您带来不同的错误。

一个好的库应该允许您显式地设置端点。例如，几年前，我的SPA没有使用Azure AD，因为它不允许对令牌端点进行CORS请求。为此，我将oidc客户端库中的令牌端点设置为指向API，以便从那里调用令牌端点。

Answer 2

扩展auth.config关于附加loginUrl和tokenUrl解决了这个问题。

这是我的配置文件的finall版本：

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();
  }