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

Posted 2023-03-27

【中文标题】如何使用 Keycloak 和 PKCE 流实现 React SPA 身份验证？

【英文标题】：How implement React SPA authentication with Keycloak and PKCE flow?

【发布时间】：2021-03-24 09:52:41

【问题描述】：

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

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

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

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

我想做什么：

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

【参考方案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 非常重要 推荐，以避免代码注入和代码重放攻击。

【讨论】：

是的，你的回答很有帮助，正是我所需要的。