包含小组件设置的JSON文件

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

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

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

Copy

Full screen

Small screen

<script>
const xl = new XsollaLogin.Widget({
  // Other settings
  settingsJSON: "url_string",
  socialsJSON: "url_string",
  themeJSON: "url_string"
});
</script>

主要设置

小组件主要设置有：

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

settingsJSON文件的模板：

Copy

Full screen

Small screen

{
  "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

Full screen

Small screen

{
  "authorization_methods": {
    ["email", "phone"]
  }

  // Other widget settings
}

注册字段

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

{
  // 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

Full screen

Small screen

{
  // Other widget settings

  "email_validation": {
    "use_xsolla_email_validator": true
  }
}

其他设置

其他设置在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

{{
  // Other widget settings

  "can_register": true,
  "can_reset_password": true,
  "cookie_policy": "https://someurl.com"
}

社交网络设置

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

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

socialsJSON文件的模板：

Copy

Full screen

Small screen

{
  "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)社交网络。主要社交网络以大按钮形式显示，在小组件页面上更为显眼。次要社交网络以小按钮形式显示，较为不显眼。

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

参数	类型	描述
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": {
    "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

Full screen

Small screen

{
  // 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对象根中传递。

参数	类型	描述
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

{
  // Other theme settings

  "primary_color": "#708090",
  "secondary_color": "#4682B4"
}

圆角

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

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

示例：

Copy

Full screen

Small screen

{
  // Other theme settings

  "rounding": {
    "inputs": "8px",
    "widget": "8px"

  }
}

背景

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

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

示例：

Copy

Full screen

Small screen

{
  // Other theme settings

  "background": {
    "color": "#708090",
    "image": {
      "url": "https://someurl.com",
      "opacity": "3"
    }
  }
}

头

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

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

示例：

Copy

Full screen

Small screen

{
  // Other theme settings

  "header": {
    "image": {
      "url": "https://someurl.com",
      "opacity": "3",
      "size": "cover"
    }
  }
}

选项卡

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

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

示例：

Copy

Full screen

Small screen

{
  // Other theme settings

  "tabs": {
    "hide": true
  }
}

社交网络显示

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

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

示例：

Copy

Full screen

Small screen

{
  // Other theme settings

  "primary_socials": {
    "hide": true
  },
  "secondary_socials": {
    "hide": false
  }
}

场景

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

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

示例：

Copy

Full screen

Small screen

{
  // Other theme settings

  "scene": {
    "color": "#708090",
    "image": {
      "url": "https://someurl.com",
      "size": "cover"
    }
  }
}

感谢您的反馈！

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

上次更新时间: 2024年1月22日

发现了错别字或其他内容错误？请选择文本，然后按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