包含小组件设置的JSON文件
小组件设置包含在以下JSON文件中:
您可以在文件中重复使用设置并在不同设置上显示相同小组件。小组件URL在小组件初始化代码中指定:
Copy
- json
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>
主要设置
小组件主要设置有:
settingsJSON
文件的模板:
Copy
- json
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
- json
1{
2 "authorization_methods": {
3 ["email", "phone"]
4 }
5
6 // Other widget settings
7}
注册字段
registration_fields
对象包含在小组件注册页上显示的字段的数组。参数 | 类型 | 描述 |
---|---|---|
用户邮箱地址。 | ||
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
- json
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
- json
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
- json
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
- json
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
- json
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
- json
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
- json
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
- json
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
- json
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
- json
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
- json
1{
2 // Other theme settings
3
4 "tabs": {
5 "hide": true
6 }
7}
社交网络显示
primary_socials
和secondary_socials
对象包含hide
参数,该参数用于管理主要和次要社交网络在小组件上的显示。参数 | 类型 | 描述 |
---|---|---|
hide | boolean | 是否隐藏社交网络。默认值为false 。 |
Copy
- json
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
- json
1{
2 // Other theme settings
3
4 "scene": {
5 "color": "#708090",
6 "image": {
7 "url": "https://someurl.com",
8 "size": "cover"
9 }
10 }
11}
本文对您的有帮助吗?
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。