如何使用Keycloak和PKCE流程实现React SPA身份验证？

Question

这是我第一次使用 Keycloak。我在本地计算机上准备了一个 Keycloak 实例，可以在其中创建领域、客户端等。

我找到了React + Keycloak的使用示例，但没有一个使用PKCE流程。

我不知道如何配置Keycloak和React。我只知道客户端应用程序必须能够生成代码验证器和代码质询。

我正在寻找一个使用 React 和 Keycloak 实现授权的简单示例，该示例应遵循带有 PKCE 流程的 OAuth 2.0 授权代码授予，或者有关在 React 端执行哪些操作以及在 Keycloak 端执行哪些操作以实现 OAuth 2.0 的提示。

我想做的事：

1. 设置 Keycloack 实例（就绪）
2. 在 Keycloack 中注册公共客户端（准备就绪）
3. 在 Web 中实现一个简单的登录场景（该场景遵循 OAuth 2.0 授权代码授予和 PKCE 流程）

Answer 1

（旧的 Keycloak 用户界面）

转到您的领域，然后转到客户端并选择您的客户端：

• 设置Access Type​public
• 启用Standard Flow Enabled
• 添加适当的Valid redirect URIs和Web origins
• 转至Advanced Settings并在字段中Proof Key for Code Exchange Code Challenge Method进行选择S256，然后单击Save。

（新的Keycloak UI）

选择您的领域，然后转到客户端并单击您的客户端：

• 设置Client authentication​OFF
• 在Authentication Flow选择中Standard flow
• 添加适当的Valid redirect URIs和Web origins
• 点击Save按钮
• 转到Advanced选项卡
• 转至该部分Advanced Settings 并在字段中Proof Key for Code Exchange Code Challenge Method选择S256，然后单击Save。

在 React 应用程序的适配器上添加“enable-pkce”：true。

来自 keycloak 文档：

KeycloakInstalled 适配器支持 PKCE [RFC 7636] 机制，以在 OIDC 协议中的代码到令牌交换期间提供额外的保护。可以使用适配器配置中的“enable-pkce”：true 设置来启用 PKCE。强烈建议启用 PKCE，以避免代码注入和代码重放攻击。