React Keycloak 示例项目教程

项目介绍

React Keycloak 示例项目是一个展示如何将 Keycloak 集成到 React 应用程序中的开源项目。该项目提供了多个示例，帮助开发者理解和实现基于 Keycloak 的身份验证和授权功能。通过这些示例，开发者可以学习如何在 React 应用中使用 Keycloak 进行用户认证和权限管理。

项目快速启动

环境准备

在开始之前，请确保您已经安装了以下工具：

• Node.js (版本 >= 18)
• Yarn 或 npm

克隆项目

首先，克隆项目到本地：

git clone https://github.com/react-keycloak/react-keycloak-examples.git
cd react-keycloak-examples

安装依赖

使用 Yarn 安装项目依赖：

yarn install

配置 Keycloak

在 src/keycloak.json 文件中配置您的 Keycloak 服务器信息：

{
  "realm": "your-realm",
  "url": "https://your-keycloak-server/auth",
  "clientId": "your-client-id"
}

启动应用

运行以下命令启动开发服务器：

yarn start

应用将在 http://localhost:3000 启动，您可以访问该地址查看示例应用。

应用案例和最佳实践

案例一：基本认证

在 src/examples/BasicExample.js 文件中，展示了如何使用 Keycloak 进行基本的用户认证。通过这个示例，您可以学习如何初始化 Keycloak 并处理用户登录和登出。

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak('/keycloak.json');

keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
  if (authenticated) {
    console.log('User is authenticated');
  } else {
    console.log('User is not authenticated');
  }
});

案例二：条件渲染

在 src/examples/ConditionalRendering.js 文件中，展示了如何根据用户的角色进行条件渲染。通过这个示例，您可以学习如何使用 Keycloak 的 hasResourceRole 方法来检查用户角色。

import React from 'react';
import { useKeycloak } from '@react-keycloak/web';

const ConditionalRendering = () => {
  const { keycloak } = useKeycloak();

  return (
    <div>
      {keycloak.hasResourceRole('admin') ? (
        <div>Admin Content</div>
      ) : (
        <div>User Content</div>
      )}
    </div>
  );
};

export default ConditionalRendering;

典型生态项目

项目一：React Router 集成

在 src/examples/ReactRouterExample.js 文件中，展示了如何将 Keycloak 与 React Router 集成。通过这个示例，您可以学习如何在路由切换时进行权限检查。

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { useKeycloak } from '@react-keycloak/web';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { keycloak } = useKeycloak();

  return (
    <Route
      {...rest}
      render={(props) =>
        keycloak.authenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
};

const App = () => {
  return (
    <Router>
      <PrivateRoute path="/protected" component={ProtectedComponent} />
    </Router>
  );
};

export default App;

项目二：自定义组件

在 src/examples/CustomComponents.js 文件中，展示了如何创建自定义组件来处理 Keycloak 的认证状态。通过这个示例，您可以学习如何封装 Keycloak 的逻辑以便在多个组件中复用。

import React from 'react';