Cómo integrar la autenticación de usuario a través de Xsolla ID

Cómo funciona

Puede añadir autenticación de usuario con Xsolla ID, la plataforma de identidad compartida, que proporciona acceso sin interrupciones a todos los productos de Xsolla.

Los métodos de autenticación disponibles dependen de la configuración de su proyecto. Xsolla ID solo se puede usar si la autenticación mediante Xsolla Wallet está deshabilitada (está deshabilitada por defecto en los proyectos nuevos). Una vez deshabilitada, la autenticación mediante Xsolla Wallet se elimina permanentemente. Para volver a habilitarla, póngase en contacto con su gestor de éxito del cliente o envíe un correo electrónico a [email protected].

La imagen anterior muestra una de las variantes del widget de inicio de sesión. Puede personalizar el widget.

Puede implementar uno de los siguientes escenarios de usuario:

Abrir la página de autenticación de Xsolla ID en una ventana modal al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana modal.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la URL especificada en el campo Callback URL de la Cuenta del editor.
Redirigir a la página de autenticación de Xsolla ID al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la pantalla de autenticación de Xsolla ID, que se abre en la misma ventana.
3. El usuario completa el proceso de autenticación en Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de la Cuenta del editor.
Redirigir a la página de autenticación de Xsolla ID en una ventana emergente al hacer clic en un botón de su sitio web:
1. El usuario hace clic en un botón de su sitio web.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana emergente.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de la Cuenta del editor.

Puede implementar uno de los siguientes escenarios de usuario:

Abrir la página de autenticación de Xsolla ID en una ventana modal al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana modal.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la URL especificada en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la pantalla de autenticación de Xsolla ID, que se abre en la misma ventana.
3. El usuario completa el proceso de autenticación en Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID en una ventana emergente al hacer clic en un botón de su sitio web:
1. El usuario hace clic en un botón de su sitio web.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana emergente.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.

Puede implementar uno de los siguientes escenarios de usuario:

Abrir la página de autenticación de Xsolla ID en una ventana modal al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana modal.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la URL especificada en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la pantalla de autenticación de Xsolla ID, que se abre en la misma ventana.
3. El usuario completa el proceso de autenticación en Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID en una ventana emergente al hacer clic en un botón de su sitio web:
1. El usuario hace clic en un botón de su sitio web.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana emergente.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.

Puede implementar uno de los siguientes escenarios de usuario:

Abrir la página de autenticación de Xsolla ID en una ventana modal al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana modal.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la URL especificada en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la pantalla de autenticación de Xsolla ID, que se abre en la misma ventana.
3. El usuario completa el proceso de autenticación en Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID en una ventana emergente al hacer clic en un botón de su sitio web:
1. El usuario hace clic en un botón de su sitio web.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana emergente.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.

Puede implementar uno de los siguientes escenarios de usuario:

Abrir la página de autenticación de Xsolla ID en una ventana modal al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana modal.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la URL especificada en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID al hacer clic en el botón Log in with Xsolla del widget de inicio de sesión:
1. El usuario hace clic en el botón Log in with Xsolla del widget de inicio de sesión.
2. Se redirige al usuario a la pantalla de autenticación de Xsolla ID, que se abre en la misma ventana.
3. El usuario completa el proceso de autenticación en Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.
Redirigir a la página de autenticación de Xsolla ID en una ventana emergente al hacer clic en un botón de su sitio web:
1. El usuario hace clic en un botón de su sitio web.
2. Se redirige al usuario a la página de autenticación de Xsolla ID, que se abre en una ventana emergente.
3. El usuario completa el proceso de autenticación en la página de autenticación de Xsolla ID.
4. Se redirige al usuario a la página cuya URL se especifica en el campo Callback URL de su cuenta.

Cómo conseguirlo

Para integrar el inicio de sesión con red social mediante Xsolla ID:

