Establecer la autenticación de usuarios

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 su aplicación, implemente la gestión 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.

4. Si su sitio tiene varias páginas, seleccione la que necesite:
   1. Haga clic en el título de la página actual, situado en la parte superior del creador.
   2. Seleccione la página que necesita de la lista desplegable.
5. Vaya al bloque Login settings.

6. Seleccione la opción User ID.

7. En la lista desplegable, seleccione New 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

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Usuario
    participant WS as Web Shop
    participant B as Navegador
    participant MOS as SO para dispositivos móviles
    participant G as Juego
    participant LA as Login API
    U->>WS: Pulsa el botón para iniciar sesión a través del juego para móviles
    activate WS
    WS->>B: Redirige al usuario mediante un vínculo profundo
    activate B
    B->>MOS: Hace una llamada al sistema para abrir un juego para móviles
    activate MOS
    MOS->>G: Abre un juego para móviles
    activate G
    G->>LA: Genera un token de autorización
    activate LA
    LA-->>G: Devuelve un token de autorización
    deactivate LA
    G->>MOS: Hace una llamada al sistema para abrir el navegador con un token en la URL
    deactivate G
    MOS-->>B: Abre el navegador con un token en la URL
    deactivate MOS
    B-->>WS: Abre la página de Web Shop para usuarios autorizados
    deactivate B
    WS-->>U: Muestra el nombre de usuario en el encabezado
    deactivate WS

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 enlace 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 un enlace para abrir el juego a través de un esquema de URL registrado:

scheme://authorize?operationPayload=<VALUE>:
• scheme: un identificador único de su juego utilizado en un esquema de URL personalizado para iniciar la aplicación y navegar a la acción requerida.
• authorize: un ejemplo de nombre de acción que debe ejecutarse tras abrir el juego. Use el nombre de acción que corresponda a las acciones del sistema operativo de su aplicación.
• operationPayload=<VALUE>: un parámetro que contiene información para la generación de tokens durante la autenticación. El valor son datos codificados en Base64 generados por Xsolla.

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>scheme</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="scheme" 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. Añada 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

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

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Usuario
    participant WS as Web Shop
    participant B as Navegador
    participant MOS as SO para dispositivos móviles
    participant G as Juego
    participant LA as Login API
    U->>WS: Pulsa el botón para iniciar sesión a través del juego para móviles
    activate WS
    WS->>B: Redirige al usuario mediante un vínculo profundo
    activate B
    B->>MOS: Hace una llamada al sistema para abrir un juego para móviles
    activate MOS
    MOS->>G: Abre un juego para móviles
    activate G
    G->>LA: Genera un token de autorización
    activate LA
    LA-->>G: Devuelve un token de autorización
    deactivate LA
    G->>MOS: Hace una llamada al sistema para abrir el navegador con un token en la URL
    deactivate G
    MOS-->>B: Abre el navegador con un token en la URL
    deactivate MOS
    B-->>WS: Abre la página de Web Shop para usuarios autorizados
    deactivate B
    WS-->>U: Muestra el nombre de usuario en el encabezado
    deactivate WS

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 enlace 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 un enlace para abrir el juego a través de un esquema de URL registrado:

scheme://authorize?operationPayload=<VALUE>:
• scheme: un identificador único de su juego utilizado en un esquema de URL personalizado para iniciar la aplicación y navegar a la acción requerida.
• authorize: un ejemplo de nombre de acción que debe ejecutarse tras abrir el juego. Use el nombre de acción que corresponda a las acciones del sistema operativo de su aplicación.
• operationPayload=<VALUE>: un parámetro que contiene información para la generación de tokens durante la autenticación. El valor son datos codificados en Base64 generados por Xsolla.

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>scheme</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="scheme" 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": "string",
 7 "settings": {
 8   "projectId": 0,
 9   "merchantId": 0
10 },
11 "user": {
12   "id": "string",
13   "country": "string",
14   "name": "string",
15   "picture": "string"
16 },
17 "operationPayload": "eyJ4c29sbGF1aWQiOiIzNzE5Nzc5NjU1MDE2Nzc2MzcifQ%3D%3D"
18}'

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

3. Añada 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

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

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}

Flujo del usuario

1. El usuario accede por primera vez a Web Shop con la autenticación configurada y el ID de usuario vinculado.
2. El usuario pulsa 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.
3. Se abre una ventana modal con los métodos de autorización establecidos en Xsolla Login.
4. El usuario comienza el proceso de autorización e introduce datos adicionales si es necesario.

5. Tras realizar correctamente la autorización mediante Xsolla Login, se abre la ventana modal para vincular el ID de usuario del juego.

6. El sistema verifica si el usuario existe. Si el usuario con el ID especificado existe en el juego, se le autorizará en Web Shop. De lo contrario, se mostrará un mensaje de error.

Cómo conseguirlo

1. En su aplicación, implemente la gestión 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.

4. Si su sitio tiene varias páginas, seleccione la que necesite:
   1. Haga clic en el título de la página actual, situado en la parte superior del creador.
   2. Seleccione la página que necesita de la lista desplegable.
5. Vaya al bloque Login settings.

6. Seleccione la opción Login with linked user ID.
7. En la lista desplegable, seleccione New Login o alguno de los proyectos creados.
8. Introduzca la URL para recibir webhooks.