Guia de integração

Opções de autenticação

Armazenamento de dados do usuário

Segurança

Personalização

Provedores de serviços de comunicação

Características

Guias

Extensões

Configurações legais

Referências

SDKs

Arquivos JSON com configurações de widget

As configurações do widget estão contidas nos seguintes arquivos JSON:

settingsJSON — configurações principais
socialsJSON — configurações de login social
themeJSON — 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

Full screen

Small screen

<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

Full screen

Small screen

{
  "authorization_methods": {
    // Authorization methods
  },
  "registration_fields": {
    // Registration fields
  },
  "email_validation": {
    // Settings for email validation
  }

  // Other widget settings
}

Métodos de autorização

O objeto authorization_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.

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 objeto authorization_methods com uma lista definida de métodos.
social — login social. O parâmetro será passado por padrão se não houver nenhum objeto authorization_methods com 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

Full screen

Small screen

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

  // Other widget settings
}

Campos de cadastro

O objeto registration_fields contém uma matriz de campos que são exibidos na página de registro do widget.

Parâmetro	Tipo	Descrição
e-mail	e-mail	Endereço de e-mail do usuário.
nome de usuário	string	Conta de usuário.
senha	passar	Senha.
password_confirm	passar	Confirmação de senha.
nome próprio	string	Nome de usuário.
sobrenome	string	Sobrenome do usuário.
apelido	string	Apelido do usuário.
aniversário	data	Data de nascimento.
gênero	string	Gênero.
nome do país	selecionar	País.
plataforma	multisseleção	Plataforma.
promo_email_agreement	boolean	Consentimento para receber materiais promocionais.

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

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": {}
    }
  ]
}

Validação de endereço de e-mail

O objeto email_validation contém o parâmetro se_xsolla_email_validator, que valida os dados inseridos no campo email.

Parâmetro	Tipo	Descrição
use_xsolla_email_validator	boolean	Se deve ser utilizada a validação adicional dos dados inseridos no campo `email` ou não. Se for `true`, um endereço de e-mail é validado nos lados front-end e back-end com recursos como SMTP, RFC e Greylist. Se for `false`, o endereço de e-mail é validado apenas no front-end. `false` por padrão.

Exemplo:

Copy

Full screen

Small screen

{
  // 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 arquivo settingsJSON.

Parâmetro	Tipo	Descrição
can_register	boolean	Se deve habilitar o registro para os usuários. `true` por padrão.
can_reset_password	boolean	Se deseja habilitar a redefinição de senha para os usuários. `true` por padrão.
consent_url	string	Link para o consentimento da política do usuário.
cookie_policy	string	Link para a política de cookies.
privacy_policy	string	Link para a política de privacidade.
tos_url	string	Link para os termos de uso.
game_name	string	Nome de um projeto ou jogo. Exibido em alguns métodos de autorização.

Exemplo:

Copy

Full screen

Small screen

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

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
    ]
  }
}

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:

Parâmetro	Tipo	Descrição
nome	string	Nome de uma rede social. Opções disponíveis: `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	Link para abrir uma rede social se a autorização JWT for usada.
oauth2	string	Link para abrir uma rede social se a autorização baseada no protocolo OAuth 2.0 for usada.

Cada rede social deve ser representada em uma matriz pelo menos uma vez. A matriz pode estar vazia.

Exemplo:

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
}

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 objetobackground)
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_socials e secondary_socials)
configurações de cena (o objeto scene)

O modelo do arquivo 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
  }
}

Cor e tamanho do widget

A cor e o tamanho do widget são passados na raiz do objeto JSON do arquivo themeJSON.

Parâmetro	Tipo	Descrição
primary_color	string	Cor do widget primário (cor dos botões e bordas dos campos de entrada ativos) no formato RGB ou HEX. O valor padrão é `#0073F7`.
secondary_color	string	Cor do widget secundário (cor dos campos de entrada inativos) no formato RGB ou HEX. O valor padrão é `#DADADA`.
error_color	string	Cor dos textos de erro no formato RGB ou HEX. O valor padrão é `#EB002F`.
text_color	string	Cor do texto principal no formato RGB ou HEX. O valor padrão é `#000000`.

