Flujo del usuario

1. El usuario se dirige a Web Shop con la autenticación de ID de usuario configurada.
2. El usuario se autentica en Web Shop de una de las siguientes formas:
   • El usuario introduce su ID en el bloque de Fast Login y pulsa en el botón de inicio de sesión.
   • El usuario pulsa en el botón de compra del artículo seleccionado o en el botón de inicio de sesión de la barra superior:
     1. Se abre una ventana modal para introducir el ID de usuario o iniciar sesión a través de una red social.
     2. El usuario introduce su ID y pulsa en Continue o pulsa en el icono de redes sociales para elegir una red social y realiza la autenticación en la página de la red social.

3. El sistema verifica si existe un usuario en el juego. Si existe un usuario con este ID o cuenta de red social en el juego, el usuario es autenticado en Web Shop. En caso contrario, aparece un mensaje de error.

Cómo conseguirlo

1. En el lado de su aplicación, implemente el control del webhook de validación de usuarios.

Al recibir un webhook, la aplicación debe hacer lo siguiente:

• Buscar un usuario por su ID transmitido en el webhook.
• En función del resultado, enviar uno de los siguientes códigos de estado:
  • código HTTP 200 HTTP con una respuesta del webhook si se encuentra un usuario
  • código HTTP 404 si no se encuentra el ID de usuario
• Enviar atributos de usuario para la personalización.

2. Abra su proyecto en Cuenta del editor.
3. En la barra lateral haga clic en Site Builder.
4. Haga clic en Open Site Builder.
5. Inserte el siguiente código en el bloque Login Settings:

6. Seleccione la opción de User ID.

7. En la lista desplegable, seleccione New Login.

8. Introduzca la URL para recibir webhooks.

9. Establezca la autorización a través de redes sociales ya conectadas a su aplicación (opcional):
   1. Abra su proyecto en Cuenta del editor y vaya a la sección de Login.
   2. Haga clic en Configure en la barra de sitio web.
   3. Vaya al bloque Authentication y seleccione Social login.

1. 4. Para establecer una red social, vaya a la ficha de la red social, haga clic en el icono ⚙ situado a la derecha del título y seleccione Connect.

Un enlace profundo es una URL especial que dirige al usuario directamente a una sección, página o acción específica dentro de una aplicación o sitio web, en vez de solo dirigirlo a la página principal.

Los enlaces profundos se pueden utilizar como método de autenticación adicional al iniciar sesión con ID de usuario. Si el juego está instalado en el dispositivo móvil del usuario, se le redirigirá al juego a través de un enlace profundo para obtener un token de autorización.

Flujo del usuario

En la 'app' móvil

1. Un usuario no autorizado de la Web Shop pulsa en el botón de inicio de sesión o en el botón de compra. Se abre una ventana modal para introducir el ID de usuario o iniciar sesión mediante el juego móvil.

2. El usuario hace clic en el botón Log in via Mobile Game.
3. Se redirige al usuario al juego y después automáticamente de vuelta a Web Shop como usuario autorizado.

En la versión de escritorio

1. Un usuario no autorizado de la Web Shop pulsa en el botón de inicio de sesión o en el botón de compra. Se abre una ventana modal para introducir el ID de usuario o al iniciar sesión en la versión móvil del juego utilizando un código QR.

2. El usuario escanea el código QR con su dispositivo móvil.
3. Se abre Web Shop en el dispositivo móvil del usuario.
4. Se redirige automáticamente al usuario al juego y luego de vuelta a Web Shop como usuario autenticado.

Flujo de interacción de servicios

Cómo se establece

En el lado del juego

1. En la configuración de la aplicación móvil de su juego, registre un esquema de URL para abrir el juego a través de un vínculo profundo:
   • en aplicaciones de Android, en el archivo AndroidManifest.xml
   • en aplicaciones de iOS, en el archivo Info.plist

Tras registrar el esquema, cuando el usuario se autentique en Web Shop mediante el juego, este deberá abrirse en la dirección especificada.

