首页
/ React Keycloak 示例项目教程

React Keycloak 示例项目教程

2024-08-27 17:47:27作者:秋阔奎Evelyn

项目介绍

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';
登录后查看全文
热门项目推荐