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:

npm i @xsolla/login-sdk

<script src="https://login-sdk.xsolla.com/latest/">
</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 Login. Podrá encontrarlo en su proyecto de Cuenta del editor, en la sección 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 la sección Login > your Login project > 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.

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

Añada 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:

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

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

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

Importar paquete desde un archivo

1. Descargue el SDK desde la CDN (Red de entrega de contenidos) o desde GitHub.

2. Descomprima el paquete.
3. Abra su proyecto de Unity o cree uno nuevo.
4. En el editor de Unity, vaya a Assets > Import Package > Custom Package en el menú principal y seleccione el SDK.

Establecer el compilador

1. Haga clic en Edit > Project Settings en el menú principal.
2. Vaya a la sección Player > Other Settings > Configuration.
3. Asegúrese de que Mono está seleccionado en el campo Scripting Backend.

Resolver las dependencias de Android

Para las compilaciones de Android, el SDK utiliza funciones de las bibliotecas nativas de Android.

Para resolver las dependencias y descargar las bibliotecas necesarias:

1. Especifique Android como la plataforma de compilación:
   1. En el editor de Unity, vaya a File > Build Settings en el menú principal.
   2. En el panel Platform, seleccione Android.
   3. Haga clic en Switch Platform.

2. Inicie el gestor de dependencias:
   1. En el editor de Unity, vaya a Assets > External Dependency Manager > Android Resolver > Resolve en el menú principal.
   2. Espere a que el gestor de dependencias finalice su tarea.

Como consecuencia, los archivos JAR o AAR de todas las bibliotecas de Android necesarias se descargan en la carpeta Assets/Plugins/Android.

Configurar el SDK

1. Abra su proyecto de Unity.
2. Haga clic en Window > Xsolla > Edit Settings en el menú principal.
3. Especifique los parámetros principales del proyecto en el panel Inspector de una de las siguientes maneras:

1. 1. Importe la configuración desde la Cuenta del editor:
      1. Haga clic en Fill settings by PA.
      2. Especifique los datos de autorización de la Cuenta del editor en los campos Login y Password.
      3. Haga clic en Log In.
      4. Rellene los campos de la sección Publisher Account.

1. 1. 5. Haga clic en Apply Settings.

1. 2. Especifique los parámetros manualmente:
      1. En el campo Project ID, especifique el ID del proyecto que puede encontrar en Cuenta del editor junto al nombre de su proyecto.
      2. En el campo Login ID, especifique el ID del proyecto de Login. Para obtenerlo, abra Cuenta del editor, vaya a la sección Login > Dashboard > tu proyecto de Login y haga clic en Copy ID junto al nombre del proyecto de Login.
      3. En el campo Callback URL, especifique la URL o ruta a la que se redirige a los usuarios después de que se hayan autenticado correctamente, hayan confirmado su correo electrónico o hayan restablecido su contraseña. El valor debe coincidir con el especificado en Cuenta del editor en la sección Login > tu proyecto de Login > Security > OAuth 2.0.

1. 1. 4. En el campo OAuth Client ID, especifique el ID de cliente para OAuth 2.0 que se puede encontrar en Cuenta del editor, en la sección Login > tu proyecto de Login > Security > OAuth 2.0.

4. Establezca otros ajustes si es necesario (p. ej., opciones de visualización para la interfaz de pago en la sección Pay Station UI).

Agregue la apertura del widget de Xsolla Login

Para abrir el widget, llame al método AuthViaSocialNetwork del SDK, transmitiendo los siguientes parámetros:

• onSuccess — devolución de llamada de autenticación de usuario aceptada.
• onError — devolución de llamada de error de solicitud.
• onCancel — la devolución de llamada de cancelación de la autenticación de usuario, que se desencadena cuando el usuario cierra el widget sin finalizar el proceso de autenticación.
• locale — el idioma de la interfaz de usuario. 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).

En las compilaciones independientes, el widget se abre en el navegador integrado que se incluye con el SDK. Puede utilizar una solución de navegación integrada diferente que le permita hacer un seguimiento de los cambios de URL.

Instalar el SDK

Las bibliotecas necesarias están disponibles en Maven Central.

Para instalar las bibliotecas:

1. Inicie Android Studio.
2. Abra el archivo build.gradle de su aplicación.
3. Añada las siguientes líneas a la sección de dependencias, en la cual <version_number> es la versión de la biblioteca requerida:

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

Inicializar el SDK

Inicialice la biblioteca de Login llamando al método estático al inicio de la aplicación. Para ello, agregue las siguientes líneas al código fuente de su proyecto de Android:

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

Agregue la apertura del widget de Xsolla Login

Para abrir el widget:

