使用 Angular-oauth2-oidc 在 Angular 中使用 PKCE 的授权代码流答案

【问题标题】：Authorization Code Flow with PKCE in Angular with angular-oauth2-oidc使用 Angular-oauth2-oidc 在 Angular 中使用 PKCE 的授权代码流
【发布时间】：2021-05-12 01:08:26
【问题描述】：

我想在我的 Angular SPA 中使用带有 PKCE 的代码流，为了方便我使用这个库：angular-oauth2-oidc

如果您单击链接，则表示通过此配置您将使用带有 PKCE 的代码流：

let authConfig: AuthConfig = {
      issuer: 'https://myIssuerURL.com',
      redirectUri: 'https://myRedirectURI.com',
      clientId: environment.myclientId,
      scope: 'openid',
      responseType: 'code',
      showDebugInformation: true,
    };

当用户点击登录时，我用这个命令初始化流程：

this.oauthService.initCodeFlow();

这可行，我收到了访问权和 ID 令牌，但我如何确定我使用的是带有 PKCE 的代码流，而不仅仅是没有 PKCE 的普通代码流？代码挑战和验证器的创建和存储是否都由库为我处理？有没有办法停止进程并查看授权码或代码挑战？

这可能是一个奇怪的问题，但我只是想确定它使用的是 PKCE...

【问题讨论】：

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

【解决方案1】：

我很确定它确实如此 - 确定的方法是跟踪网络消息并在授权重定向中查找 code_challenge 和 code_challenge_method 参数。请参阅我的OAuth SPA Messages Page 的第 4 步和第 8 步，了解它的外观。

【讨论】：

【解决方案2】：

另一种方法是基于您的身份颁发者配置。如果它设置要求 pkce 为真，那么你就清楚了

【讨论】：

【解决方案3】：

import { NgModule } from '@angular/core';
import { AuthModule } from 'angular-auth-oidc-client';


@NgModule({
    imports: [AuthModule.forRoot({
        config: {
            authority: 'https://login.microsoftonline.com/v2.0',
            //authWellknownEndpoint: 'https://login.microsoftonline.com/common/v2.0',
            redirectUrl: window.location.origin,
            clientId: '',
            scope: 'openid profile offline_access email', // 'openid profile offline_access ' + your scopes
            responseType: 'code',
            silentRenew: true,
            useRefreshToken: true,
            maxIdTokenIatOffsetAllowedInSeconds: 600,
            issValidationOff: false,
            autoUserInfo: false,
            customParamsAuthRequest: {
              prompt: 'consent', // login, consent
            },
    }
      })],
    exports: [AuthModule],
})
export class AuthConfigModule {}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。