Guía de integración

Opciones de autenticación

Almacenamiento de datos de usuarios

Seguridad

Personalización

Proveedores de servicios de comunicación

Características

Instrucciones

Extensiones

Ajustes legales

Referencias

Kits SDK

Archivos JSON con los ajustes del widget

Los ajustes del widget se encuentran en los siguientes archivos JSON:

settingsJSON - ajustes principales
socialsJSON - ajustes de inicio de sesión mediante redes sociales
themeJSON - 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

Full screen

Small screen

<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

Full screen

Small screen

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

  // Other widget settings
}

Métodos de autorización

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

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 objeto authorization_methods con una lista definida de métodos.
social - inicio de sesión social. El parámetro se transmite por defecto si no existe un objeto authorization_methods con 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

Full screen

Small screen

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

  // Other widget settings
}

Campos de registro

El objeto registration_fields contiene una matriz de campos que se muestran en la página de registro del widget.

Parámetro	Tipo	Descripción
correo electrónico	correo electrónico	Dirección de correo electrónico del usuario.
nombre de usuario	string	Cuenta de usuario.
contraseña	transmitir	Contraseña.
password_confirm	transmitir	Confirmación de la contraseña.
nombre de pila	string	Nombre de usuario.
family-name (apellidos)	string	Apellidos del usuario.
alias	string	Alias del usuario.
cumpleaños	fecha	Fecha de nacimiento.
sexo/género	string	Sexo/género.
country-name (nombre del país)	seleccionar	País.
plataforma	selección múltiple	Plataforma.
promo_email_agreement	boolean	Consentimiento para recibir material promocional.

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

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

Validación de direcciones de correo electrónico

El objeto email_validation contiene el parámetro se_xsolla_email_validator que valida los datos introducidos en el campo email.

Parámetro	Tipo	Descripción
use_xsolla_email_validator	boolean	Si se utiliza o no la validación adicional de los datos introducidos en el campo `email`. Si es `true`, una dirección de correo electrónico se valida en los lados front-end y back-end con funciones como SMTP, RFC y Greylist. Si es `false`, la dirección de correo electrónico se valida solamente en el lado del front-end. `false` por defecto.

Ejemplo:

Copy

Full screen

Small screen

{
  // Other widget settings

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

Ajustes adicionales

Los ajustes adicionales se transmiten en el objeto JSON raíz del archivo settingsJSON.

Parámetro	Tipo	Descripción
can_register	boolean	Si desea o no habilitar el registro para los usuarios. `true` por defecto.
can_reset_password	boolean	Si desea o no habilitar el restablecimiento de contraseña para los usuarios. `true` por defecto.
consent_url	string	Enlace a la política de consentimiento del usuario.
cookie_policy	string	Enlace a la política de cookies.
privacy_policy	string	Enlace a la política de privacidad.
tos_url	string	Enlace a las condiciones de uso.
game_name	string	Nombre de un proyecto o juego. Se muestra en algunos métodos de autorización.

Ejemplo:

Copy

Full screen

Small screen

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

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ó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:

Parámetro	Tipo	Descripción
nombre	string	Nombre de una red social. Opciones disponibles: `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` y `youtube`.
jwt	string	Enlace para abrir una red social si se utiliza la autorización mediante JWT.
oauth2	string	Enlace para abrir una red social si se utiliza la autorización basada en el protocolo OAuth 2.0.

Cada red social debe estar representada en una matriz al menos una vez. La matriz puede estar vacía.

Ejemplo:

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
}

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_socials y secondary_socials)
ajustes de escena (el objeto scene)

La plantilla del archivo 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
  }
}

Color y tamaño del widget

El color y el tamaño del widget se transmiten en el objeto JSON raíz del archivo themeJSON.

Parámetro	Tipo	Descripción
primary_color	string	Color primario del widget (color de los botones y de los bordes de los campos de entrada activos) en formato RGB o HEX. El valor por defecto es `#0073F7`.
secondary_color	string	Color secundario del widget (color de los campos de entrada inactivos) en formato RGB o HEX. El valor por defecto es `#DADADA`.
error_color	string	Color de los textos de error en formato RGB o HEX. El valor por defecto es `#EB002F`.
text_color	string	Color del texto principal en formato RGB o HEX. El valor por defecto es `#000000`.

