@pisell/private-materials 6.6.2 → 6.7.2

package/lowcode/login2/CONFIG.md

@@ -0,0 +1,447 @@
+# 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
+