npm package: @shixm/universal-auth
Description: A universal authentication plugin supporting phone verification, password login, third-party login, and more
Author: shixm
Latest version: 1.0.0

# Universal Authentication Plugin

一个功能完整的通用认证插件，支持多种登录方式和安全特性。

## 特性

- 多种登录方式
  - 手机号验证码登录
  - 账号密码登录
  - 邮箱登录
  - 第三方登录（微信、支付宝）
- 安全特性
  - 图形验证码
  - 7天内自动登录
  - 记住密码
  - 忘记密码功能
- 用户管理
  - 个人信息管理
  - 退出登录

## 安装

```bash
npm install universal-auth
```

## 使用方法

### 1. 配置认证服务

```typescript
import { AuthService } from 'universal-auth';

const authService = new AuthService({
  apiBaseUrl: 'https://your-api-url.com',
  tokenKey: 'auth_token',
  autoLoginKey: 'auto_login',
  rememberMeKey: 'remember_me',
  captchaEnabled: true,
  thirdPartyEnabled: true,
  tokenExpiration: 7 * 24 * 60 * 60 * 1000, // 7 days
});
```

### 2. 使用登录组件

```typescript
import { LoginForm } from 'universal-auth';

function App() {
  const handleLoginSuccess = (user) => {
    console.log('Login successful:', user);
  };

  const handleLoginError = (error) => {
    console.error('Login failed:', error);
  };

  return (
    <LoginForm
      authService={authService}
      onLoginSuccess={handleLoginSuccess}
      onLoginError={handleLoginError}
    />
  );
}
```

### 3. 使用注册组件

```typescript
import { RegisterForm } from 'universal-auth';

function App() {
  const handleRegisterSuccess = (user) => {
    console.log('Registration successful:', user);
  };

  const handleRegisterError = (error) => {
    console.error('Registration failed:', error);
  };

  return (
    <RegisterForm
      authService={authService}
      onRegisterSuccess={handleRegisterSuccess}
      onRegisterError={handleRegisterError}
    />
  );
}
```

### 4. 使用忘记密码组件

```typescript
import { ForgotPasswordForm } from 'universal-auth';

function App() {
  const handleResetSuccess = () => {
    console.log('Password reset successful');
  };

  const handleResetError = (error) => {
    console.error('Password reset failed:', error);
  };

  return (
    <ForgotPasswordForm
      authService={authService}
      onSuccess={handleResetSuccess}
      onError={handleResetError}
    />
  );
}
```

## API 文档

### AuthService

#### 方法

- `loginWithPhone(params: PhoneLoginParams, options?: LoginOptions): Promise<LoginResponse>`
- `loginWithPassword(params: PasswordLoginParams, options?: LoginOptions): Promise<LoginResponse>`
- `loginWithEmail(params: EmailLoginParams, options?: LoginOptions): Promise<LoginResponse>`
- `loginWithThirdParty(params: ThirdPartyLoginParams, options?: LoginOptions): Promise<LoginResponse>`
- `register(params: RegisterParams): Promise<LoginResponse>`
- `forgotPassword(params: ForgotPasswordParams): Promise<void>`
- `sendVerificationCode(phone: string): Promise<void>`
- `sendEmailVerification(email: string): Promise<void>`
- `getCaptcha(): Promise<string>`
- `logout(): void`
- `isAuthenticated(): boolean`
- `getCurrentUser(): User | null`
- `getToken(): string | null`

### 组件 Props

#### LoginForm

- `authService: AuthService`
- `onLoginSuccess?: (user: User) => void`
- `onLoginError?: (error: Error) => void`

#### RegisterForm

- `authService: AuthService`
- `onRegisterSuccess?: (user: User) => void`
- `onRegisterError?: (error: Error) => void`

#### ForgotPasswordForm

- `authService: AuthService`
- `onSuccess?: () => void`
- `onError?: (error: Error) => void`

## 样式定制

组件使用 CSS 类名进行样式定义，你可以通过覆盖这些类名来自定义样式：

```css
.login-form,
.register-form,
.forgot-password-form {
  /* 自定义样式 */
}

.login-methods,
.reset-methods {
  /* 自定义样式 */
}

.error-message,
.success-message {
  /* 自定义样式 */
}
```

## 贡献

欢迎提交 Issue 和 Pull Request！

## 许可证

MIT