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

【问题标题】：How to configure OAuth Code flow wihout discovery如何在不发现的情况下配置 OAuth 代码流
【发布时间】：2022-02-11 20:25:08
【问题描述】：

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

【问题讨论】：

你使用什么样的身份提供者？
@SaschaLeh 它基于github.com/doorkeeper-gem/doorkeeper/wiki/…
据我所知，“发现文档”是OpenID Connect 协议的一部分，doorkeeper 只是实现了 OAuth2 标准。我认为您需要使用 OpenID Connect 扩展来扩展 doorkeeper 以使其工作。或使用Implicit Flowgithub.com/doorkeeper-gem/doorkeeper-openid_connect
@SaschaLeh 链接的 GitHub 存储库确实谈到了支持“授权代码”流程？不确定是否也支持 PKCE？
OP，您确定知名端点不在您的 IDS 中吗？ Doorkeeper repo has routes for the discovery document 好像是？ - 无论哪种方式，您都可以go through the relevant Angular code 查看您可以配置的确切字段，并选择与您的情况相关的字段。

标签： angular oauth-2.0 oauth angular-oauth2-oidc

【解决方案1】：

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

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

【讨论】：

【解决方案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();
  }

【讨论】：