Cómo integrar la autenticación de usuarios mediante la cuenta de Xsolla

Cómo funciona

Puede agregar autenticación de usuario con la cuenta Xsolla en Xsolla Wallet.

Escenarios de usuario

Puede implementar uno de los siguientes escenarios de usuario:

1. Abrir la página de autenticación Xsolla Wallet en una ventana modal pulsando en el botón Log in with Xsolla en el widget de inicio de sesión:
   1. El usuario pulsa en el botón Log in with Xsolla en el widget de inicio de sesión.
   2. Se redirige al usuario a la pantalla de autenticación Xsolla Wallet que se abre en una ventana modal.
   3. El usuario finaliza el proceso de autenticación en Xsolla Wallet.
   4. Se le redirige a la página cuya URL se especifica en el campo Callback URL en Cuenta del editor.

2. Redirigir a la página de autenticación de Xsolla Wallet pulsando en el botón Log in with Xsolla del widget de inicio de sesión:
   1. El usuario pulsa en el botón Log in with Xsolla en el widget de inicio de sesión.
   2. Se redirige al usuario a la pantalla de autenticación de Xsolla Wallet que se abre en la misma ventana.
   3. El usuario finaliza el proceso de autenticación en Xsolla Wallet.
   4. Se le redirige a la página cuya URL se especifica en el campo Callback URL en Cuenta del editor.

3. Redireccionamiento a la página de autenticación de Xsolla Wallet en una ventana emergente haciendo clic en un botón de su sitio web:
   1. El usuario hace clic en un botón de su sitio web.
   2. Se le redirige a la pantalla de autenticación de Xsolla Wallett que se abre en una ventana emergente.
   3. El usuario realiza el proceso de autenticación en Xsolla Wallet.
   4. Se le redirige a la página cuya URL se especifica en el campo Callback URL de Cuenta del editor.

Cómo conseguirlo

Para integrar la autenticación mediante Xsolla como una red social:

1. Cree un cliente OAuth 2.0 de la cuenta de Xsolla.
2. Integre el widget de Login.
3. Habilite Xsolla como una red social.
4. Implemente la recuperación del token de autorización del usuario.

Creación del cliente de OAuth 2.0 de la cuenta de Xsolla

1. Cree un proyecto en Cuenta del editor.
2. Cree un proyecto de Login en Cuenta del editor.
3. Contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com y facilite la siguiente información:

4. El equipo de integración de Xsolla creará un cliente OAuth 2.0 de su cuenta de Xsolla y le proporcionará su identificador y clave secreta. Estos datos son necesarios para obtener el token de autorización de usuario.

Integración de un widget de inicio de sesión

Habilitar Xsolla como una red social

1. Abra su proyecto en Cuenta del editor y vaya a la sección de Login.
2. Haga clic en Configure en el panel de un proyecto de Login.
3. Vaya a la sección Authentication y seleccione la sección Social login.
4. SeleccioneXsolla de la lista de redes sociales.

5. Haga clic en el icono ⚙ y seleccione Settings.
6. Rellene los siguientes campos:
   • ID de aplicación: el ID de cliente de OAuth 2.0 de la cuenta de Xsolla que recibió de Xsolla.
   • Clave secreta de aplicación: la clave de OAuth 2.0 de la cuenta de Xsolla que recibió de Xsolla.
   • Enlace a su sitio web: el sitio web desde el que los servidores de Xsolla reciben una solicitud para intercambiar un código de autorización por un token de autorización. Especifique la misma dirección URL que se indicó como parámetro Audience al crear el cliente de OAuth 2.0 de la cuenta de Xsolla.

7. Haz clic en Connect.

8. Establezca uno de los escenarios de usuario:
   • Redireccionamiento a la página de autenticación Xsolla Wallet pulsando en el botón Log in with Xsolla del widget de inicio de sesión (por defecto):
     1. Vaya a la sección Authentication y seleccione la sección Callback URLs.
     2. En el campo Callback URL, introduzca la dirección URL de la página a la que desea redirigir a los usuarios tras la autenticación.
     3. En el parámetro callbackUrl del código del widget de inicio de sesión, transmita la dirección URL de la página a la que se debe redirigir al usuario tras la autenticación.

Ejemplo de código del widget:

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

1. • Redirigir a la página de autenticación Xsolla Wallet en una ventana emergente pulsando en un botón de su sitio web:
     1. En la página de navegación, vaya a la sección Authentication y seleccione la sección Callback URLs.
     2. Asegúrese de que se agregan las siguientes URL en la sección Callback URL:
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     3. . En el código del widget de inicio de sesión, transmita el valor true en el parámetro babkaLoginPopup y transmita la dirección URL de la página a la cual se debe redirigir al usuario tras la autenticación en el parámetro callbackUrl.

Ejemplo de código del widget:

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

1. • 4. Agregue el botón que abre la página de autenticación de Xsolla Wallet a su sitio web.

Ejemplo de código del botón Log in with Xsolla (Iniciar sesión con Xsolla):

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • Abrir la página de autenticación Xsolla Wallet en una ventana modal pulsando en el botón Log in with Xsolla en el widget de inicio de sesión:
     1. Vaya a la sección Authentication y seleccione la sección Callback URLs.
     2. En el campo Callback URL, introduzca la dirección URL de la página a la que desea redirigir al usuario tras la autenticación.
     3. En el código del widget de inicio de sesión, transmita el valor popup en el parámetro babkaLoginFlow y transmita la dirección URL de la página a la que debe redirigirse al usuario tras la autenticación en el parámetro callbackUrl.

Ejemplo de código del widget:

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

Obtener un token de autorización de usuario

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

Para integrar el token OAuth de la cuenta de Xsolla en el token JWT de Xsolla Login:

1. Abra su proyecto en Cuenta del editor y vaya a la sección de Login.
2. Haga clic en Configure en el panel de un proyecto de Login.
3. Vaya al bloque Authentication y seleccione la sección Social login.

4. Establezca el conmutador Embed social network JWT token en la posición On.
5. Haga clic en Save changes.