Si utiliza su propio sistema de autenticación, en esta fase solo tiene que asegurarse de que almacene y pueda transmitir los datos que Xsolla necesita para gestionar las suscripciones:

• un ID de usuario único
• el correo electrónico del usuario

En este caso, recomendamos crear un sitio web utilizando la plantilla de Web Shop y configurar la autenticación de usuarios por ID o mediante enlaces profundos.

Para ello:

1. Abra su proyecto en Cuenta del editor y vaya a Storefronts > Websites.
2. Haga clic en Create site.
3. Seleccione la plantilla Web Shop.
4. Añada una URL a una plataforma externa donde esté disponible su juego. Esto le permite crear rápidamente una página con el estilo de su juego: las imágenes y el título del juego, los datos del desarrollador y una combinación de colores se añaden automáticamente a la página. Si no quiere utilizar esta información, desactive la opción Copy game info via App Store or Google Play URL.

5. Haga clic en Create Web Shop.

6. Configure una de las siguientes opciones de autenticación de usuario:

   • Autenticación mediante ID de usuario
   • Autenticación mediante ID de usuario y enlaces profundos
   • Autenticación mediante enlaces profundos
   • Autenticación mediante Xsolla Login con ID de usuario vinculado

Establecer la autenticación de usuarios en Cuenta del editor

Xsolla le permite configurar varios modos de autenticar a los usuarios. Esta guía contiene instrucciones sobre la manera más rápida de integrar y configurarlos: usando un widget prediseñado para autenticar a los usuarios mediante un código de un solo uso o mediante una red social.

Posteriormente, puede cambiar el método de autenticación de usuarios o usar otra opción de integración.

Xsolla proporciona plantillas de widgets estándar. Su apariencia y contenido vienen determinados por el Método de Inicio de sesión elegido para su proyecto y por la configuración de personalización del widget de la Cuenta del editor.

Vista del widget estándar para la autenticación mediante un código de un solo uso o a través de una red social:

Para establecer la autenticación de usuarios en Cuenta del editor:

1. Abra su proyecto en Cuenta del editor y vaya a Players > Login.
2. En la sección del Dashboard, haga clic en Create Login project.
3. Seleccione Standard Login project y haga clic en Create and set up. Espere hasta que se cree su nuevo proyecto de inicio de sesión. Entonces verá la página del proyecto de inicio de sesión.
4. En el bloque Login methods, seleccione Passwordless login.
5. Haga clic en Configure.
6. Establezca la autorización utilizando un código de un solo uso:
   1. En el bloque Passwordless login, seleccione Callback URLs.
   2. En el campo Callback URL, añada la URL a la que se redirige al usuario tras autenticarse correctamente.
   3. Haga clic en Save changes.
7. Establezca la autenticación a través de redes sociales (opcional):
   1. Haga clic en el nombre de su proyecto de inicio de sesión en la ruta de navegación para volver a la página del proyecto de inicio de sesión.
   2. Vaya al bloque Authentication y seleccione Social login.
   3. Conecte las redes sociales que los usuarios podrán utilizar para registrarse e iniciar sesión en la aplicación:

1. 1. • Para conectar la red social deseada, haga clic en el icono ⚙ y seleccione Connect.

1. 1. • Para conectar varias redes sociales a la vez, seleccione los paneles necesarios (sus bordes se volverán verdes). A continuación, en el menú desplegable Manage, seleccione Connect.

1. 1. • Para conectar todas las redes sociales disponibles a la vez, haga clic en Select all. A continuación, en el menú desplegable Manage, seleccione Connect.

1. 4. Haga clic en Save changes.

Puede probar la configuración del widget. Para ello, haga clic en Check now en el lado izquierdo de la pantalla e inicie sesión.

Durante el proceso de integración, necesitará un ID de proyecto de inicio de sesión. Lo encontrará en su proyecto en Cuenta del editor, en Players > Login > Dashboard.

Implementar la autenticación de usuarios en la aplicación

A continuación, encontrará instrucciones sobre la forma más rápida de integrar Xsolla Login: integrar un widget web prediseñado en la aplicación.

Si quiere utilizar su propia interfaz de usuario para que los usuarios inicien sesión en su aplicación, debe implementar la lógica de autenticación de usuarios utilizando los métodos Login API o SDK.

Conectar el SDK del widget de Xsolla Login

