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

Question

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

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

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

我正在寻找一个使用 react 和 Keycloak 实现授权的简单示例，它应该遵循 OAuth 2.0 Authorization Code Grant with PKCE Flow 或关于在 React 端做什么以及在 Keycloak 端实现 OAuth 2.0 的提示。

我想做什么：

1. 设置 Keyclock 实例（准备就绪）
2. 在 Keycloack 中注册公共客户端（准备就绪）
3. 在 Web 中实现一个简单的登录场景（该场景遵循 OAuth 2.0 Authorization Code Grant with PKCE Flow）

Answer 1

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

• 将Access Type 设置为public
• 启用Standard Flow Enabled
• 添加适当的重定向 Uris
• 转到Advanced Settings，在Proof Key for Code Exchange Code Challenge Method 字段中选择S256。

在你的 React 应用的适配器上添加 "enable-pkce": true。

来自 keycloak 文档：

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