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

IT技术 javascript reactjs oauth-2.0 keycloak openid-connect
2021-05-23 18:55:54

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

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

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

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

我想做的事：

  1. 设置 Keycloack 实例（就绪）
  2. 在 Keycloack 中注册公共客户端（就绪）
  3. 在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 协议中的代码到令牌交换期间提供额外的保护。PKCE 可以通过适配器配置中的 "enable-pkce": true 设置启用。强烈建议启用 PKCE，以避免代码注入和代码重放攻击。

其它你可能感兴趣的问题
上一篇在 HTTPS 而不是 HTTP 中启动react应用程序 下一篇WASM reactmodule解析失败：未检测到魔术头