Ejemplo de esquema URL para registrar un juego:
gamename://authorize?operationPayload=<VALUE>, en el que:
• gamename — el nombre del juego que debe abrirse en un dispositivo móvil para la autenticación del usuario.
• authorize — un ejemplo de un nombre de acción que se debe realizar tras abrir el juego gamename. Utilice el nombre de acción que coincida con las acciones del sistema operativo de su aplicación.
• operationPayload=<VALUE> — un parámetro adicional que contiene información para la generación de tokens durante la autenticación.

Ejemplos:

• Registrar un esquema URL en aplicaciones iOS
• Registrar un esquema URL en aplicaciones Android

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>gamename</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="gamename" android:host="authorize" />
6</intent-filter>

2. Implemente la generación de un token de autorización en formato JWT empleando el ID de usuario del juego.

Ejemplo de llamada al método API de generación de token de usuario a través de curl:

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 7 "settings": {
 8   "projectId": 123456,
 9   "merchantId": 123456
10 },
11 "user": {
12   "id": "123",
13   "country": "US"
14 }
15 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
16}'

Obtendrá una respuesta del tipo {token="JWT_TOKEN"}.

3. Agregue una ventana emergente con una notificación de autorización correcta (opcional).
4. Implemente la apertura de Web Shop en el navegador mediante el token de usuario obtenido.

Ejemplo de crear una URL para abrir Web Shop en el navegador para un usuario autorizado:
• https:​//example.com/?token={token}, si utiliza un dominio personalizado
• https:​//example.xsolla.site/?token={token}, si utiliza un dominio de Xsolla

En el que {token} es el token de autorización del usuario.

Dentro de Site Builder

1. Abra su proyecto en Cuenta del editor y vaya a Site Builder.
2. Haga clic en Configure en la ficha del sitio de su Web Shop con autenticación mediante ID de usuario.
3. Vaya a Login Settings y seleccione la sección User ID.
4. Active la opción Deeplink authorization.

5. En el campo Deeplink URL, introduzca el enlace para la autenticación del usuario.

6. Si está utilizando el bloque Fast Login en el sitio web:
   1. Vaya al bloque Fast Login.
   2. En la sección Layout, active la opción QR code.

7. Para verificar la autenticación, haga clic en Preview.
8. Para publicar el sitio web, haga clic en Publish.

Un enlace profundo es una URL especial que dirige al usuario directamente a una sección, página o acción específica dentro de una aplicación o sitio web, en vez de solo dirigirlo a la página principal.

Los vínculos profundos permiten a los usuarios autenticarse en Web Shop a través del juego con un solo clic, en lugar de pasar por el proceso de autenticación mediante ID de usuario o Xsolla Login.

Si el juego está instalado en el dispositivo móvil del usuario, se le redirigirá al juego a través de un enlace profundo para obtener un token de autorización.

Cuando se utiliza un enlace profundo como método principal de autenticación, se pueden guardar los datos de pago, algo que no es posible al autenticarse mediante ID de usuario y enlace profundo. En este caso, el enlace profundo agiliza la autenticación, pero no añade ninguna función.

Flujo del usuario

En la 'app' móvil

1. Un usuario no autorizado en Web Shop hace clic en el botón de inicio de sesión o en el botón de compra. Se abre una ventana modal para iniciar sesión a través del juego para móviles.

2. El usuario hace clic en el botón Log in via Mobile Game.
3. Se redirige al usuario al juego y después automáticamente de vuelta a Web Shop como usuario autorizado.

En la versión de escritorio

1. Un usuario no autorizado en Web Shop hace clic en el botón de inicio de sesión o en el botón de compra. Se abre una ventana modal para iniciar sesión en la versión para dispositivos móviles del juego mediante un código QR.

2. El usuario escanea el código QR con su dispositivo móvil.
3. Se abre Web Shop en el dispositivo móvil del usuario.
4. Se redirige automáticamente al usuario al juego y luego de vuelta a Web Shop como usuario autenticado.

Flujo de interacción de servicios

Cómo se establece

En el lado del juego

1. En la configuración de la aplicación móvil de su juego, registre un esquema de URL para abrir el juego a través de un vínculo profundo:
   • en aplicaciones de Android, en el archivo AndroidManifest.xml
   • en aplicaciones de iOS, en el archivo Info.plist

Tras registrar el esquema, cuando el usuario se autentique en Web Shop mediante el juego, este deberá abrirse en la dirección especificada.

