Angular 中 PKCE 的授权代码流与 angular-oauth2-oidc

Question

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

如果您点击 link，它表示您将通过此配置使用 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...

Answer 1

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

Answer 2

另一种方法是基于您的身份颁发者配置。如果它设置 require pkce 为真，你就没有问题了

Answer 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 {}

Angular 中 PKCE 的授权代码流与 angular-oauth2-oidc

Authorization Code Flow with PKCE in Angular with angular-oauth2-oidc

angular

oauth-2.0

pkce

angular-oauth2-oidc

authenticationchallenge