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

问题描述

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

This is my first time working with Keycloak. I have prepared a Keycloak instance in my local machine in which I can create realm's, clients etc.

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

I found React + Keycloak examples of use, but none of them used PKCE flow.

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

I don't know how to configure Keycloak and React. I only know that the client application must be able to generate a code verifier and a code challenge.

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

I am looking for a simple example of implementing authorization using react and Keycloak which should follow the OAuth 2.0 Authorization Code Grant with PKCE Flow or tips on what to do on the React side and what on the Keycloak side to implement OAuth 2.0.

我想做什么:

1. 已准备好设置Keycloack实例
2. 在Keycloack中注册公共客户端(就绪)
3. 在网络中实现简单的登录方案(该方案遵循带有PKCE Flow的OAuth 2.0授权代码授予)

推荐答案

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

Go to your Realm, and then to client and select your client:

• 将访问类型设置为 public
• 已启用已启用标准流
• 添加适当的重定向尿素
• 转到高级设置，然后在代码交换代码质询方法的证明密钥字段中，选择 S256 .

• Set Access Type to public
• Enabled Standard Flow Enabled
• Add the appropriate Redirect Uris
• Go to Advanced Settings and in the field Proof Key for Code Exchange Code Challenge Method and select S256.

在您的React应用程序的适配器上添加"enable-pkce":true.

On the adaptor of your React application add "enable-pkce": true.

从密钥斗篷文档中:

这篇关于如何使用Keycloak和PKCE流实现React SPA身份验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！