Archivos JSON con los ajustes del widget
Los ajustes del widget se encuentran en los siguientes archivos JSON:
settingsJSON: ajustes principalessocialsJSON: ajustes de inicio de sesión mediante redes socialesthemeJSON: ajustes del tema
Puede reutilizar los ajustes que hay en los archivos y mostrar el mismo widget en diferentes configuraciones. La URL de configuración se especifica en el código de inicialización del widget:
Copy
- json
<script>
const xl = new XsollaLogin.Widget({
// Other settings
settingsJSON: "url_string",
socialsJSON: "url_string",
themeJSON: "url_string"
});
</script>
Ajustes principales
Los ajustes principales del widget son:
- métodos de autorización (el objeto
authorization_methods) - campos de registro (el objeto
registration_fields) - validación de dirección de correo electrónico (el objeto
email_validation) - ajustes adicionales
La plantilla del archivo settingsJSON:
Copy
- json
{
"authorization_methods": {
// Authorization methods
},
"registration_fields": {
// Registration fields
},
"email_validation": {
// Settings for email validation
}
// Other widget settings
}
Métodos de autorización
El objetoauthorization_methods contiene una matriz con los métodos de autorización disponibles. La página de inicio de sesión se muestra de acuerdo con la configuración transmitida.Nota
Se debe transmitir al menos un método a la matriz. Cada método no puede representarse en una matriz más de una vez.
Métodos de autorización disponibles:
email: autorización mediante dirección de correo electrónico y contraseña. El parámetro se transmite por defecto si no existe un objetoauthorization_methodscon una lista definida de métodos.social: inicio de sesión social. El parámetro se transmite por defecto si no existe un objetoauthorization_methodscon una lista definida de métodos.username: autorización mediante nombre de usuario y contraseña.phone: autorización mediante el número de teléfono y un código por SMS.passwordless-email-code: autorización mediante una dirección de correo electrónico y un código enviado por correo electrónico.
Ejemplo:
Copy
- json
{
"authorization_methods": {
["email", "phone"]
}
// Other widget settings
}
Campos de registro
El objetoregistration_fields contiene una matriz de campos que se muestran en la página de registro del widget.Nota
La matriz debe contener al menos un campo. Los campos se muestran según el orden en que se transmiten a la matriz.
Además, puede especificar los siguientes parámetros a un campo:
required(booleano): si el campo es obligatorio.default_value(matriz): una matriz de valores por defecto (para una lista de países o plataformas).validation(objeto): parámetros de validación:allowed_characters(string/cadena): caracteres permitidos para el campo. Separados por una coma en la lista como los valores de la expresión regular.max_length(número): número máximo de caracteres.min_length(número): número mínimo de caracteres.regexps(matriz con strings): expresión regular para validar el valor introducido.
Ejemplo:
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": {}
}
]
}
Validación de direcciones de correo electrónico
El objetoemail_validation contiene el parámetro se_xsolla_email_validator que valida los datos introducidos en el campo email.Ejemplo:
Copy
- json
{
// Other widget settings
"email_validation": {
"use_xsolla_email_validator": true
}
}
Ajustes adicionales
Los ajustes adicionales se transmiten en el objeto JSON raíz del archivosettingsJSON.Ejemplo:
Copy
- json
{{
// Other widget settings
"can_register": true,
"can_reset_password": true,
"cookie_policy": "https://someurl.com"
}
Configuración de redes sociales
Para el inicio de sesión mediante redes sociales, se transmiten los siguientes parámetros en el archivo socialsJSON:
- lista de regiones
- parámetros y tipos de redes sociales para cada región
La plantilla del archivo 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ón tiene un número:
- 1 - Europa
- 2 - China
- 3 - Corea del Norte y del Sur
- 4 - CEI
- 5 - América del Norte y del Sur
- 6 - resto del mundo
El tipo de red social se define para cada región. Hay 2 tipos de redes sociales: primarias (primary) y secundarias (secondary). Las redes sociales primarias se muestran como un botón grande y son más visibles en la página del widget. Las redes sociales secundarias se muestran como botones pequeños y son menos visibles.
Cada tipo de red social contiene una matriz de objetos:
Nota
Cada red social debe estar representada en una matriz al menos una vez. La matriz puede estar vacía.
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
}
Configuración del tema
Los ajustes del tema del widget incluyen:
- ajustes de color y tamaño del widget
- ajustes de redondez (el objeto
rounding) - ajustes de fondo del widget (el objeto
background) - ajustes de encabezado (el objeto
header) - ajustes de pestañas del widget (el objeto
tabs) - ajustes de visualización de redes sociales (los objetos
primary_socialsysecondary_socials) - ajustes de escena (el objeto
scene)
La plantilla del archivo 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
}
}
Color y tamaño del widget
El color y el tamaño del widget se transmiten en el objeto JSON raíz del archivothemeJSON.Ejemplo:
Copy
- json
{
// Other theme settings
"primary_color": "#708090",
"secondary_color": "#4682B4"
}
Redondez
El objeto rounding contiene parámetros de redondez para diferentes elementos del widget. La propiedad se aplica a las cuatro esquinas simultáneamente.
Ejemplo:
Copy
- json
{
// Other theme settings
"rounding": {
"inputs": "8px",
"widget": "8px"
}
}
Fondo
El objetobackground contiene los parámetros de fondo del widget.Ejemplo:
Copy
- json
{
// Other theme settings
"background": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"opacity": "3"
}
}
}
Header (Encabezado)
El objetoheader contiene los parámetros del encabezado del widget; una zona situada encima de todos los campos del widget.Ejemplo:
Copy
- json
{
// Other theme settings
"header": {
"image": {
"url": "https://someurl.com",
"opacity": "3",
"size": "cover"
}
}
}
Pestañas
El objetotabs contiene un parámetro hide. Este parámetro gestiona la visualización de pestañas de registro o autorización en el widget.Ejemplo:
Copy
- json
{
// Other theme settings
"tabs": {
"hide": true
}
}
Visualización de las redes sociales
Los objetosprimary_socials y secondary_socials contienen el parámetro hide que gestiona la visualización de las redes sociales primarias y secundarias en un widget.| Parámetro | Tipo | Descripción |
|---|---|---|
ocultar | boolean | Si se desea ocultar o no las redes sociales. El valor por defecto es false. |
Copy
- json
{
// Other theme settings
"primary_socials": {
"hide": true
},
"secondary_socials": {
"hide": false
}
}
Escena
El objetoscene contiene parámetros para una escena, un área alrededor del widget.Ejemplo:
Copy
- json
{
// Other theme settings
"scene": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"size": "cover"
}
}
}
¿Te ha resultado útil este artículo?
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
