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

Cómo funciona

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

Puedes 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 en el widget de inicio de sesión:

  1. El usuario hace clic en el botón Log in with Xsolla en el widget de inicio de sesión.
  2. El usuario es redirigido 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. El usuario es redirigido a la URL especificada en el campo Callback URL en 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 en el widget de inicio de sesión:

  1. El usuario hace clic en el botón Log in with Xsolla en el widget de inicio de sesión.
  2. El usuario es redirigido 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. El usuario es redirigido a la página cuya URL está especificada en el campo Callback URL en 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 en tu sitio web:

  1. El usuario hace clic en un botón en tu sitio web.
  2. El usuario es redirigido 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. El usuario es redirigido a la página cuya URL está especificada en el campo Callback URL en la Cuenta del editor.

Cómo obtenerlo

Para integrar el inicio de sesión con red social a través de Xsolla ID:

1. Integra el widget de inicio de sesión.
2. Habilita Xsolla como red social.
3. Implementa la obtención del token de autorización de usuario.

Integración del widget de inicio de sesión

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

Habilitar Xsolla como red social

1. En tu proyecto en la Cuenta del editor, ve a la sección Jugadores > Login.

2. Haz clic en Configure en el panel de un proyecto de inicio de sesión.

3. Ve al bloque de Autenticación y selecciona Inicio de sesión con red social.

4. Selecciona Xsolla de la lista de redes sociales.

5. Haz clic en el icono ⚙ y selecciona Connect.

6. Configura uno de los escenarios de usuario:

   • Autenticación en la misma ventana
   • Autenticación en ventana emergente
   • Autenticación en ventana modal

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 en el widget de inicio de sesión:

1. Ve a la sección Autenticación y haz clic en Callback URLs.
2. En el campo Callback URL, introduce la URL a la que redirigir al usuario después de la autenticación.
3. En el parámetro callbackUrl del código del widget de inicio de sesión, pasa la URL a la que redirigir al usuario después de la autenticación.

Ejemplo de código del widget:

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 en tu sitio web:

1. En la página de navegación, ve a la sección Autenticación y haz clic en Callback URLs.
2. Asegúrate de que la siguiente URL esté añadida en la sección Callback URL: https://login.xsolla.com/api/social/oauth2/callback.
3. En el código del widget de inicio de sesión, pasa el valor true en el parámetro babkaLoginPopup, y pasa 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:

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});

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

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

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

Autenticación en ventana modal

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 en el widget de inicio de sesión:

1. Ve a la sección Autenticación y haz clic en Callback URLs.
2. En el campo Callback URL, introduce la URL a la que redirigir al usuario después de la autenticación.
3. En el código del widget de inicio de sesión, pasa el valor popup en el parámetro babkaLoginFlow, y pasa 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:

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});

Obtención del token de autorización de usuario

Después de la autorización en el lado de Xsolla ID, el usuario será redirigido a la URL especificada en el parámetro callbackUrl. El token de autorización de usuario se pasa en el parámetro token.

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

1. En tu proyecto en la Cuenta del editor, ve a la sección Jugadores > Login.
2. Haz clic en Configure en el panel de un proyecto de inicio de sesión.
3. Ve al bloque de Autenticación y selecciona Inicio de sesión con red social.
4. Activa el conmutador Embed social network JWT token.
5. Haz clic en Save changes.