如何使用 Angular 中的 Keycloak 检索代码验证器

Question

我正在尝试开发一个以 Angular 作为前端、Java 作为后端的应用程序。

我需要通过Keycloak登录，然后将收到的code发送到后台，生成token并存储在应用服务器的session中。

我正在使用 keycloak-angular 16.1.0 和 keycloak-js 25.0.6。

到目前为止，我使用此初始化成功将登录重定向到 Keycloak：

this.keycloak.init({
            config: {
                url: json.keycloakURL,
                realm: json.keycloakRealm,
                clientId: json.keycloakClientId,
            },
            initOptions: {
                checkLoginIframe: false,
                redirectUri: this.baseURI + '-angular/login',
                flow: 'standard', // Use Authorization Code Flow
                pkceMethod: 'S256' // PKCE for additional security
            },
            enableBearerInterceptor: true, // Automatically attach tokens to HTTP requests
            bearerPrefix: 'Bearer'
        });

然后，我使用以下方式登录：

this.keycloak.login({});

一切正常，我获取代码并将其发送到后端。但是，我还需要一个代码验证器，否则我会收到错误“未指定 PKCE 代码验证器”。

我当然想坚持尽可能的最大安全性，所以除非强制，否则我不想禁用代码验证。

有什么方法可以从 Angular 中的 keycloak 变量中检索此代码验证器吗？我是不是漏掉了什么重要的事情？

Answer 1

KeyCloak 不提供 PKCE 代码验证器。相反，它是您的客户端必须发送到 KeyCloak 的值。都是客户端生成的，如下图所示：

更多详细信息可以在这里找到：代码交换证明密钥（PKCE）