Ejemplo de esquema URL para registrar un juego:
gamename://authorize?operationPayload=<VALUE>, en el que:
• gamename — el nombre del juego que debe abrirse en un dispositivo móvil para la autenticación del usuario.
• authorize — un ejemplo de un nombre de acción que se debe realizar tras abrir el juego gamename. Utilice el nombre de acción que coincida con las acciones del sistema operativo de su aplicación.
• operationPayload=<VALUE> — un parámetro adicional que contiene información para la generación de tokens durante la autenticación.

Ejemplos:

• Registrar un esquema URL en aplicaciones iOS
• Registrar un esquema URL en aplicaciones Android

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>gamename</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="gamename" android:host="authorize" />
6</intent-filter>

2. Implemente la generación de un token de autorización en formato JWT empleando el ID de usuario del juego.

La API de Xsolla utiliza la autenticación básica. Todas las solicitudes de API deben incluir el encabezado Authorization: Basic , en el que your_authorization_basic_key es un par client_id:client_secret codificado en el estándar Base64.

La configuración de un cliente OAuth 2.0 para la autenticación del servidor se realiza a través de Cuenta del editor. Para obtener más información, consulte la documentación.

Ejemplo de llamada al método API de generación de token de usuario a través de curl:

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'Accept: /' \
 4-H 'Content-Type: application/json' \
 5-H 'Authorization: Basic <Base64Encoded(client_id:client_secret)>' \
 6-d '{
 7 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 8 "settings": {
 9   "projectId": 123456,
10   "merchantId": 123456
11 },
12 "user": {
13   "id": "123",
14   "country": "US"
15 }
16 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
17}'

Obtendrá una respuesta del tipo {token="JWT_TOKEN"}.

3. Agregue una ventana emergente con una notificación de autorización correcta (opcional).
4. Implemente la apertura de Web Shop en el navegador mediante el token de usuario obtenido.

Ejemplo de crear una URL para abrir Web Shop en el navegador para un usuario autorizado:
• https:​//example.com/?token={token}, si utiliza un dominio personalizado
• https:​//example.xsolla.site/?token={token}, si utiliza un dominio de Xsolla

En el que {token} es el token de autorización del usuario.

Dentro de Site Builder

1. Abra su proyecto en Cuenta del editor y vaya a Site Builder.
2. Haga clic en Configure en la ficha del sitio de su Web Shop.
3. Vaya a Login Settings y seleccione Deep link.

4. En el campo Deeplink URL, introduzca el enlace para la autenticación del usuario.

5. Si está utilizando el bloque Fast Login en el sitio web:
   1. Vaya al bloque Fast Login.
   2. En Block Settings, ajuste el estilo de visualización del botón de inicio de sesión con código QR.

6. Para verificar la autenticación, haga clic en Preview.
7. Para publicar el sitio web, haga clic en Publish.

Flujo del usuario

1. El usuario se dirige a Web Shop con la autenticación de Xsolla Login configurada.
2. El usuario hace clic en el botón de compra del artículo seleccionado, el botón de inicio de sesión de la barra superior o el botón de inicio de sesión del bloque de Fast Login (inicio de sesión rápido).
3. Se abre una ventana modal con los métodos de autorización establecidos en Xsolla Login.

4. El usuario procede a la autorización e introduce datos adicionales si es necesario.
5. El sistema verifica si el usuario existe en el juego. Si el usuario existe en el juego, el usuario es autorizado en Web Shop. En caso contrario, aparece un mensaje de error.

Cómo conseguirlo

1. En el Builder de su sitio web, vaya al bloque Login settings.

2. Seleccione la opción de autorización de Xsolla Login.
3. En la lista desplegable, seleccione New Login.

4. Vaya a la configuración del proyecto de Login desde la ventana modal o haga clic en Set up authentication method en el bloque Xsolla Login.

5. Conecte el almacenamiento de datos de usuarios.

En función del método de almacenamiento de los datos de usuarios, tendrá a su disposición diferentes funcionalidades del producto (consulte Comparación de las opciones de almacenamiento de datos de usuario).

Almacenamiento de Xsolla

Si desea que el producto Login procese toda la lógica de autenticación, conéctese al almacenamiento de Xsolla. Dispondrá de una configuración más flexible.

