如何使用 Keycloak 和 PKCE 流程实现 React SPA 身份验证？
How implement React SPA authentication with Keycloak and PKCE flow?
这是我第一次使用 Keycloak。我在我的本地机器上准备了一个 Keycloak 实例，我可以在其中创建领域、客户端等。
我找到了 React + Keycloak 的使用示例，但是 none 其中使用了 PKCE 流程。
我不知道如何配置 Keycloak 和 React。我只知道客户端应用程序必须能够生成代码验证器和代码挑战。
我正在寻找一个使用 React 和 Keycloak 实现授权的简单示例，它应该遵循 OAuth 2.0 Authorization Code Grant with PKCE Flow 或关于在 React 端做什么以及在 Keycloak 端做什么来实现 OAuth 的提示2.0.
我想做的事情：
- 设置 Keycloack 实例（就绪）
- 在 Keycloack 中注册 public 客户端（就绪）
- 在 Web 中实现一个简单的登录场景（该场景遵循 OAuth 2.0 授权代码授予和 PKCE 流程）
转到您的领域，然后转到客户端和 select 您的客户端：
- 将
Access Type设置为public
- 已启用
Standard Flow Enabled
- 添加适当的重定向 Uris
- 转到
Advanced Settings 并在字段 Proof Key for Code Exchange Code Challenge Method 和 select S256.
在您的 React 应用程序的适配器上添加“enable-pkce”：true。
来自 keycloak 文档：
The KeycloakInstalled adapter supports the PKCE [RFC 7636] mechanism
to provide additional protection during code to token exchanges in the
OIDC protocol. PKCE can be enabled with the "enable-pkce": true
setting in the adapter configuration. Enabling PKCE is highly
recommended, to avoid code injection and code replay attacks.
这是我第一次使用 Keycloak。我在我的本地机器上准备了一个 Keycloak 实例，我可以在其中创建领域、客户端等。
我找到了 React + Keycloak 的使用示例，但是 none 其中使用了 PKCE 流程。
我不知道如何配置 Keycloak 和 React。我只知道客户端应用程序必须能够生成代码验证器和代码挑战。
我正在寻找一个使用 React 和 Keycloak 实现授权的简单示例，它应该遵循 OAuth 2.0 Authorization Code Grant with PKCE Flow 或关于在 React 端做什么以及在 Keycloak 端做什么来实现 OAuth 的提示2.0.
我想做的事情：
- 设置 Keycloack 实例（就绪）
- 在 Keycloack 中注册 public 客户端（就绪）
- 在 Web 中实现一个简单的登录场景（该场景遵循 OAuth 2.0 授权代码授予和 PKCE 流程）
转到您的领域，然后转到客户端和 select 您的客户端：
- 将
Access Type设置为public - 已启用
Standard Flow Enabled - 添加适当的重定向 Uris
- 转到
Advanced Settings并在字段Proof Key for Code Exchange Code Challenge Method和 selectS256.
在您的 React 应用程序的适配器上添加“enable-pkce”：true。
来自 keycloak 文档：
The KeycloakInstalled adapter supports the PKCE [RFC 7636] mechanism to provide additional protection during code to token exchanges in the OIDC protocol. PKCE can be enabled with the "enable-pkce": true setting in the adapter configuration. Enabling PKCE is highly recommended, to avoid code injection and code replay attacks.