Integre el widget de inicio de sesión.
Habilite Xsolla como red social.
Implemente la obtención del token de autorización de usuario.

Añada el widget de Xsolla Login a su aplicación: proporciona una interfaz de autenticación de usuario lista para usar.

En su proyecto en la Cuenta del editor, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Other tools > Login.

Haga clic en Configure en el panel de un proyecto de Login.
Vaya al bloque Authentication y seleccione Social login.
Seleccione Xsolla en la lista de redes sociales.

Haga clic en el icono ⚙ y seleccione Connect.
Configure uno de los escenarios de usuario:

Autenticación en la misma ventana

Para redirigir al usuario a la página de autenticación de Xsolla ID después de que haga clic en el botón Log in with Xsolla del widget de inicio de sesión:

Vaya a la sección Authentication y haga clic en Callback URLs.
En el campo Callback URL, introduzca la URL a la que redirigir al usuario después de la autenticación.
En el parámetro callbackUrl del código del widget de inicio de sesión, transmita la URL a la que redirigir al usuario después de la autenticación.

Ejemplo de código del widget:

Copy

Full screen

Small screen

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  callbackUrl: '[Your Callback URL]',
6});

Autenticación en ventana emergente

Para redirigir al usuario a la página de autenticación de Xsolla ID en una ventana emergente después de que haga clic en un botón de su sitio web:

En la página de navegación, vaya a la sección Authentication y haga clic en Callback URLs.
Asegúrese de que la siguiente URL se haya añadido a la sección Callback URL: https://login.xsolla.com/api/social/oauth2/callback.
En el código del widget de inicio de sesión, transmita el valor true en el parámetro babkaLoginPopup y la URL a la que redirigir al usuario después de la autenticación en el parámetro callbackUrl.

Ejemplo de código del widget:

Copy

Full screen

Small screen

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginPopup: true,
6  callbackUrl: '[Your Callback URL]',
7});

Añada a su sitio web el botón que abre la página de autenticación de Xsolla ID.

Ejemplo de código del botón Log in with Xsolla:

Copy

Full screen

Small screen

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

Para redirigir al usuario a la página de autenticación de Xsolla ID en una ventana modal después de que haga clic en el botón Log in with Xsolla del widget de inicio de sesión:

Vaya a la sección Authentication y haga clic en Callback URLs.
En el campo Callback URL, introduzca la URL a la que redirigir al usuario después de la autenticación.
En el código del widget de inicio de sesión, transmita el valor popup en el parámetro babkaLoginFlow y la URL a la que redirigir al usuario después de la autenticación en el parámetro callbackUrl.

Ejemplo de código del widget:

Copy

Full screen

Small screen

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginFlow: "popup",
6  callbackUrl: '[Your Callback URL]',
7});

Obtener el token de autorización de usuario

Después de la autorización en Xsolla ID, se redirigirá al usuario a la URL especificada en el parámetro callbackUrl. El token de autorización de usuario se transmite en el parámetro token.

Para incrustar el token JWT de OAuth de Xsolla ID en el token JWT de Xsolla Login:

En su proyecto en la Cuenta del editor, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Players > Login.

En su proyecto en la cuenta, vaya a Other tools > Login.

Haga clic en Configure en el panel de un proyecto de Login.
Vaya al bloque Authentication y seleccione Social login.
Active la opción Embed social network JWT token.
Haga clic en Save changes.

¡Gracias por tu mensaje!

Nos ayudará a mejorar tu experiencia.

Última actualización: 7 de Octubre de 2026

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

Contenidos

Cómo funciona
Cómo conseguirlo
Integrar el widget de inicio de sesión
Habilitar Xsolla como red social
Obtener el token de autorización de usuario

Informar de un problema

Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.

Déjanos tu correo electrónico para que te podamos responder

¡Gracias por tu mensaje!

No hemos podido enviar sus comentarios

Vuelva a intentarlo más tarde o escríbanos a [email protected].