Arquivos JSON com configurações de widget
As configurações do widget estão contidas nos seguintes arquivos JSON:
settingsJSON— configurações principaissocialsJSON— configurações de login socialthemeJSON— configurações de tema
Você pode reutilizar as configurações nos arquivos e exibir o mesmo widget em configurações diferentes. O URL de configurações é especificado no código de inicialização do widget:
Copy
- json
<script>
const xl = new XsollaLogin.Widget({
// Other settings
settingsJSON: "url_string",
socialsJSON: "url_string",
themeJSON: "url_string"
});
</script>
Configurações principais
As configurações principais do widget são:
- métodos de autorização (o objeto
authorization_methods) - campos de registro (o objeto
registration_fields) - validação de endereço de e-mail (o objeto
email_validation) - configurações adicionais
O modelo do arquivo settingsJSON:
Copy
- json
{
"authorization_methods": {
// Authorization methods
},
"registration_fields": {
// Registration fields
},
"email_validation": {
// Settings for email validation
}
// Other widget settings
}
Métodos de autorização
O objetoauthorization_methods contém uma matriz com métodos de autorização disponíveis. A página de login é exibida de acordo com as configurações passadas.Observação
Pelo menos um método deve ser passado para a matriz. Cada método não pode ser representado em uma matriz mais de uma vez.
Métodos de autorização disponíveis:
email— autorização por endereço de e-mail e senha. O parâmetro é passado por padrão se não houver nenhum objetoauthorization_methodscom uma lista definida de métodos.social— login social. O parâmetro será passado por padrão se não houver nenhum objetoauthorization_methodscom uma lista definida de métodos.username— autorização por um nome de usuário e senha.phone— autorização pelo número de telefone e código SMS.passwordless-email-code— autorização por um endereço de e-mail e um código enviado em um e-mail.
Exemplo:
Copy
- json
{
"authorization_methods": {
["email", "phone"]
}
// Other widget settings
}
Campos de cadastro
O objetoregistration_fields contém uma matriz de campos que são exibidos na página de registro do widget.Observação
A matriz deve conter pelo menos um campo. Os campos são exibidos de acordo com a ordem em que são passados para a matriz.
Além disso, você pode especificar os seguintes parâmetros para um campo:
required(booleano) — se o campo é obrigatório.default_value(matriz) — uma matriz de valores padrão (para uma lista de países ou plataformas).validation(objeto) — parâmetros de validação:allowed_characters(cadeia de caracteres) — caracteres permitidos para o campo. Separados por uma vírgula na lista como os valores de expressão regular.max_length(número) — número máximo de caracteres.min_length(número) — número mínimo de caracteres.regexps(matriz com cadeias de caracteres) — uma expressão regular para validar o valor inserido.
Exemplo:
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": {}
}
]
}
Validação de endereço de e-mail
O objetoemail_validation contém o parâmetro se_xsolla_email_validator, que valida os dados inseridos no campo email.Exemplo:
Copy
- json
{
// Other widget settings
"email_validation": {
"use_xsolla_email_validator": true
}
}
Configurações adicionais
Configurações adicionais são passadas na raiz do objeto JSON do arquivosettingsJSON.Exemplo:
Copy
- json
{{
// Other widget settings
"can_register": true,
"can_reset_password": true,
"cookie_policy": "https://someurl.com"
}
Configurações de redes sociais
Para login social, os seguintes parâmetros são passados no arquivo socialsJSON:
- parâmetros de lista de regiões
- e tipos de redes sociais para cada região
O modelo do arquivo 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
]
}
}
Cada região tem um número:
- 1 — Europa
- 2 — China
- 3 — Coreia do Norte e Coreia do Sul
- 4 — CEI
- 5 — América do Norte e do Sul
- 6 — resto do mundo
O tipo de rede social é definido para cada região. Existem 2 tipos de redes sociais: primária (primary) e secundária (secondary). As redes sociais primárias são exibidas como um grande botão e são mais visíveis na página do widget. As redes sociais secundárias são exibidas como pequenos botões e são menos visíveis.
Cada tipo de rede social contém uma matriz de objetos:
Observação
Cada rede social deve ser representada em uma matriz pelo menos uma vez. A matriz pode estar vazia.
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
}
Configurações do tema
As configurações do tema do widget incluem:
- configurações de cor e tamanho do widget
- configurações de arredondamento (o objeto
rounding) - configurações de plan ode fundo do widget (o objeto
background) - configurações de cabeçalho (o objeto
header) - configurações de abas do widget (o objeto
tabs) - configurações de exibição das redes sociais (os objetos
primary_socialsesecondary_socials) - configurações de cena (o objeto
scene)
O modelo do arquivo 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
}
}
Cor e tamanho do widget
A cor e o tamanho do widget são passados na raiz do objeto JSON do arquivothemeJSON.Exemplo:
Copy
- json
{
// Other theme settings
"primary_color": "#708090",
"secondary_color": "#4682B4"
}
Arredondamento
O objeto rounding contém parâmetros de arredondamento para diferentes elementos do widget. A propriedade se aplica a todos os quatro cantos simultaneamente.
Exemplo:
Copy
- json
{
// Other theme settings
"rounding": {
"inputs": "8px",
"widget": "8px"
}
}
Plano de fundo
O objetobackground contém os parâmetros de plano de fundo do widget.Exemplo:
Copy
- json
{
// Other theme settings
"background": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"opacity": "3"
}
}
}
Cabeçalho
O objetoheader contém os parâmetros do cabeçalho do widget — uma área acima de todos os campos do widget.Exemplo:
Copy
- json
{
// Other theme settings
"header": {
"image": {
"url": "https://someurl.com",
"opacity": "3",
"size": "cover"
}
}
}
Abas
O objetotabs contém um parâmetro hide. Esse parâmetro gerencia a exibição das abas de cadastro ou autorização no widget.Exemplo:
Copy
- json
{
// Other theme settings
"tabs": {
"hide": true
}
}
Exibição de redes sociais
Os objetosprimary_socials e secondary_socials contêm o parâmetro hide que gerencia a exibição de redes sociais primárias e secundárias em um widget.| Parâmetro | Tipo | Descrição |
|---|---|---|
ocultar | boolean | Se as redes sociais devem ser ocultas ou não. O valor padrão é false. |
Copy
- json
{
// Other theme settings
"primary_socials": {
"hide": true
},
"secondary_socials": {
"hide": false
}
}
Cena
O objetoscene contém parâmetros para uma cena — uma área ao redor do widget.Exemplo:
Copy
- json
{
// Other theme settings
"scene": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"size": "cover"
}
}
}
Este artigo foi útil?
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