Cuando crea un proyecto de Login, el almacenamiento de Xsolla está conectado por defecto, no se requieren pasos adicionales para configurarlo. Si ha cambiado el tipo de almacenamiento por defecto y necesita volver a conectarse al almacenamiento de Xsolla, sigue estos pasos:

1. En la página de navegación, vaya al bloque User database y seleccione la sección Storage.
2. Seleccione Xsolla storage y haga clic en Save change.

Almacenamiento de PlayFab

Si desea utilizar la funcionalidad de PlayFab para operar con usuarios, conéctese al almacenamiento de PlayFab. Este almacenamiento guarda los siguientes datos de usuario:

• nombre de usuario
• dirección de correo electrónico del usuario
• contraseña del usuario
• de un formulario de registro ampliado si el formulario está establecido

El almacenamiento de PlayFab le da acceso a las siguientes funciones:

• registro de usuarios
• autenticación mediante dirección de correo electrónico o nombre de usuario y contraseña
• autenticación a través de Twitch
• restablecimiento de contraseña de usuario
• bloqueo de usuarios

Para conectar el almacenamiento:

1. Vaya al bloque User database y seleccione la sección Storage.
2. Seleccione PlayFab.
3. En el campo Title ID, introduzca el valor del mismo campo de su cuenta de PlayFab.
4. Haga clic en Save changes.

Firebase Storage

Si desea utilizar la funcionalidad de Firebase para operar con usuarios, conéctese al almacenamiento de Firebase. Este almacenamiento guarda los siguientes datos de usuario:

• nombre de usuario
• dirección de correo electrónico del usuario
• contraseña del usuario
• de un formulario de registro ampliado si el formulario está establecido

1. Vaya al bloque User database y seleccione la sección Storage.
2. Seleccione Firebase.
3. En el campo API key, introduzca el valor del mismo campo de su cuenta de Firebase.
4. Haga clic en Save changes.

Almacenamiento personalizado

Si utiliza su propio sistema de autorización y almacena los datos de usuario en el lado de su aplicación, conéctelo al almacenamiento personalizado.

El almacenamiento personalizado le da acceso a las siguientes funciones:

• registro de usuario
• autenticación mediante dirección de correo electrónico o nombre de usuario y contraseña
• autenticación sin contraseña mediante número de teléfono
• autenticación mediante redes sociales
• restablecimiento de contraseña de usuario

1. Conecte el almacenamiento personalizado.
2. Establezca el procesamiento de solicitudes del servidor de Xsolla Login.

Conectar almacenamiento personalizado

1. Vaya al bloque User database y seleccione la sección Storage.
2. Seleccione Custom storage.
3. Introduzca las URL a las que enviar las solicitudes API:
   • URL de verificación de usuario
   • URL de nuevo usuario
   • URL de restablecimiento de contraseña
   • URL de inicio de sesión sin contraseña vía teléfono
   • URL de inicio de sesión mediante redes sociales
4. Haga clic en Save changes.
5. Para las URL que ha establecido, implemente una API que responda de la siguiente manera:
   • HTTP 200/HTTP 204 para las solicitudes aceptadas. Si es necesario, se puede colocar en el cuerpo de la respuesta un JSON que contenga datos adicionales del usuario. Los datos transmitidos se escriben en un JWT (el parámetro partner_data).
   • Otros códigos de estado HTTP para solicitudes fallidas.

Establecer el procesamiento de solicitudes del servidor de Xsolla Login

Las solicitudes del servidor de Xsolla Login se envían a las URL, que especificó en Cuenta del editor, con el encabezado Authorization: Bearer <JWT>. El JWT se firma con la clave secreta de su proyecto.

Para procesar una solicitud:

1. Valide un JWT recibido.
2. Si la validación es correcta, descodifique el JWT y asegúrese de que incluye las reclamaciones de la tabla siguiente. Busque y utilice una biblioteca para la descodificación.

1{
2  "exp": 1573635020,
3  "iat": 1573634600,
4  "iss": "https://login.xsolla.com",
5  "request_type": "gateway_request",
6  "xsolla_login_project_id": "00000000-0000-0000-0000-000000000000"
7}