# Login2 配置说明

## 必填配置

### loginMethods（登录方式列表）

**必填**，数组类型，数组顺序决定显示顺序，第一项为默认登录方式。

#### 邮箱登录

```json
{
  "type": "email",
  "verificationMethods": ["password", "verification_code"],
  "stepByStep": false
}
```

**参数说明：**
- `type`: `"email"` （必填）
- `verificationMethods`: 验证方式数组，第一项为默认方式
  - `"password"` - 密码登录
  - `"verification_code"` - 验证码登录
  - 可以只配置一种：`["password"]` 或 `["verification_code"]`
  - 配置多种时，用户可以在界面下方的 "OR" 区域切换验证方式
  - 例如：`["password", "verification_code"]` 默认显示密码登录，下方显示"Email code to xxx"切换按钮
- `stepByStep`: 是否分步骤登录（仅对密码登录有效）
  - `true` - 先输入邮箱，再输入密码
  - `false` - 邮箱和密码在同一页面（默认）

#### 手机登录

```json
{
  "type": "phone",
  "verificationMethods": ["verification_code", "password"],
  "stepByStep": false
}
```

**参数说明：**
- `type`: `"phone"` （必填）
- `verificationMethods`: 验证方式数组，第一项为默认方式
  - `"password"` - 密码登录
  - `"verification_code"` - 验证码登录
  - 可以只配置一种：`["verification_code"]` 或 `["password"]`
  - 配置多种时，用户可以在界面下方的 "OR" 区域切换验证方式
  - 例如：`["verification_code", "password"]` 默认显示验证码登录，下方显示"Password login"切换按钮
- `stepByStep`: 是否分步骤登录（仅对密码登录有效）

#### Google 登录

```json
{
  "type": "google",
  "clientId": "your-google-client-id"
}
```

**参数说明：**
- `type`: `"google"` （必填）
- `clientId`: Google Client ID（可选）

#### Facebook 登录

```json
{
  "type": "facebook",
  "appId": "your-facebook-app-id"
}
```

**参数说明：**
- `type`: `"facebook"` （必填）
- `appId`: Facebook App ID（可选）

#### Apple 登录

```json
{
  "type": "apple",
  "clientId": "your-apple-client-id"
}
```

**参数说明：**
- `type`: `"apple"` （必填）
- `clientId`: Apple Client ID（可选）

## 可选配置

### ui（UI 配置）

#### logo

```json
{
  "show": true,
  "url": "https://your-logo.png",
  "position": "center"
}
```

#### title（标题）

```json
{
  "show": true,
  "text": "Welcome back",
  "align": "center"
}
```

#### subtitle（副标题）

```json
{
  "show": true,
  "text": "Log in to your account",
  "align": "center"
}
```

#### desc（描述）

```json
{
  "show": true,
  "text": "Welcome back! Please enter your details.",
  "align": "center"
}
```

#### formLabels（表单标签）

```json
{
  "email": {
    "show": true,
    "text": "Email"
  },
  "phone": {
    "show": true,
    "text": "Phone Number"
  },
  "password": {
    "show": true,
    "text": "Password"
  },
  "verificationCode": {
    "show": true,
    "text": "Verification Code"
  }
}
```

#### themeColor（主题色）

```json
"#7F56D9"
```

### channel（渠道标识）

字符串类型，用于区分不同来源的登录请求。

## 验证方式切换说明

当为邮箱或手机配置多个验证方式时（例如：`verificationMethods: ["password", "verification_code"]`），用户界面会出现以下变化：

### 默认显示

- **第一个验证方式**会作为默认显示
- 例如：`["password", "verification_code"]` → 默认显示密码输入框

### OR 分隔线

- 主表单下方会显示一条 "OR" 分隔线

### 切换选项

- OR 下方会显示其他验证方式的切换按钮
- 邮箱验证码：显示 "Email code to xxx@example.com"
- 手机验证码：显示 "SMS code to 138****8000"
- 密码登录：显示 "Password login"

### 实际效果

**配置：**
```json
{
  "type": "email",
  "verificationMethods": ["password", "verification_code"]
}
```

**界面显示：**
```
┌─────────────────────────┐
│ Email Input             │
│ Password Input          │
│ [Remember me] [Forgot?] │
│ [Log in Button]         │
├─────────────────────────┤
│         OR              │
├─────────────────────────┤
│ 📧 Email code to u***@  │ ← 点击切换到验证码登录
└─────────────────────────┘
```

点击后切换为：
```
┌─────────────────────────┐
│ Email Input             │
│ Verification Code Input │
│ [Log in Button]         │
├─────────────────────────┤
│         OR              │
├─────────────────────────┤
│ 🔑 Password login       │ ← 点击切换回密码登录
└─────────────────────────┘
```

## 完整配置示例

### 示例 1：邮箱密码登录 + Google

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password"],
        "stepByStep": false
      },
      {
        "type": "google",
        "clientId": "your-client-id"
      }
    ],
    "ui": {
      "title": {
        "show": true,
        "text": "Welcome back",
        "align": "center"
      },
      "subtitle": {
        "show": true,
        "text": "Log in to your account",
        "align": "center"
      },
      "themeColor": "#7F56D9"
    }
  }
}
```

### 示例 2：邮箱分步骤登录 + 多种方式

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password", "verification_code"],
        "stepByStep": true
      },
      {
        "type": "google",
        "clientId": "xxx"
      },
      {
        "type": "facebook",
        "appId": "xxx"
      },
      {
        "type": "phone",
        "verificationMethods": ["verification_code"]
      }
    ],
    "ui": {
      "themeColor": "#7F56D9"
    },
    "channel": "web"
  }
}
```

### 示例 3：纯第三方登录

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "google",
        "clientId": "xxx"
      },
      {
        "type": "apple",
        "clientId": "xxx"
      },
      {
        "type": "facebook",
        "appId": "xxx"
      }
    ]
  }
}
```

### 示例 4：邮箱验证码 + 密码（可切换）

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["verification_code", "password"]
      }
    ],
    "ui": {
      "title": {
        "show": true,
        "text": "Welcome back",
        "align": "center"
      }
    }
  }
}
```

**说明：**
- 默认显示验证码登录
- 用户可以点击 "Password login" 切换到密码登录
- 密码登录时可以点击 "Email code to xxx" 切换回验证码

### 示例 5：纯密码登录（无切换）

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "email",
        "verificationMethods": ["password"]
      }
    ]
  }
}
```

**说明：**
- 只显示密码登录
- 不显示 OR 分隔线
- 无其他验证方式切换选项

### 示例 6：纯验证码登录（无切换）

```json
{
  "config": {
    "loginMethods": [
      {
        "type": "phone",
        "verificationMethods": ["verification_code"]
      }
    ]
  }
}
```

**说明：**
- 只显示手机验证码登录
- 不显示 OR 分隔线
- 无其他验证方式切换选项

## 事件回调

### onLogin

登录回调，参数：`(data, method, channel)`

```javascript
function(data, method, channel) {
  console.log('Login:', data, method, channel);
  // data = { account, password, verification_code, remember_me }
  // method = 'email' | 'phone'
  // channel = 'web' (如果配置了)
}
```

### onOAuthLogin

三方登录回调，参数：`(provider, channel)`

```javascript
function(provider, channel) {
  console.log('OAuth login:', provider, channel);
  // provider = 'google' | 'facebook' | 'apple'
}
```

### onSendVerificationCode

发送验证码回调，参数：`(account, type, channel)`

```javascript
function(account, type, channel) {
  console.log('Send code to:', account, type);
  // account = 用户输入的邮箱或手机号
  // type = 'email' | 'phone'
}
```

### onForgotPassword

忘记密码回调，参数：`(account, channel)`

```javascript
function(account, channel) {
  console.log('Forgot password:', account);
  // account = 用户输入的邮箱或手机号
}
```

### onClose

关闭组件回调

```javascript
function() {
  console.log('Close login modal');
}
```

## 注意事项

1. **loginMethods 必填**：至少需要配置一种登录方式
2. **顺序很重要**：数组第一项为默认登录方式
3. **分步骤登录**：仅对密码登录有效，验证码登录始终为单步
4. **验证方式顺序**：`verificationMethods` 数组第一项为默认验证方式
5. **Client ID/App ID**：使用第三方登录时需要提供对应的 ID