Exemplo:

Copy

Full screen

Small screen

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

Parâmetro	Tipo	Descrição
entradas	string	Arredondamento em pixels para campos ativos. O valor padrão é `6px`.
botões	string	Arredondamento em pixels para botões. O valor padrão é `100px`.
widget	string	Arredondamento em pixels para o widget. O valor padrão é `6px`.

Exemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

  }
}

Plano de fundo

O objeto background contém os parâmetros de plano de fundo do widget.

Parâmetro	Tipo	Descrição
cor	string	Cor de fundo no formato RGB ou HEX. O valor padrão é `#FFFFFF`.
imagem	object	Imagem de fundo. O objeto contém um link para as configurações de imagem e opacidade. O valor de opacidade padrão é `1`.

Exemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Cabeçalho

O objeto header contém os parâmetros do cabeçalho do widget — uma área acima de todos os campos do widget.

Parâmetro	Tipo	Descrição
imagem	object	Imagem de fundo do cabeçalho. O objeto contém um link para a imagem, as configurações de opacidade e o tamanho da imagem de plano de fundo. O valor de opacidade padrão é `1`. Os valores disponíveis do tamanho da imagem de plano de fundo correspondem aos valores da propriedade CSS `background-size` (`cover` por padrão).

Exemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Abas

O objeto tabs contém um parâmetro hide. Esse parâmetro gerencia a exibição das abas de cadastro ou autorização no widget.

Parâmetro	Tipo	Descrição
ocultar	boolean	Se as abas de autorização ou cadastro em um widget devem ser ocultadas ou não. Use o valor `true` para, por exemplo, ocultar temporariamente a aba de cadastro ou exibir páginas de cadastro e autorização separadamente. O valor padrão é `false`.

Exemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Exibição de redes sociais

Os objetos primary_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`.

Exemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Cena

O objeto scene contém parâmetros para uma cena — uma área ao redor do widget.

Parâmetro	Tipo	Descrição
cor	string	Cor de fundo no formato RGB ou HEX. O valor padrão é `#FFFFFF`.
imagem	object	Imagem de fundo. O objeto contém um link para a imagem, as configurações de opacidade e o tamanho da imagem de plano de fundo. Os valores disponíveis do tamanho da imagem de plano de fundo correspondem aos valores da propriedade CSS `background-size` (`cover` por padrão).

Exemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Obrigado pelo seu feedback!

Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Última atualização: 22 de Janeiro de 2024

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Conteúdos

Configurações principais
Métodos de autorização
Campos de cadastro
Validação de endereço de e-mail
Configurações adicionais
Configurações de redes sociais
Configurações do tema
Cor e tamanho do widget
Arredondamento
Plano de fundo
Cabeçalho
Abas
Exibição de redes sociais
Cena

Your browser is not supported. Please try a different browser

Resposta com base nas seguintes fontes:

Nos dê seu feedback (opcional)

Nos dê seu feedback (opcional)

Login

Arquivos JSON com configurações de widget

Configurações principais

Métodos de autorização

Campos de cadastro

e-mail

nome de usuário

senha

password_confirm

nome próprio

sobrenome

apelido

aniversário

gênero

nome do país

plataforma

promo_email_agreement

Validação de endereço de e-mail

use_xsolla_email_validator

Configurações adicionais

can_register

can_reset_password

consent_url

cookie_policy

privacy_policy

tos_url

game_name

Configurações de redes sociais

nome

jwt

oauth2

Configurações do tema

Cor e tamanho do widget

primary_color

secondary_color

error_color

text_color

Arredondamento

entradas

botões

widget

Plano de fundo

cor

imagem

Cabeçalho

imagem

Abas

ocultar

Exibição de redes sociais

ocultar

Cena

cor

imagem