El widget de Xsolla Login está disponible para su instalación mediante el gestor de paquetes NPM o la etiqueta <script> de una página HTML.

Conecte el widget del SDK de Xsolla Login de una de las siguientes maneras:

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

Inicializar el SDK del widget de Xsolla Login

Inicialice el widget empleando uno de los siguientes métodos. Especifique los siguientes parámetros:

• projectId: ID del proyecto de inicio de sesión. Podrá encontrarlo en su proyecto de Cuenta del editor, en Players > Login > Dashboard.
• preferredLocale: el idioma de la interfaz. Se admiten los siguientes idiomas: árabe. (ar_AE), búlgaro (bg_BG), checo (cz_CZ), inglés (en_US), alemán (de_DE), español (es_ES), francés (fr_FR), hebreo (he_IL), italiano (it_IT), japonés (ja_JP), coreano (ko_KR), polaco (pl_PL), portugués (pt_BR), rumano (ro_RO), ruso (ru_RU), tailandés (th_TH), turco (tr_TR), vietnamita (vi_VN), chino simplificado (zh_CN) y chino tradicional (zh_TW).
• clientId: ID de cliente OAuth 2.0. Podrá encontrarlo en su proyecto de Cuenta del editor, en Players > Login > su proyecto de inicio de sesión > Security > OAuth 2.0.
• redirectUri: la URL a la que se redirige al usuario después de que confirme su cuenta, inicie sesión o confirme el restablecimiento de la contraseña. Debe especificarse en la Cuenta del editor en los ajustes del cliente OAuth 2.0.

Deje intactos el resto de parámetros.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

Añadir la apertura del widget de Xsolla Login

1. Agregue un botón con el evento on-click y la función xl.open() a su página HTML:

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. Agregue el botón para abrir el widget en el bloque <div> de su página HTML.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

Establecer la autenticación de usuarios en Cuenta del editor

Xsolla le permite configurar varios modos de autenticar a los usuarios. Esta guía contiene instrucciones sobre la manera más rápida de configurarlo: autenticar a los usuarios mediante un código de un solo uso o mediante una red social.

Más adelante, puede cambiar el método de autenticación del usuario.

Para establecer la autenticación de usuarios en Cuenta del editor:

1. Abra su proyecto en Cuenta del editor y vaya a Players > Login.
2. En la sección del Dashboard, haga clic en Create Login project.
3. Seleccione Standard Login project y haga clic en Create and set up. Espere hasta que se cree su nuevo proyecto de inicio de sesión. Entonces verá la página del proyecto de inicio de sesión.
4. En el bloque Login methods, seleccione Passwordless login.
5. Haga clic en Configure.
6. Establezca la autorización utilizando un código de un solo uso:
   1. En el bloque Passwordless login, seleccione Callback URLs.
   2. En el campo Callback URL, añada la URL a la que se redirige al usuario tras autenticarse correctamente.
   3. Haga clic en Save changes.
7. Establezca la autenticación a través de redes sociales (opcional):
   1. Haga clic en el nombre de su proyecto de inicio de sesión en la ruta de navegación para volver a la página del proyecto de inicio de sesión.
   2. Vaya al bloque Authentication y seleccione Social login.
   3. Conecte las redes sociales que los usuarios podrán utilizar para registrarse e iniciar sesión en la aplicación:

1. 1. • Para conectar la red social deseada, haga clic en el icono ⚙ y seleccione Connect.

1. 1. • Para conectar varias redes sociales a la vez, seleccione los paneles necesarios (sus bordes se volverán verdes). A continuación, en el menú desplegable Manage, seleccione Connect.

1. 1. • Para conectar todas las redes sociales disponibles a la vez, haga clic en Select all. A continuación, en el menú desplegable Manage, seleccione Connect.

1. 4. Haga clic en Save changes.

Establecer la autenticación de usuarios en el creador de sitios web

Para crear un sitio y configurar la autenticación de usuarios:

1. Abra su proyecto en Cuenta del editor y vaya a Storefronts > Websites.
2. Haga clic en Create site.
3. Seleccione cualquier plantilla de sitio y proceda a crear su sitio.

4. En el creador, vaya a Login settings > Xsolla Login y seleccione la opción de autenticación configurada previamente en la lista desplegable.
5. Para que la ventana modal de autorización coincida con la combinación de colores del sitio, active la opción Use site theme (recomendado).
6. En la sección Layout, configure el logotipo y el fondo personalizado si es necesario.