包含小组件设置的JSON文件

小组件设置包含在以下JSON文件中：

settingsJSON — 主要设置
socialsJSON — 社交网络登录设置
themeJSON — 主题设置

您可以在文件中重复使用设置并在不同设置上显示相同小组件。小组件URL在小组件初始化代码中指定：

Copy

Full screen

Small screen

1<script>
2const xl = new XsollaLogin.Widget({
3  // Other settings
4  settingsJSON: "url_string",
5  socialsJSON: "url_string",
6  themeJSON: "url_string"
7});
8</script>

主要设置

小组件主要设置有：

授权方式（authorization_methods对象）
注册字段（registration_fields对象）
邮箱地址验证（email_validation对象）
其他设置

settingsJSON文件的模板：

Copy

Full screen

Small screen

 1{
 2  "authorization_methods": {
 3    // Authorization methods
 4  },
 5  "registration_fields": {
 6    // Registration fields
 7  },
 8  "email_validation": {
 9    // Settings for email validation
10  }
11
12  // Other widget settings
13}

授权方式

authorization_methods对象包含可用授权方式的数组。登录页面根据传入的设置进行显示。

应向数组至少传入一种方式。每种方式在数组中出现的次数不能超过一次。

可用授权方式：

email — 通过邮箱地址和密码授权。如果没有包含指定方法列表的authorization_methods对象，则默认传入此参数。
social — 社交网络帐户登录。如果没有包含指定方法列表的authorization_methods对象，则默认传入此参数。
username — 通过用户名和密码授权。
phone — 通过手机号和短信验证码授权。
passwordless-email-code — 通过邮箱地址和邮件验证码授权。

示例：

Copy

Full screen

Small screen

1{
2  "authorization_methods": {
3    ["email", "phone"]
4  }
5
6  // Other widget settings
7}

注册字段

registration_fields对象包含在小组件注册页上显示的字段的数组。

参数	类型	描述
email	email	用户邮箱地址。
username	string	用户帐户。
password	pass	密码。
password_confirm	pass	密码确认。
given-name	string	用户名。
family-name	string	用户姓氏。
nickname	string	用户昵称。
bday	date	出生日期。
gender	string	性别。
country-name	select	国家/地区。
platform	multi-select	平台。
promo_email_agreement	boolean	接收推广材料的同意。

该数组必须包含至少一个字段。字段根据其在数组中的传入顺序进行显示。

此外，还必须为字段指定以下参数：

required (boolean) — 该字段是否为必需。
default_value (array) — 默认值的数组（用于国家/地区或平台列表）。
validation (object) — 验证参数：
- allowed_characters (string) — 该字段允许的字符。以正则表达式值形式在列表中用逗号分隔。
- max_length (number) — 最大字符数。
- min_length (number) — 最小字符数。
- regexps (array with strings) — 用于验证输入值的正则表达式。

示例：

Copy

Full screen

Small screen

 1{
 2  // Other widget settings
 3
 4  "registration_fields": [
 5    {
 6      "name": "username",
 7      "required": false,
 8      "type": "str",
 9      "validation": {
10        "allowed_characters": "A-Z, a-z, 0-9",
11        "max_length": 16,
12        "min_length": 5,
13        "regexps": ["^.{5,16}$"]
14      }
15    },
16    { "name": "email", "required": true, "type": "email", "validation": {} },
17    { "name": "bday", "required": true, "type": "date", "validation": {} },
18    {
19      "name": "platform",
20      "default_value": ["MacOS", "Nintendo Switch", "Steam"],
21      "required": false,
22      "type": "multi-select",
23      "validation": {}
24    },
25    {
26      "name": "country-name",
27      "default_value": ["US", "GB", "DE"],
28      "required": false,
29      "type": "select",
30      "validation": {}
31    },
32    { "name": "password", "required": true, "type": "pass", "validation": {} },
33    {
34      "name": "password_confirm",
35      "required": false,
36      "type": "pass",
37      "validation": {}
38    },
39    {
40      "name": "promo_email_agreement",
41      "required": false,
42      "type": "bool",
43      "validation": {}
44    }
45  ]
46}

邮箱地址验证

email_validation对象包含验证email字段输入数据的se_xsolla_email_validator参数。

参数	类型	描述
use_xsolla_email_validator	boolean	是否对`email`字段输入的数据使用额外验证。如为`true`，则使用SMTP、RFC和灰名单等功能在前端和后端侧验证邮箱地址。如为`false`，则只在前端侧验证邮箱地址。默认为`false`。

示例：

Copy

Full screen

Small screen

1{
2  // Other widget settings
3
4  "email_validation": {
5    "use_xsolla_email_validator": true
6  }
7}

其他设置

其他设置在settingsJSON文件的JSON对象根中传递。

