为了在之前创建的React API客户端中添加登录/登出认证功能，我准备创建一个新的React应用程序，并尝试使用Keycloak认证。

操作系统：苹果macOS 12.6.5

使用 Docker 架设 Keycloak

请使用以下命令来创建。

% docker run -d -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin --name keycloak jboss/keycloak

创建领域

创建用户

客户创建

创建React应用

我要创建一个名为keycloak-react20230414的新React应用程序。

% npx create-react-app keycloak-react20230414
% yarn start

进行各种安装。

% yarn add keycloak-js @react-keycloak/web react-router-dom

我将更新/创建以下文件的代码（Github代码存储库：qiita20230415d）
– App.js
– Keycloak.js（将其与创建的realm和clientId的名称相匹配）
– Nav.js

我会执行。按下按钮后，您可以登录/注销。

% yarn start

辛苦之处

当执行时，应用重复访问Keycloak服务器并进入了一个循环。
经过调查发现，这是在React 18及更高版本中发生的现象，通过在index.js中删除StrictMode来解决问题。
参考资料1、参考资料2

以後

我希望在之前创建的React API客户端中添加此次创建的登录/注销身份验证功能。

请你提供中文的原生版本。

・React中实现Keycloak身份验证的方法
– 在单击链接时，只有在已验证身份的情况下才会跳转到链接的目标页面。
– keycloak或React或NestJS
– 由于keycloak是通过钩子(hook)提供的，因此可以通过useKeycloak()进行调用。
– 由于初始化需要一些时间，因此可以通过显示加载提示符来等待初始化完成。
– 显示初始化加载提示符的示例代码
– 使用Docker快速设置Keycloak和SAML验证环境
– 在M1 Mac (arm64) 上启动 jboss/keycloak 容器
– 使用Docker和Keycloak指定访问令牌来执行API调用
– 使用Keycloak的授权功能（OAuth2范围）
– 暂时更改Keycloak登录页面的主题背景
– 使用Keycloak在API Gateway上限制API访问
– 视频：2022-3-12 Keycloak API授权入门
– 如何为React应用程序提供Keycloak身份验证
OpenID Connect (OIDC) 是OAuth 2.0的扩展认证协议。OAuth 2.0只是一个构建授权协议的框架，主要是不完整的，而OIDC是一个完整的认证和授权协议。
OIDC还广泛使用了Json Web Token (JWT)一系列标准。这些标准定义了一种身份令牌的JSON格式，以及以紧凑且适合Web的方式对数据进行数字签名和加密的方法。