包含小组件设置的JSON文件
小组件设置包含在以下JSON文件中：
您可以在文件中重复使用设置并在不同设置上显示相同小组件。小组件URL在小组件初始化代码中指定：
Copy
- json
<script>
const xl = new XsollaLogin.Widget({
// Other settings
settingsJSON: "url_string",
socialsJSON: "url_string",
themeJSON: "url_string"
});
</script>
主要设置
小组件主要设置有：
settingsJSON文件的模板：
Copy
- json
{
"authorization_methods": {
// Authorization methods
},
"registration_fields": {
// Registration fields
},
"email_validation": {
// Settings for email validation
}
// Other widget settings
}
授权方式
authorization_methods对象包含可用授权方式的数组。登录页面根据传入的设置进行显示。注：
应向数组至少传入一种方式。每种方式在数组中出现的次数不能超过一次。
可用授权方式：
email— 通过邮箱地址和密码授权。如果没有包含指定方法列表的authorization_methods对象，则默认传入此参数。social— 社交网络帐户登录。如果没有包含指定方法列表的authorization_methods对象，则默认传入此参数。username— 通过用户名和密码授权。phone— 通过手机号和短信验证码授权。passwordless-email-code— 通过邮箱地址和邮件验证码授权。
示例：
Copy
- json
{
"authorization_methods": {
["email", "phone"]
}
// Other widget settings
}
注册字段
registration_fields对象包含在小组件注册页上显示的字段的数组。注：
该数组必须包含至少一个字段。字段根据其在数组中的传入顺序进行显示。
此外，还必须为字段指定以下参数：
required(boolean) — 该字段是否为必需。default_value(array) — 默认值的数组（用于国家/地区或平台列表）。validation(object) — 验证参数：allowed_characters(string) — 该字段允许的字符。以正则表达式值形式在列表中用逗号分隔。max_length(number) — 最大字符数。min_length(number) — 最小字符数。regexps(array with strings) — 用于验证输入值的正则表达式。
示例：
Copy
- json
{
// Other widget settings
"registration_fields": [
{
"name": "username",
"required": false,
"type": "str",
"validation": {
"allowed_characters": "A-Z, a-z, 0-9",
"max_length": 16,
"min_length": 5,
"regexps": ["^.{5,16}$"]
}
},
{ "name": "email", "required": true, "type": "email", "validation": {} },
{ "name": "bday", "required": true, "type": "date", "validation": {} },
{
"name": "platform",
"default_value": ["MacOS", "Nintendo Switch", "Steam"],
"required": false,
"type": "multi-select",
"validation": {}
},
{
"name": "country-name",
"default_value": ["US", "GB", "DE"],
"required": false,
"type": "select",
"validation": {}
},
{ "name": "password", "required": true, "type": "pass", "validation": {} },
{
"name": "password_confirm",
"required": false,
"type": "pass",
"validation": {}
},
{
"name": "promo_email_agreement",
"required": false,
"type": "bool",
"validation": {}
}
]
}
邮箱地址验证
email_validation对象包含验证email字段输入数据的se_xsolla_email_validator参数。| 参数 | 类型 | 描述 |
|---|---|---|
use_xsolla_email_validator | boolean | 是否对email字段输入的数据使用额外验证。如为true，则使用SMTP、RFC和灰名单等功能在前端和后端侧验证邮箱地址。如为false，则只在前端侧验证邮箱地址。默认为false。 |
Copy
- json
{
// Other widget settings
"email_validation": {
"use_xsolla_email_validator": true
}
}
其他设置
其他设置在settingsJSON文件的JSON对象根中传递。示例：
Copy
- json
{{
// Other widget settings
"can_register": true,
"can_reset_password": true,
"cookie_policy": "https://someurl.com"
}
社交网络设置
对于社交网络登录，以下参数在socialsJSON文件中传递：
- 区域列表
- 每个区域的参数和社交网络类型
socialsJSON文件的模板：
Copy
- json
{
"1": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"2": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"3": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"4": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"5": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"6": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
}
}
每个区域用一个数字表示：
- 1 — 欧洲
- 2 — 中国
- 3 — 朝鲜和韩国
- 4 — 独联体国家
- 5 — 南北美洲
- 6 — 世界其他地区
每个区域都定义了社交网络类型。有两种社交网络：主要(primary)和次要(secondary)社交网络。主要社交网络以大按钮形式显示，在小组件页面上更为显眼。次要社交网络以小按钮形式显示，较为不显眼。
每种社交网络包含一个对象数组：
注：
每个社交网络在数组中应至少出现一次。数组可以为空。
Copy
- json
{
"1": {
"primary": [{
"name": "google",
"jwt": "https://login.xsolla.com/api/social/google/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
}],
"secondary": [{
"name": "facebook",
"jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
},
{
"name": "twitter",
"jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
}
]
},
"2": {
"primary": [{
"name": "wechat",
"jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
}],
"secondary": [{
"name": "facebook",
"jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
},
{
"name": "twitter",
"jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
},
{
"name": "steam",
"jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
}
]
}
// More regions
}
主题设置
小组件主题设置包括：
- 小组件颜色和大小设置
- 圆角设置（
rounding对象） - 小组件背景设置（
background对象） - 头设置（
header对象） - 小组件选项卡设置（
tabs对象） - 社交网络显示设置（
primary_socials和secondary_socials对象） - 场景设置（
scene对象）
themeJSON文件的模板：
Copy
- json
{
// Color and size settings
"header": {
// Header settings
},
"background": {
// Widget background settings
},
"rounding": {
// Rounding settings
},
"tabs": {
// Tab settings
},
"primary_socials": {
// Display settings for the primary social networks
},
"secondary_socials": {
// Display settings for the secondary social networks
},
"scene": {
// Scene settings
}
}
小组件颜色和大小
小组件的颜色和大小在themeJSON文件的JSON对象根中传递。示例：
Copy
- json
{
// Other theme settings
"primary_color": "#708090",
"secondary_color": "#4682B4"
}
圆角
rounding对象包含不同小组件元素圆角的参数。该属性同时应用于四个角。
| 参数 | 类型 | 描述 |
|---|---|---|
inputs | string | 激活字段的圆角，单位为像素。默认值为6px。 |
buttons | string | 按钮的圆角，单位为像素。默认值为100px。 |
widget | string | 小组件的圆角，单位为像素。默认值为6px。 |
Copy
- json
{
// Other theme settings
"rounding": {
"inputs": "8px",
"widget": "8px"
}
}
背景
background对象包含小组件背景参数。示例：Copy
- json
{
// Other theme settings
"background": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"opacity": "3"
}
}
}
头
header对象包含小组件头（在所有小组件字段之上的部分）的参数。| 参数 | 类型 | 描述 |
|---|---|---|
image | object | 头背景图片。该对象包含图片的链接、透明度设置和背景图片大小。默认透明度值为1。背景图片大小的可用值对应于 background-size CSS属性的值（默认为cover）。 |
Copy
- json
{
// Other theme settings
"header": {
"image": {
"url": "https://someurl.com",
"opacity": "3",
"size": "cover"
}
}
}
选项卡
tabs包含一个hide参数。该参数管理注册或授权选项卡在小组件上的显示。示例：Copy
- json
{
// Other theme settings
"tabs": {
"hide": true
}
}
社交网络显示
primary_socials和secondary_socials对象包含hide参数，该参数用于管理主要和次要社交网络在小组件上的显示。示例：Copy
- json
{
// Other theme settings
"primary_socials": {
"hide": true
},
"secondary_socials": {
"hide": false
}
}
场景
scene对象包含场景（小组件周围的区域）的参数。| 参数 | 类型 | 描述 |
|---|---|---|
color | string | RGB或HEX格式的背景颜色。默认值为#FFFFFF。 |
image | object | 背景图片。该对象包含图片的链接、透明度设置和背景图片大小。背景图片大小的可用值对应于background-size CSS属性的值（默认为cover）。 |
Copy
- json
{
// Other theme settings
"scene": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"size": "cover"
}
}
}
本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