参数	类型	描述
can_register	boolean	是否启用用户注册。默认为`true`。
can_reset_password	boolean	是否启用用户密码重置。默认为`true`。
consent_url	string	用户政策同意书的链接。
cookie_policy	string	Cookie政策的链接。
privacy_policy	string	隐私政策的链接。
tos_url	string	使用条款的链接。
game_name	string	项目或游戏的名称。在部分授权方式中显示。

示例：

Copy

Full screen

Small screen

1{{
2  // Other widget settings
3
4  "can_register": true,
5  "can_reset_password": true,
6  "cookie_policy": "https://someurl.com"
7}

社交网络设置

对于社交网络登录，以下参数在socialsJSON文件中传递：

区域列表
每个区域的参数和社交网络类型

socialsJSON文件的模板：

Copy

Full screen

Small screen

 1{
 2  "1": {
 3    "primary": [
 4      // Array of social networks for primary type
 5    ],
 6    "secondary": [
 7      // Array of social networks for secondary type
 8    ]
 9  },
10  "2": {
11    "primary": [
12      // Array of social networks for primary type
13    ],
14    "secondary": [
15      // Array of social networks for secondary type
16    ]
17  },
18  "3": {
19    "primary": [
20      // Array of social networks for primary type
21    ],
22    "secondary": [
23      // Array of social networks for secondary type
24    ]
25  },
26  "4": {
27    "primary": [
28      // Array of social networks for primary type
29    ],
30    "secondary": [
31      // Array of social networks for secondary type
32    ]
33  },
34  "5": {
35    "primary": [
36      // Array of social networks for primary type
37    ],
38    "secondary": [
39      // Array of social networks for secondary type
40    ]
41  },
42  "6": {
43    "primary": [
44      // Array of social networks for primary type
45    ],
46    "secondary": [
47      // Array of social networks for secondary type
48    ]
49  }
50}

每个区域用一个数字表示：

1 — 欧洲
2 — 中国
3 — 朝鲜和韩国
4 — 独联体国家
5 — 南北美洲
6 — 世界其他地区

每个区域都定义了社交网络类型。有两种社交网络：主要(primary)和次要(secondary)社交网络。主要社交网络以大按钮形式显示，在小组件页面上更为显眼。次要社交网络以小按钮形式显示，较为不显眼。

每种社交网络包含一个对象数组：

参数	类型	描述
name	string	社交网络名称，可用选项：`amazon`、`apple`、`baidu`、`battlenet`、`china_telecom`、`discord`、`email`、`epicgames`、`facebook`、`github`、`google`、`google-plus`、`instagram`、`kakao`、`linkedin`、`mailru`、`microsoft`、`msn`、`naver`、`ok`、`paradox`、`paypal`、`pinterest`、`qq`、`reddit`、`steam`、`slack`、`twitch`、`twitter`、`vimeo`、`vk`、`wechat`、`weibo`、`xbox`、`yahoo`、`yandex`、`youtube`。
jwt	string	打开社交网络的链接（如使用了JWT授权）。
oauth2	string	打开社交网络的链接（如使用了基于OAuth 2.0 协议的授权）。

每个社交网络在数组中应至少出现一次。数组可以为空。

示例：

Copy

Full screen

Small screen

 1{
 2  "1": {
 3    "primary": [{
 4      "name": "google",
 5      "jwt": "https://login.xsolla.com/api/social/google/login_redirect",
 6      "oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
 7    }],
 8    "secondary": [{
 9        "name": "facebook",
10        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
11        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
12      },
13      {
14        "name": "twitter",
15        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
16        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
17      }
18    ]
19  },
20  "2": {
21    "primary": [{
22      "name": "wechat",
23      "jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
24      "oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
25    }],
26    "secondary": [{
27        "name": "facebook",
28        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
29        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
30      },
31      {
32        "name": "twitter",
33        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
34        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
35      },
36      {
37        "name": "steam",
38        "jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
39        "oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
40      }
41    ]
42  }
43
44  // More regions
45}

主题设置

小组件主题设置包括：

小组件颜色和大小设置
圆角设置（rounding对象）
小组件背景设置（background对象）
头设置（header对象）
小组件选项卡设置（tabs对象）
社交网络显示设置（primary_socials和secondary_socials对象）
场景设置（scene对象）

themeJSON文件的模板：

Copy

Full screen

Small screen

 1{
 2  // Color and size settings
 3
 4  "header": {
 5    // Header settings
 6  },
 7  "background": {
 8    // Widget background settings
 9  },
10  "rounding": {
11    // Rounding settings
12  },
13  "tabs": {
14    // Tab settings
15  },
16  "primary_socials": {
17    // Display settings for the primary social networks
18  },
19  "secondary_socials": {
20    // Display settings for the secondary social networks
21  },
22  "scene": {
23    // Scene settings
24  }
25}

小组件颜色和大小

小组件的颜色和大小在themeJSON文件的JSON对象根中传递。

参数	类型	描述
primary_color	string	RGB或HEX格式的小组件主色（按钮颜色和激活的输入字段边框颜色）。默认值为`#0073F7`。
secondary_color	string	RGB或HEX格式的小组件辅色（未激活的输入字段颜色）。默认值为`#DADADA`。
error_color	string	RGB或HEX格式的错误文本。默认值为`#EB002F`。
text_color	string	RGB或HEX格式的文本主色。默认值为`#000000`。

示例：

Copy

Full screen

Small screen

1{
2  // Other theme settings
3
4  "primary_color": "#708090",
5  "secondary_color": "#4682B4"
6}

圆角

rounding对象包含不同小组件元素圆角的参数。该属性同时应用于四个角。

参数	类型	描述
inputs	string	激活字段的圆角，单位为像素。默认值为`6px`。
buttons	string	按钮的圆角，单位为像素。默认值为`100px`。
widget	string	小组件的圆角，单位为像素。默认值为`6px`。

示例：

Copy

Full screen

Small screen

1{
2  // Other theme settings
3
4  "rounding": {
5    "inputs": "8px",
6    "widget": "8px"
7
8  }
9}

背景

background对象包含小组件背景参数。

参数	类型	描述
color	string	RGB或HEX格式的背景颜色。默认值为`#FFFFFF`。
image	object	背景图片。该对象包含图片链接和透明度设置。默认透明度值为`1`。

示例：

Copy

Full screen

Small screen

 1{
 2  // Other theme settings
 3
 4  "background": {
 5    "color": "#708090",
 6    "image": {
 7      "url": "https://someurl.com",
 8      "opacity": "3"
 9    }
10  }
11}

头

header对象包含小组件头（在所有小组件字段之上的部分）的参数。

参数	类型	描述
image	object	头背景图片。该对象包含图片的链接、透明度设置和背景图片大小。默认透明度值为`1`。背景图片大小的可用值对应于`background-size` CSS属性的值（默认为`cover`）。

示例：

Copy

Full screen

Small screen

 1{
 2  // Other theme settings
 3
 4  "header": {
 5    "image": {
 6      "url": "https://someurl.com",
 7      "opacity": "3",
 8      "size": "cover"
 9    }
10  }
11}

选项卡

tabs包含一个hide参数。该参数管理注册或授权选项卡在小组件上的显示。

参数	类型	描述
hide	boolean	是否在小组件上隐藏授权或注册选项卡。例如，用`true`值暂时隐藏注册选项卡或单独显示注册和授权页面。默认值为`false`。

示例：

Copy

Full screen

Small screen

1{
2  // Other theme settings
3
4  "tabs": {
5    "hide": true
6  }
7}

社交网络显示

primary_socials和secondary_socials对象包含hide参数，该参数用于管理主要和次要社交网络在小组件上的显示。

参数	类型	描述
hide	boolean	是否隐藏社交网络。默认值为`false`。

示例：

Copy

Full screen

Small screen

 1{
 2  // Other theme settings
 3
 4  "primary_socials": {
 5    "hide": true
 6  },
 7  "secondary_socials": {
 8    "hide": false
 9  }
10}

场景

scene对象包含场景（小组件周围的区域）的参数。

参数	类型	描述
color	string	RGB或HEX格式的背景颜色。默认值为`#FFFFFF`。
image	object	背景图片。该对象包含图片的链接、透明度设置和背景图片大小。背景图片大小的可用值对应于`background-size` CSS属性的值（默认为`cover`）。

示例：

Copy

Full screen

Small screen

 1{
 2  // Other theme settings
 3
 4  "scene": {
 5    "color": "#708090",
 6    "image": {
 7      "url": "https://someurl.com",
 8      "size": "cover"
 9    }
10  }
11}

感谢您的反馈！

我们会查看您的留言并运用它改进用户体验。

上次更新时间: 2025年7月14日

发现了错别字或其他内容错误？请选择文本，然后按Ctrl+Enter。

主要设置
授权方式
注册字段
邮箱地址验证
其他设置
社交网络设置
主题设置
小组件颜色和大小
圆角
背景
头
选项卡
社交网络显示
场景

Your browser is not supported. Please try a different browser

包含小组件设置的JSON文件

主要设置

授权方式

注册字段

email

username

password

password_confirm

given-name

family-name

nickname

bday

gender

country-name

platform

promo_email_agreement

邮箱地址验证

use_xsolla_email_validator

其他设置

can_register

can_reset_password

consent_url

cookie_policy

privacy_policy

tos_url

game_name

社交网络设置

name

jwt

oauth2

主题设置

小组件颜色和大小

primary_color

secondary_color

error_color

text_color

圆角

inputs

buttons

widget

背景

color

image

头

image

选项卡

hide

社交网络显示

hide

场景

color

image