Ejemplo:

Copy

Full screen

Small screen

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

Parámetro	Tipo	Descripción
entradas	string	Redondez en píxeles para los campos activos. El valor por defecto es `6px`.
botones	string	Redondez en píxeles para los botones. El valor por defecto es `100px`.
widget	string	Redondez en píxeles para el widget. El valor por defecto es `6px`.

Ejemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

  }
}

Fondo

El objeto background contiene los parámetros de fondo del widget.

Parámetro	Tipo	Descripción
color	string	Color de fondo en formato RGB o HEX. El valor por defecto es `#FFFFFF`.
imagen	object	Imagen de fondo. El objeto contiene un enlace a la imagen y los ajustes de opacidad. El valor de opacidad por defecto es `1`.

Ejemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Header (Encabezado)

El objeto header contiene los parámetros del encabezado del widget; una zona situada encima de todos los campos del widget.

Parámetro	Tipo	Descripción
imagen	object	Imagen de fondo del encabezado. El objeto contiene un enlace a la imagen, los ajustes de opacidad y el tamaño de la imagen de fondo. El valor de opacidad por defecto es `1`. Los valores disponibles del tamaño de la imagen de fondo se corresponden con los valores de la propiedad CSS `background-size` (`cover` por defecto).

Ejemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Pestañas

El objeto tabs contiene un parámetro hide. Este parámetro gestiona la visualización de pestañas de registro o autorización en el widget.

Parámetro	Tipo	Descripción
ocultar	boolean	Si se ocultan las pestañas de autorización o registro en un widget. Use el valor `true` para, por ejemplo, ocultar temporalmente la pestaña de registro o visualizar las páginas de registro y autorización por separado. El valor por defecto es `false`.

Ejemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Visualización de las redes sociales

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

Ejemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Escena

El objeto scene contiene parámetros para una escena, un área alrededor del widget.

Parámetro	Tipo	Descripción
color	string	Color de fondo en formato RGB o HEX. El valor por defecto es `#FFFFFF`.
imagen	object	Imagen de fondo. El objeto contiene un enlace a la imagen, los ajustes de opacidad y el tamaño de la imagen de fondo. Los valores disponibles del tamaño de la imagen de fondo se corresponden con los valores de la propiedad CSS `background-size` (`cover` por defecto).

Ejemplo:

Copy

Full screen

Small screen

{
  // Other theme settings

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

¡Gracias por tu mensaje!

Nos ayudará a mejorar tu experiencia.

Última actualización: 22 de Enero de 2024

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Contenidos

Ajustes principales
Métodos de autorización
Campos de registro
Validación de direcciones de correo electrónico
Ajustes adicionales
Configuración de redes sociales
Configuración del tema
Color y tamaño del widget
Redondez
Fondo
Header (Encabezado)
Pestañas
Visualización de las redes sociales
Escena

Your browser is not supported. Please try a different browser

La respuesta se basa en las siguientes fuentes:

Déjanos un comentario (opcional)

Déjanos un comentario (opcional)

Login

Archivos JSON con los ajustes del widget

Ajustes principales

Métodos de autorización

Campos de registro

correo electrónico

nombre de usuario

contraseña

password_confirm

nombre de pila

family-name (apellidos)

alias

cumpleaños

sexo/género

country-name (nombre del país)

plataforma

promo_email_agreement

Validación de direcciones de correo electrónico

use_xsolla_email_validator

Ajustes adicionales

can_register

can_reset_password

consent_url

cookie_policy

privacy_policy

tos_url

game_name

Configuración de redes sociales

nombre

jwt

oauth2

Configuración del tema

Color y tamaño del widget

primary_color

secondary_color

error_color

text_color

Redondez

entradas

botones

widget

Fondo

color

imagen

Header (Encabezado)

imagen

Pestañas

ocultar

Visualización de las redes sociales

ocultar

Escena

color

imagen