@batoanng/oidc (韩语)

@batoanng/oidc 包装 react-oidc-context 包含路由器-意识回调路由,共享授权上下文,登录后浓缩帮助器,以及反应单页应用程序的即时认证状态屏幕.

特征

• 环绕 react-oidc-context 包括登录、登录和过期密码路由.
• 显示共享授权上下文 useOidcAuthorisationContext, (中文(简体) ), useChallenge,以及 useChallengeResult。 。 。 .
• 提供 OidcAuthorisationCallback 用于登录后配置和特权加载.
• 可以给一个轴线客户端 Authorization 头和单个无声再试 401。 。 。 .
• 船舶重置密码、错误和状态显示屏 @batoanng/mui-components。 。 。 .

安装

pnpm add @batoanng/oidc

同伴依赖关系包括 react, (中文(简体) ), react-router-dom, (中文(简体) ), react-oidc-context, (中文(简体) ), oidc-client-ts, (中文(简体) ), axios, (中文(简体) ), @mui/material, (中文(简体) ), @emotion/react, (中文(简体) ), react-hook-form, (中文(简体) ), react-use,以及 @batoanng/mui-components。 。 。 .

如果使用内置屏幕 @batoanng/mui-components,同时安装该套件所需的任何额外的同位素.

使用量

将您的应用程序的路由部分包入 OidcAuthorisationProvider。提供者必须住在反光路由器内 <Router> 因为它注入回调路线 <Routes>。 。 。 .

import { OidcAuthorisationProvider } from '@batoanng/oidc';

export function AppShell() {
  return (
    <OidcAuthorisationProvider
      userManagerSettings={{
        authority: 'https://your-idp.example.com',
        client_id: 'web-app',
        redirect_uri: 'http://localhost:3000/oidc/callback',
        post_logout_redirect_uri: 'http://localhost:3000/oidc/logout',
      }}
    >
      <AppRoutes />
    </OidcAuthorisationProvider>
  );
}

登录回调完成后, 加载用户配置和权限, 然后交给 OidcAuthorisationCallback 在您保护的UI 创建之前, 共享授权背景已覆盖 .

import axios from 'axios';
import {
  OidcAuthorisationCallback,
  useOidcAuthorisationContext,
  useEnsureOidcLoginToken,
} from '@batoanng/oidc';

const apiClient = axios.create({
  baseURL: '/api',
});

export function PostLoginGate() {
  const userInformation = {
    shortName: 'T. User',
    fullName: 'Test User',
    email: '[email protected]',
  };

  const privileges = {
    'activityLog.read': true,
  };

  return (
    <OidcAuthorisationCallback apiClient={apiClient} userInformation={userInformation} privileges={privileges}>
      <ProtectedApp />
    </OidcAuthorisationCallback>
  );
}

export function ProtectedPage() {
  useEnsureOidcLoginToken();
  const { isAuthenticated, onLogout, token } = useOidcAuthorisationContext();

  return (
    <section>
      <div>{isAuthenticated ? 'Signed in' : 'Signed out'}</div>
      <div>{token}</div>
      <button onClick={() => void onLogout()}>Logout</button>
    </section>
  );
}

自动流量

flowchart TD
  A["App Router"] --> B["OidcAuthorisationProvider"]
  B --> C["react-oidc-context AuthProvider"]
  B --> D["/oidc/callback -> OidcLoginCallback"]
  B --> E["/oidc/logout -> OidcLogoutCallback"]
  B --> F["* -> OidcAuthorisationContextProvider"]
  D --> G{"Expired password response?"}
  G -- "Yes" --> H["/expired -> OidcResetPasswordPage"]
  G -- "No" --> I["Navigate to postLoginUrl or /"]
  F --> J["AuthorisationContext"]
  J --> K["useOidcAuthorisationContext / useChallenge"]
  I --> L["Load user profile and privileges"]
  L --> M["OidcAuthorisationCallback"]
  M --> N["Update user information and privilege state"]
  M --> O["Optional axios header + 401 retry wiring"]
  N --> P["Protected application UI"]
  O --> P

道具

OidcAuthorisationProvider

OidcAuthorisationCallback

综合说明

默认路径

Axios 行为

• setBearerToken 在 arxios 实例上存储当前访问符并保存 defaults.headers.common.Authorization 同步.
• OidcAuthorisationCallback 为所提供安装一个响应截取器 apiClient。 。 。 .
• A 类 401 触发一个 signinSilent() 尝试。 如果还回了新的令牌, 失败的请求会经过一次刷新 Authorization 头曰.

相关软件包

• @batoanng/mui-components 提供内置屏幕所使用的状态、通知和形式原始.
• @batoanng/utils 是一个相关的工作空间工具包,但是 @batoanng/oidc 现在使用 react-use 直接用于其本地的钩子助手.

发展

pnpm --dir packages/oidc lint
pnpm --dir packages/oidc type-check
pnpm --dir packages/oidc test
pnpm --dir packages/oidc build

关键文件 :

• src/OidcAuthorisationProvider.tsx
• src/OidcAuthorisationContextProvider.tsx
• src/OidcAuthorisationCallback.tsx
• src/hooks.ts
• src/types.ts