Tezign Login Package

A React package that provides Tezign login functionality with API integration.

Installation

npm install react-demo-package

Usage

登录 API (Login API)

import { login, defaultLoginParams } from 'react-demo-package';

// 使用自定义参数登录 - Login with custom parameters
const customParams = {
  appIds: ['t2'],
  loginType: 7,
  pwd: '111111',
  username: '[email protected]'
};

const response = await login(customParams);
console.log(response);

// 使用默认参数登录 - Login with default parameters
const defaultResponse = await login(); // 不传参数使用默认值
console.log(defaultResponse);

// 查看默认参数 - View default parameters
console.log('默认登录参数:', defaultLoginParams);

登录 Hook (Login Hook)

import React, { useState } from 'react';
import { useLogin } from 'react-demo-package';

function LoginExample() {
  // 使用简化的登录 Hook
  const { performLogin } = useLogin();
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  // 自定义参数登录
  const handleCustomLogin = async () => {
    setLoading(true);
    setError(null);
    
    try {
      const params = {
        appIds: ['t2'],
        loginType: 7,
        pwd: '111111',
        username: '[email protected]'
      };
      const response = await performLogin(params);
      setResult(response);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // 默认参数登录
  const handleDefaultLogin = async () => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await performLogin(); // 不传参数，使用默认参数
      setResult(response);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handleCustomLogin} disabled={loading}>
        {loading ? '登录中...' : '自定义登录'}
      </button>
      <button onClick={handleDefaultLogin} disabled={loading}>
        默认参数登录
      </button>
      
      {error && <p style={{color: 'red'}}>错误: {error}</p>}
      {result && (
        <div>
          <h4>登录结果:</h4>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

登录演示组件 (Login Demo Component)

import React from 'react';
import { LoginDemo } from 'react-demo-package';

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <LoginDemo />
    </div>
  );
}

注意: LoginDemo 组件提供了完整的登录界面，包括参数输入表单、登录按钮和结果显示。适合用于快速集成和测试登录功能。

API

登录功能 (Login Functions)

login(params?: LoginParams): Promise<LoginResponse>

调用 Tezign 登录 API，支持自定义参数或使用默认参数。

参数 (Parameters):

• params (LoginParams, 可选): 登录参数对象，如果不提供则使用默认参数
  • appIds (string[]): 应用ID数组
  • loginType (number): 登录类型标识符
  • pwd (string): 密码
  • username (string): 用户名/邮箱

返回值 (Returns):

• Promise<LoginResponse>: 返回登录响应的 Promise

示例 (Example):

// 使用自定义参数
const result = await login({
  appIds: ['t2'],
  loginType: 7,
  pwd: 'password',
  username: '[email protected]'
});

// 使用默认参数
const result = await login();

useLogin(): { performLogin: Function }

简化的 React Hook，只提供基本的登录功能。

返回值 (Returns):

• 包含以下属性的对象:
  • performLogin ((params?: LoginParams) => Promise): 执行登录的函数，接收参数并触发登录

<LoginDemo />

提供完整登录界面的 React 组件，包含表单输入和响应显示。

属性 (Props):

• 无 (None)

特性 (Features):

• 📝 完整的登录参数表单
• 🔄 支持自定义参数和默认参数登录
• 📊 实时显示登录状态和结果
• 🎨 美观的用户界面
• ♻️ 状态重置功能

Types

LoginParams

interface LoginParams {
  appIds: string[];
  loginType: number;
  pwd: string;
  username: string;
}

LoginResponse

interface LoginResponse {
  code: number;
  message: string;
  data?: any;
}

LoginState

interface LoginState {
  loading: boolean;
  data: LoginResponse | null;
  error: string | null;
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

Publishing

1. Update the version in package.json
2. Build the package: npm run build
3. Publish to npm: npm publish

License

MIT