@shixm/universal-auth v1.0.0

Universal Authentication Plugin

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

特性

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

安装

npm install universal-auth

使用方法

1. 配置认证服务

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. 使用登录组件

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. 使用注册组件

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. 使用忘记密码组件

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 类名进行样式定义，你可以通过覆盖这些类名来自定义样式：

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

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

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

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT