Cómo utilizar las llamadas API del SDK del widget de Login
Puede trabajar con las llamadas API del SDK del widget de Login por separado del widget de Login si desea:
- utilizar su propio diseño de widget
- implementar parcialmente el flujo del widget de Login
Inicialización del código
Para utilizar las llamadas API del SDK del widget de Login sin un widget, conecte el siguiente código a la etiqueta <body>
:
<script>
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
</script>
El código de inicialización cuando se utiliza un paquete npm (npm-package):
import XsollaLogin from '@xsolla/login-sdk';
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
Los siguientes parámetros se transmiten en el código de inicialización:
Parámetro | Tipo | Descripción |
---|---|---|
projectId | string | ID de su proyecto de Login de Cuenta del editor. Obligatorio. |
fullLocale | string | El idioma de la interfaz y una región en el formato <language code>_<country code> , por el cual:
El parámetro afecta a la clasificación de las redes sociales según la frecuencia de uso en la región especificada y también afecta al idioma utilizado para los correos electrónicos enviados a los usuarios. |
callbackUrl | string | La URL con la que trabaja el servidor de Xsolla Login si el inicio de sesión o el registro se realiza correctamente. |
emailTemplate | string | El nombre del proyecto en nombre del cual se envían los correos electrónicos a los usuarios. |
payload (carga útil) | string | Datos adicionales que se pueden transmitir en un código. Estos datos se añaden al JWT del usuario después de iniciar sesión correctamente. |
with_logout | boolean | Si se revocan los tókenes anteriores durante un nuevo inicio de sesión. false por defecto. |
clientId | string | ID de la aplicación cliente. Se transmite si se utiliza la autenticación basada en el protocolo OAuth 2.0 en la aplicación. |
scope (alcance) | string | Información adicional sobre una cuenta de usuario solicitada por la aplicación. Se transmite si se usa la autenticación basada en el protocolo OAuth 2.0 en la aplicación. Valores posibles:
|
estado | string | Una verificación de usuario adicional para evitar, por ejemplo, ataques de CSRF. Debe tener más de 8 caracteres. |
redirectUrl | string | 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. |
disableConfirmByLink | boolean | Si desea desactivar o no la confirmación de la autenticación sin contraseña mediante un enlace insertado en el correo electrónico cuando los usuarios inician sesión sin contraseña por correo electrónico o teléfono. false por defecto. |
is_oauth2 | boolean | Si se va a utilizar la autenticación basada en el protocolo OAuth 2.0 para los usuarios. false por defecto. |
Llamadas API
Puede utilizar las siguientes llamadas API del SDK del widget de Login sin un widget de Login:
- Registro de usuario mediante contraseña
- Inicio de sesión con contraseña
- Confirmación de cuenta
- Autenticación sin contraseña
- Solicitud de campos adicionales sin contraseña
- Restablecimiento de contraseña
- Inicio de sesión único
Registro de usuario mediante contraseña
Llamada | Descripción | Parámetros |
---|---|---|
api.signup(userInfo); | Registra un nuevo usuario. Los datos sobre el usuario se transmiten en el objeto userInfo durante el registro. El token del usuario registrado se transmite en la respuesta. |
|
let result
// Request
api.signup({
userInfo: {
email: 'email@address.com',
fields: {
nickname: 'Johny'
},
password: 'password123',
username: 'John'
}
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
Iniciar sesión con contraseña
Llamada | Descripción | Parámetros |
---|---|---|
api.login(credentials); | Autentica a un usuario con una contraseña. Los datos sobre el usuario necesarios para el inicio de sesión se transmiten en el objeto credentials . El token del usuario autenticado se transmite en la respuesta. |
|
let result
// Request
api.login({
credentials: {
password: 'password123',
username: 'email@address.com'
}
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Confirmación de cuenta
Llamada | Descripción | Parámetros |
---|---|---|
api.resendEmail(nombre de usuario); | Envía un correo electrónico adicional de confirmación de cuenta. Para confirmar la cuenta, el usuario debe hacer clic en el enlace del correo electrónico. La dirección de correo electrónico del usuario se transmite en el objeto username . En la respuesta se devuelve el código estándar 204. |
|
let result
// Request
api.resendEmail({
username: 'email@address.com'
}).then((res) => {
res.code === 204;
})
Autenticación sin contraseña
Flujo del usuario:- El usuario introduce su número de teléfono o su dirección de correo electrónico. En función de las credenciales que haya introducido, se llama a
api.phoneGetCode
oapi.emailGetCode
. - El servidor recibe los datos y envía un correo electrónico o un SMS con el código al usuario. Si al inicializar el código se transmite el parámetro
disableConfirmByLink=true
, que desactiva la confirmación del inicio de sesión mediante el enlace del correo electrónico, se utiliza la llamada aapi.getConfirmCode
para el redireccionamiento automático del usuario tras hacer clic en el enlace. - La llamada a
api.phoneGetCode
oapi.emailGetCode
devuelve el parámetrooperation_id
utilizado para confirmar el número de teléfono o la dirección de correo electrónico mediante la llamada aapi.loginWithPhoneCode
oapi.loginWithEmailCode
. - Una vez confirmada correctamente la dirección de correo electrónico o el número de teléfono, se devuelve la URL con el parámetro
token
. Se utiliza en las solicitudes de datos adicionales sobre el usuario.
Llamada | Descripción | Parámetros |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | Envía un código de confirmación al número de teléfono. El parámetro operation_id utilizado para confirmar el número de teléfono se devuelve en la respuesta. |
|
let result
// Request
api.phoneGetCode({
phone_number: '+somenumber',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
Llamada | Descripción | Parámetros |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | Envía un código de confirmación a la dirección de correo electrónico. El parámetro operation_id utilizado para confirmar la dirección de correo electrónico se devuelve en la respuesta. |
|
let result
// Request
api.emailGetCode({
email: 'email@address.com',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
Llamada | Descripción | Parámetros |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | Obtiene el código de confirmación para un redireccionamiento automático de un usuario tras pulsar el enlace. |
|
let result
// Request
const axiosCancelToken = Axios.CancelToken.source();
api.getConfirmCode({
cancelToken: axiosCancelToken,
login: '+somenumber' || 'email@address.com',
operation_id: '334j255fdf13d515fgd1'
}).then((res) => {
result = res;
})
// Response
result === {
code: 'string'
}
// If the waiting time has elapsed, returns:
result === {
error: {
code: '010-050',
description: 'Deadline exceeded.'
}
}
// If you no longer need to wait for verification through the link you can close the request waiting period:
axiosCancelToken.cancel();
Llamada | Descripción | Parámetros |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | Confirma el número de teléfono. La URL con el parámetro token se devuelve en la respuesta. Se utiliza en las solicitudes de datos adicionales sobre el usuario. |
|
let result
// Request
api.loginWithPhoneCode({
phone_number: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'email'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Llamada | Descripción | Parámetros |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | Confirma la dirección de correo electrónico. La URL con el parámetro token se devuelve en la respuesta. Se utiliza en las solicitudes de datos adicionales sobre el usuario. |
|
let result
// Request
api.loginWithEmailCode({
email: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Solicitud de campos adicionales sin contraseña
Flujo del usuario:- Tras la autenticación correcta de un usuario, la llamada
api.loginWithEmailCode
oapi.loginWithPhoneCode
devuelve una matriz de campos que puede mostrar en una aplicación en un formulario independiente y recoger además el número de teléfono y la dirección de correo electrónico del usuario. También puede obtener la lista de campos ejecutando una llamada aapi.getAskFields
. - El usuario introduce un número de teléfono o una dirección de correo electrónico. Se ejecuta la llamada
api.ask
. - El servidor recibe los datos y envía un código de confirmación a un número de teléfono o dirección de correo electrónico. Si al inicializar el código se transmite el parámetro
disableConfirmByLink=true
, que deshabilita la confirmación del inicio de sesión mediante el enlace del correo electrónico, se utiliza la llamadaapi.getConfirmCode
para el redireccionamiento automático del usuario tras hacer clic en el enlace. - La llamada
api.ask
devuelve el parámetrooperation_id
utilizado para confirmar el número de teléfono o la dirección de correo electrónico mediante la llamadaapi.loginWithPhoneCode
oapi.loginWithEmailCode
. - La URL que se utiliza para el redireccionamiento a un usuario autenticado se devuelve tras la confirmación correcta de los datos.
Llamada | Descripción | Parámetros |
---|---|---|
api.getAskFields(token); | Obtiene la lista de campos de una solicitud adicional. |
|
let result
// Request
api.getAskFields({
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === [
{
confirmation_type: 'code' || 'link'
name: 'phone_number' || 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone' || 'email'
validation: {} // Custom validation
}
]
Llamada | Descripción | Parámetros |
---|---|---|
api.ask({ fields, token, link_url }); | Envía datos adicionales sobre el usuario: un número de teléfono o una dirección de correo electrónico. En la respuesta se devuelve el parámetro operation_id que se usa para confirmar el número de teléfono o la dirección de correo electrónico especificados. Si no se requiere confirmación, en la respuesta se devuelve la URL con el parámetro token que se utiliza para redirigir a un usuario autenticado. |
|
let result
// Request
api.ask({
fields: {
phone_number: '+somenumber'
},
link_url: 'https://someurl.com',
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === {
error: {
code: '003-014'
description: 'Confirm phone number.'
details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
}
}
// Response without confirmation
result === {
redirect_url: '<login_url>?token=<token>'
}
Ejemplo de envío de una dirección de correo electrónico:
let result
// request
api.ask({
fields: {
email: 'email@address.com'
},
link_url: 'https://someurl.com',
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === {
error: {
code: '003-011'
description: 'Confirm email.'
details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
}
}
// Response without confirmation
result === {
redirect_url: '<login_url>?token=<token>'
}
Llamada | Descripción | Parámetros |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | Obtiene el código de confirmación para un redireccionamiento automático de un usuario tras pulsar en el enlace. |
|
let result
// Request
const axiosCancelToken = Axios.CancelToken.source();
api.getConfirmCode({
cancelToken: axiosCancelToken,
login: '+somenumber' || 'email@address.com',
operation_id: '334j255fdf13d515fgd1'
}).then((res) => {
result = res;
})
// Response
result === {
code: 'string'
}
// If the waiting time has elapsed, returns:
result === {
error: {
code: '010-050',
description: 'Deadline exceeded.'
}
}
// If you no longer need to wait for verification through the link you can close the request waiting period:
axiosCancelToken.cancel();
Llamada | Descripción | Parámetros |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | Confirma el número de teléfono. La URL con el parámetro token se devuelve en la respuesta. Se utiliza en las solicitudes de datos adicionales sobre el usuario. |
|
let result
// Request
api.loginWithPhoneCode({
phone_number: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'email'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Llamada | Descripción | Parámetros |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | Confirma la dirección de correo electrónico. La URL con el parámetro token se devuelve en la respuesta. Se utiliza en las solicitudes de datos adicionales sobre el usuario. |
|
let result
// Request
api.loginWithEmailCode({
email: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
Restablecimiento de contraseña
Flujo del usuario:- La aplicación abre el formulario cuando el usuario introduce su dirección de correo electrónico o nombre de usuario. Se ejecuta la llamada
api.reset
. - El servidor envía un correo electrónico de confirmación al usuario.
- El usuario hace clic en el enlace del correo electrónico y abre un formulario para introducir una nueva contraseña.
- El usuario introduce una nueva contraseña. Se ejecuta la llamada
api.set
.
Llamada | Descripción | Parámetros |
---|---|---|
api.reset(username); | Restablece la contraseña y confirma la acción. Para confirmar el restablecimiento de la contraseña, el usuario debe hacer clic en el enlace del correo electrónico. El nombre de usuario o la dirección de correo electrónico del usuario se transmiten en el objeto username . El código 204 se devuelve en la respuesta. |
|
let result
// Request
api.reset({
username: 'John'
}).then((res) => {
res.code === 204;
})
Llamada | Descripción | Parámetros |
---|---|---|
api.set({ new_password, reset_code, user_id }); | Establece una nueva contraseña y confirma la acción. Para confirmar una nueva contraseña, el usuario debe hacer clic en el enlace del correo electrónico. El código 204 se devuelve en la respuesta. |
|
let result
// Request
api.set({
new_password: 'newpass',
reset_code: '3423',
user_id: '324324234'
}).then((res) => {
res.code === 204;
})
Inicio de sesión único
Parámetro | Tipo | Descripción |
---|---|---|
api.checkUserAuthSSO(); | Comprueba si un usuario está autorizado a través de Inicio de sesión único. Si se autoriza correctamente, devuelve un code de un solo uso. |
let result
// Request
api
.checkUserAuthSSO()
.then(res => {
result === res;
});
result === {
code: "examplecode"
}
Llamada | Descripción | Parámetros |
---|---|---|
api.userAuthSSOWithRedirect(loginUrl); | Comprueba si un usuario se ha autorizado a través del Inicio de sesión único. Si se autoriza correctamente, un usuario es redirigido a la URL; loginUrl generada que incluye un código de autorización. |
|
// Request
api
.userAuthSSOWithRedirect(
loginUrl: 'some-redirect-url.com'
)
.then(res => {
res.code === 302;
});
Llamada | Descripción | Parámetros |
---|---|---|
api.logout(token, session); | Cierra la sesión de un usuario del sistema y elimina una sesión de usuario de acuerdo con el parámetro session . |
|
// Request
api
.logout(
token: 'exampleToken',
session: 'sso' | 'all'
)
.then(res => {
res.code === 204;
});
Parámetro | Tipo | Descripción |
---|---|---|
api.clearSSO(); | Elimina los archivos de cookies de Inicio de sesión único del dispositivo del usuario actual. El código 204 se devuelve en la respuesta si la llamada se realiza correctamente. |
// Request
api
.clearSSO()
.then(() => {
// Success
});
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.