影刀 AI Power 登录组件

一个可复用的 React 登录组件，支持多种登录方式，包括账号密码登录、SSO 单点登录等。

功能特性

• 🔐 支持账号密码登录
• 🌐 支持 SSO 单点登录
• 📱 支持移动端适配
• 🎨 可自定义主题样式
• 🔧 支持多种配置选项
• 📦 支持 npm 包形式引入
• 🎬 支持 SVGA 动画效果
• 🔒 支持多因子认证 (MFA)

安装

npm install @t-agent/auth-login

使用方法

基础用法

import React from "react";
import { Login } from "@t-agent/auth-login";

const App = () => {
  const handleLoginSuccess = async (res) => {
    console.log("登录成功:", res);
    // 处理登录成功逻辑
  };

  const handleLoginError = (data) => {
    console.error("登录失败:", data);
    // 处理登录失败逻辑
  };

  return (
    <Login
      title="登录"
      source="your_app"
      Basic="your_basic_auth"
      apiUrl="https://your-api.com"
      onLoginSuccess={handleLoginSuccess}
      onLoginError={handleLoginError}
    />
  );
};

完整配置

import React from "react";
import { Login } from "@t-agent/auth-login";

const App = () => {
  const handleLoginSuccess = async (res) => {
    console.log("登录成功:", res);
    // 处理登录成功逻辑
  };

  const handleLoginError = (data) => {
    console.error("登录失败:", data);
    // 处理登录失败逻辑
  };

  const handleLoginPending = (data) => {
    console.log("登录处理中:", data);
    // 处理 SSO 登录逻辑
  };

  return (
    <Login
      title="登录"
      forgetUrl="/password/?sel=enterprise"
      colorPrimary="#4096ff"
      logonUrl="/register"
      source="ai_power"
      Basic="YWlfcG93ZXI6c1VXaXk2c05pWGQwZTVMaA=="
      apiUrl="https://api.example.com"
      allAccountList={[]}
      isPrivate={false}
      enterpriseOnly={false}
      disableSSO={false}
      licenseHost="/"
      customConfig={{
        ssoWaitLogo: "/path/to/logo.svg",
      }}
      onLoginSuccess={handleLoginSuccess}
      onLoginError={handleLoginError}
      onLoginPending={handleLoginPending}
    />
  );
};

API 文档

Props

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | -------- | ---- | --------- | --------------------- | | title | string | 是 | - | 登录页面标题 | | source | string | 是 | - | 接入系统标识 | | Basic | string | 是 | - | 请求头中的 Basic 认证 | | apiUrl | string | 否 | - | API 接口地址 | | onLoginSuccess | function | 是 | - | 登录成功回调 | | onLoginError | function | 是 | - | 登录失败回调 | | onLoginPending | function | 否 | - | SSO 登录处理回调 | | forgetUrl | string | 否 | - | 忘记密码链接 | | colorPrimary | string | 否 | '#4096ff' | 主题色 | | logonUrl | string | 否 | - | 注册页面链接 | | allAccountList | array | 否 | [] | 历史登录账号列表 | | isPrivate | boolean | 否 | false | 是否为私有部署 | | enterpriseOnly | boolean | 否 | false | 是否仅企业版 | | disableSSO | boolean | 否 | false | 是否禁用 SSO | | licenseHost | string | 否 | '/' | 许可证主机地址 | | customConfig | object | 否 | - | 自定义配置 |

回调函数

onLoginSuccess

登录成功时的回调函数，接收登录结果数据。

const handleLoginSuccess = async (res: {
  auth_info: {
    access_token: string;
    refresh_token?: string;
    expires_in?: number;
  };
  user_name?: string;
  password?: string;
}) => {
  // 处理登录成功逻辑
  localStorage.setItem("accessToken", res.auth_info.access_token);
  // 跳转到主页
  window.location.href = "/dashboard";
};

onLoginError

登录失败时的回调函数，接收错误信息。

const handleLoginError = (data: {
  code: number;
  msg: string;
  username?: string;
  password?: string;
}) => {
  // 处理登录失败逻辑
  console.error("登录失败:", data.msg);
  // 显示错误提示
  message.error(data.msg);
};

onLoginPending

SSO 登录处理中的回调函数。

const handleLoginPending = (data: any) => {
  // 处理 SSO 登录逻辑
  console.log("SSO 登录处理中:", data);
};

本地开发

安装依赖

yarn install

启动开发服务器

yarn demo

这将启动一个本地开发服务器，在浏览器中打开 http://localhost:3000 查看 demo 页面。

构建组件

yarn build

类型检查

yarn type-check

代码检查

yarn lint

高级功能

自定义主题

import { ConfigProvider } from "antd";

const App = () => {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: "#1890ff",
          borderRadius: 6,
        },
      }}
    >
      <Login {...props} />
    </ConfigProvider>
  );
};

自定义配置

const customConfig = {
  ssoWaitLogo: "/path/to/logo.svg",
  textLogo: "/path/to/text-logo.svg",
};

<Login {...props} customConfig={customConfig} />;

历史账号管理

const accountList = [
  {
    username: "[email protected]",
    avatarUrl: "/path/to/avatar1.jpg",
    enterpriseName: "企业A",
  },
  {
    username: "[email protected]",
    avatarUrl: "/path/to/avatar2.jpg",
    enterpriseName: "企业B",
  },
];

<Login {...props} allAccountList={accountList} />;

浏览器支持

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

许可证

MIT License