Autenticar usuarios en su aplicación
Para garantizar la seguridad y el correcto funcionamiento de las transacciones de pago, la API de Xsolla usa el JSON Web Token (JWT) del usuario, que se obtuvo durante la autorización mediante Xsolla Login.
Más abajo puede encontrar las instrucciones sobre el método más rápido de integrar Xsolla Login: integrar un widget web prediseñado en la aplicación.
Si desea utilizar su propia interfaz de usuario para registrar a los usuarios en su aplicación, debe implementar la lógica de autenticación de usuarios empleando la Login API o los métodos del SDK.
Escoja el SDK más apropiado para su proyecto:
Las instrucciones generales para importar el widget y trabajar con este se ofrecen en el archivo README.
Utilice aplicaciones web de prueba como ejemplo de implementación:
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:
Inicie la consola y ejecute el comando:
- bash
npm i @xsolla/login-sdk
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.
Agregue el código de inicialización al archivo JS:
- javascript
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'
});
Añada la apertura del widget de Xsolla Login
- Agregue un botón con el evento
on-clicky la funciónxl.open()a su página HTML:
- html
<div id="xl_auth" style="display: none"></div>
<button onclick="showFullscreen()">Fullscreen widget</button>
- Agregue el botón para abrir el widget en el bloque
<div>de su página HTML.
Agregue el siguiente código al archivo JS:
- javascript
xl.mount('xl_auth');
const showFullscreen = () => {
const myDiv = document.querySelector('#xl_auth');
myDiv.style.display = 'block';
xl.open();
}
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
