包含小组件设置的JSON文件

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

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

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

主要设置

小组件主要设置有:

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对象包含可用授权方式的数组。登录页面根据传入的设置进行显示。

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

可用授权方式:

  • 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接收推广材料的同意。
Note
该数组必须包含至少一个字段。字段根据其在数组中的传入顺序进行显示。

此外,还必须为字段指定以下参数:

  • 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
string用户政策同意书的链接。
stringCookie政策的链接。
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社交网络名称,可用选项:amazonapplebaidubattlenetchina_telecomdiscordemailepicgamesfacebookgithubgooglegoogle-plusinstagramkakaolinkedinmailrumicrosoftmsnnaverokparadoxpaypalpinterestqqredditsteamslacktwitchtwittervimeovkwechatweiboxboxyahooyandexyoutube
jwt
string打开社交网络的链接(如使用了JWT授权)。
oauth2
string打开社交网络的链接(如使用了基于OAuth 2.0 协议的授权)。
Note
每个社交网络在数组中应至少出现一次。数组可以为空。

示例:

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
}

主题设置

小组件主题设置包括:

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
stringRGB或HEX格式的小组件主色(按钮颜色和激活的输入字段边框颜色)。默认值为#0073F7
secondary_color
stringRGB或HEX格式的小组件辅色(未激活的输入字段颜色)。默认值为#DADADA
error_color
stringRGB或HEX格式的错误文本。默认值为#EB002F
text_color
stringRGB或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
stringRGB或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_socialssecondary_socials对象包含hide参数,该参数用于管理主要和次要社交网络在小组件上的显示。

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

示例:

Copy
Full screen
Small screen
{
  // Other theme settings

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

场景

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

参数类型描述
color
stringRGB或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"
    }
  }
}

本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!
上次更新时间: 2022年4月22日

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

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!