---
nav:
  title: 组件
  order: 2
group:
  title: 基础组件
  order: 1
title: Register
order: 1
category: pro
---

# Register2 Component

## Overview

`Register2` 是登录体系的注册端，实现邮箱、手机号、验证码、邮件链接以及 OAuth 注册。组件以配置驱动，提供分步骤流程（账号 → 验证 → 设置密码），与 `Login2` 共享多项交互优化与密码规则。

## Props

| Prop                     | Type                                            | Description      | Default |
| ------------------------ | ----------------------------------------------- | ---------------- | ------- |
| `config`                 | `Register2Config`                               | 注册配置         | —       |
| `visible`                | `boolean`                                       | 是否展示组件     | `true`  |
| `onClose`                | `() => void`                                    | 关闭回调         | —       |
| `className`              | `string`                                        | 自定义类名       | —       |
| `style`                  | `React.CSSProperties`                           | 自定义样式       | —       |
| `onRegister`             | `(originResult, method, data, channel) => void` | 注册成功回调     | —       |
| `onOAuthLogin`           | `(provider, channel) => void`                   | OAuth 注册回调   | —       |
| `onSendVerificationCode` | `(account, type, channel) => void`              | 发送验证码回调   | —       |
| `onEmailLinkExpired`     | `() => void`                                    | 邮件链接过期回调 | —       |
| `onGoToLogin`            | `() => void`                                    | 前往登录回调     | —       |
| `onError`                | `(error, method) => void`                       | 错误回调         | —       |

### `Register2Config`

```ts
interface Register2Config {
  registrationMethods?: RegistrationMethodItem[]; // 注册方式（推荐）
  email?: EmailAuthConfig; // 旧邮箱配置（兼容）
  phone?: PhoneAuthConfig; // 旧手机配置（兼容）
  oauth?: OAuthConfig; // 第三方注册
  defaultAuthMethod?: AuthMethodType; // 默认方式
  channel?: string; // 渠道标识
  ui?: UIConfig; // UI 定制（含 passwordRules、文案等）
  emailLinkVerification?: { enabled: boolean; code: string };
  legalTerms?: LegalTermsConfig;
}
```

与登录类似，`registrationMethods` 支持邮箱、手机、Google、Apple、Facebook 等，并可声明验证手段（验证码 / 链接）以及多步骤流程。

### 密码规则

`config.ui?.passwordRules` 与 `Login2` 共用 `usePasswordValidationRules`：

```ts
ui: {
  passwordRules?: {
    minLength?: number;
    requireUppercase?: boolean;
    requireLowercase?: boolean;
    requireNumber?: boolean;
    requireSpecialCharacters?: boolean;
  };
}
```

规则会自动体现在注册表单与设置密码步骤中，相关提示文本使用 `pisell-register2-*` 与 `pisell-set-password-*` 文案，可自由在多语言包里覆盖。

## Key Features

- **流程解耦**：初始表单、验证码校验、邮件链接、设置密码、完成页面通过 `RegisterStep` 拆分，阅读与维护更轻松。
- **复用能力**：`usePasswordValidationRules`、`OAuthButtonGroup` 与 `Login2` 共用，简化逻辑重复。
- **错误呈现**：验证码错误直接在 `CodeInput` 下方展示，并清空输入框；避免频繁的 `message.error`。
- **浏览器适配**：隐藏 `username` 字段、动态 `input name` 降低自动填充干扰，密码字段在弹层关闭时自动清空。

## Usage Example

```
import Register2, { Register2Config } from '@pisell/private-materials/pro/Login2.0';

const config: Register2Config = {
  registrationMethods: [
    {
      type: 'email',
      verificationMethod: 'verification_code',
    },
    {
      type: 'phone',
      verificationMethod: 'verification_code',
    },
    { type: 'google' },
  ],
  ui: {
    passwordRules: {
      minLength: 8,
      requireUppercase: true,
      requireNumber: true,
    },
  },
};

export default function RegisterExample() {
  return (
    <Register2
      config={config}
      onRegister={(result, method, data) => {
        console.log('register success', method, data, result);
      }}
      onGoToLogin={() => console.log('switch to login')}
    />
  );
}
```

## Best Practices

1. **统一配置**：优先通过 `registrationMethods` 维护注册方式，保留旧配置仅用于兼容。
2. **密码提示**：根据 `passwordRules` 提前告知密码要求，并在设置密码页复用相同规则。
3. **分步骤体验**：邮箱/手机可启用 `verificationMethod` 与 `stepByStep` 组合，营造顺滑的账号 → 验证 → 密码流程。
4. **错误集中处理**：利用 `onError` 与内部错误提示位，保持业务日志与用户提示的统一。