1. Llame al método XLogin.startAuthWithXsollaWidget de la biblioteca de Login, transmitiendo los siguientes parámetros:

1. • fragment o activity — el fragmento o actividad en curso.

1. • callback — la devolución de llamada del estado.

1. • locale — el idioma de la interfaz de usuario (opcional). 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).

2. Dentro del método onActivityResult, llame al método XLogin.finishAuthWithXsollaWidget de la biblioteca de Login, transmitiendo los siguientes parámetros:

1. • activity — la actividad en curso. Es necesario para procesar el contexto de la aplicación.

1. • activityResultRequestCode — el código de solicitud del método onActivityResult. Se usa para identificar la solicitud original.

1. • activityResultCode — el código de resultado del método onActivityResult. Le permite determinar si la operación se realizó correctamente.

1. • activityResultData — los datos devueltos desde onActivityResult. Contiene los resultados de la operación.

1. • activity — la devolución de llamada del estado. Se usa para procesar el resultado de la autenticación.

3. Cuando vaya a procesar el resultado de la autorización, inicialice la biblioteca de Store.

Inicializar la biblioteca de Store:

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

Instalar el SDK

1. Descargar el lanzador de Epic Games.
2. Crear un nuevo proyecto de Unreal Engine.

3. Descargue e instale el SDK:
   1. Para descargar e instalar el SDK desde Unreal Engine Marketplace:
      1. Acceda a la página del SDK en Unreal Engine Marketplace.
      2. Haga clic en Open in Launcher.

1. 1. 3. Vaya al lanzador de Epic Games.

1. 1. 4. Haga clic en Install to Engine.Abra su proyecto de Unreal Engine en Unreal Editor.
      5. Vaya a la sección de Settings > Plugins > Installed > Xsolla SDK. Marque la casilla Enabled y haga clic en Restart Now para guardar la configuración y volver a cargar Unreal Editor.

1. 2. Para descargar e instalar el SDK desde GitHub:
      1. Descargue el paquete con el SDK para su versión del motor.
      2. Descomprima el paquete.
      3. Mueva la carpeta del SDK al directorio plugins presente en la raíz de su proyecto de Unreal Engine.

Configurar el SDK

1. Abra su proyecto de Unreal Engine en Unreal Editor.
2. Acceda a la Settings > Project Settings > Plugins > Xsolla Settings > General y defina los parámetros del proyecto:

1. 1. En el campo Project ID, especifique el ID del proyecto que puede encontrarse en Cuenta del editor junto al nombre de su proyecto.
   2. En el campo Login ID, especifique el ID del proyecto de Login. Para obtenerlo, abra la Cuenta del editor, vaya a la sección Login > Dashboard > tu proyecto de Login y haga clic en Copy ID junto al nombre del proyecto de Login.
   3. En el campo Client ID, especifique el ID de cliente para OAuth 2.0.0 que se puede encontrar en Cuenta del editor en la sección Login > tu proyecto de Login > Security > OAuth 2.0.
   4. En el campo Redirect URI, especifique la URL o ruta en la aplicación a la que se redirige a los usuarios después de que se hayan autenticado correctamente, hayan confirmado su correo electrónico o hayan restablecido su contraseña. El valor debe coincidir con el especificado en Cuenta del editor en la sección Login > tu proyecto de Login > Security > OAuth 2.0.
   5. Configure otros ajustes si es necesario (p. ej., opciones de visualización para la interfaz de pago en la sección Pay Station UI).

1. Como consecuencia, su proyecto en Cuenta del editor se conectará a los mapas de demostración.

3. Vaya a Content Browser > View Options y marque las casillas para Show Engine Content y Show Plugin Content.

Agregue la apertura del widget de Xsolla Login

Invoque el método AuthWithXsollaWidget del SDK, transmitiendo los siguientes parámetros:

• WorldContextObject — el objeto de contexto mundial (para llamada C++).
• SuccessCallback — la devolución de llamada de autenticación de usuario realizada correctamente y de recepción de token (opcional).
• CancelCallback — la devolución de llamada de cancelación de la autenticación de usuario, que se desencadena cuando el usuario cierra el widget sin finalizar el proceso de autenticación (opcional).
• ErrorCallback — la devolución de llamada para los errores que se producen durante el proceso de autenticación (opcional).
• bRememberMe — si es necesario conservar los datos de autenticación (opcional). Por defecto, el valor se establece como false.
• Locale — el idioma de la interfaz de usuario (opcional). Por defecto, este valor está definido por la dirección IP del usuario.
• State — una cadena (string) usada para realizar la verificación adicional del usuario en el servidor de aplicaciones. El valor por defecto es xsollatest.

Ejemplo: