Comment utiliser les appels API du Login Widget SDK
Vous pouvez utiliser les appels API du Login Widget SDK séparément du widget Login si vous souhaitez :
- utiliser votre propre design de widget ;
- implémenter partiellement le flux du widget Login.
Initialisation du code
Pour utiliser les appels API du Login Widget SDK sans widget, connectez le code suivant à la balise <body>
:
<script>
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
</script>
Code d’initialisation lors de l’utilisation d’un npm-package :
import XsollaLogin from '@xsolla/login-sdk';
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
Les paramètres suivants sont passés dans le code d’initialisation :
Paramètre | Type | Description |
---|---|---|
projectId | string | ID de votre projet de connexion issu du Compte éditeur. Obligatoire. |
fullLocale | string | Langue d’interface et région au format <language code>_<country code> , où :
Ce paramètre affecte le tri des réseaux sociaux en fonction de leur fréquence d’utilisation dans la région spécifiée et affecte également la langue utilisée pour les e-mails envoyés aux utilisateurs. |
callbackUrl | string | URL avec laquelle le serveur Xsolla Login travaille si la connexion ou l’inscription est réussie. |
emailTemplate | string | Nom du projet au nom duquel les e-mails sont envoyés aux utilisateurs. |
payload | string | Données supplémentaires pouvant être passées dans un code. Ces données sont ajoutées au JWT utilisateur après une connexion réussie. |
with_logout | boolean | Révoquer ou non les jetons précédents lors d’une nouvelle connexion. La valeur par défaut est false . |
clientId | string | ID de l’application cliente. Passé si l’authentification basée sur le protocole OAuth 2.0 est utilisée dans l’application. |
scope | string | Informations supplémentaires sur un compte utilisateur demandées par l’application. Passées si l’application utilise l’authentification basée sur le protocole OAuth 2.0. Valeurs possibles :
|
phase | string | Une vérification supplémentaire de l’utilisateur, par exemple, pour prévenir les attaques CSRF. Le mot de passe doit comporter plus de 8 caractères. |
redirectUrl | string | URL vers laquelle l’utilisateur est redirigé après la confirmation du compte, la connexion ou la confirmation de la réinitialisation du mot de passe. |
disableConfirmByLink | boolean | Désactiver ou non la confirmation de l’authentification sans mot de passe par un lien dans un e-mail lorsque l’utilisateur se connecte sans mot de passe par adresse e-mail ou par numéro de téléphone. La valeur par défaut est false . |
is_oauth2 | boolean | Détermine l’utilisation de l’authentification basée sur le protocole OAuth 2.0 pour les utilisateurs. La valeur par défaut est false . |
Appels API
Vous pouvez utiliser les appels API du Login Widget SDK suivants sans le widget Login :
- User registration by password
- Login with password
- Account confirmation
- Passwordless authentication
- Additional fields request without a password
- Password reset
- Single Sign-On
Enregistrement utilisateur par mot de passe
Appel | Description | Paramètres |
---|---|---|
api.signup(userInfo) ; | Enregistre un nouvel utilisateur. Les données utilisateur sont passées dans l’objet userInfo lors de l’enregistrement. Le jeton de l’utilisateur enregistré est passé dans la réponse. |
|
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'
}
Connexion avec mot de passe
Appel | Description | Paramètres |
---|---|---|
api.login(credentials) ; | Authentifie l’utilisateur par mot de passe. Les données sur l’utilisateur requises pour la connexion sont passées dans l’objet credentials . Le jeton de l’utilisateur authentifié est passé dans la réponse. |
|
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'
}
Confirmation du compte
Appel | Description | Paramètres |
---|---|---|
api.resendEmail(username) ; | Envoie un e-mail supplémentaire de confirmation du compte. Pour confirmer le compte, l’utilisateur doit cliquer sur le lien contenu dans l’e-mail. L’adresse e-mail de l’utilisateur est passée dans l’objet username . Le code standard 204 est renvoyé dans la réponse. |
|
let result
// Request
api.resendEmail({
username: 'email@address.com'
}).then((res) => {
res.code === 204;
})
Authentification sans mot de passe
Flux utilisateur :- L’utilisateur saisit son numéro de téléphone ou son adresse e-mail. En fonction des informations d’identification qu’il a saisies, l’appel
api.phoneGetCode
ouapi.emailGetCode
est exécuté. - Le serveur reçoit les données et envoie un e-mail ou un SMS contenant le code à l’utilisateur. Si le paramètre
disableConfirmByLink=true
, qui désactive la confirmation de connexion par le lien dans un e-mail, est passé lors de l’initialisation du code, l’appelapi.getConfirmCode
est utilisé pour la redirection automatique de l’utilisateur après un clic sur le lien. - L’appel
api.phoneGetCode
ouapi.emailGetCode
renvoie le paramètreoperation_id
utilisé pour confirmer le numéro de téléphone ou l’adresse e-mail par le biais de l’appelapi.loginWithPhoneCode
ouapi.loginWithEmailCode
. - Une fois l’adresse e-mail ou le numéro de téléphone confirmé avec succès, l’URL avec le paramètre
token
est renvoyée. Il est utilisé dans les requêtes de données supplémentaires sur l’utilisateur.
Appel | Description | Paramètres |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }) ; | Envoie un code de confirmation au numéro de téléphone. Le paramètre operation_id utilisé pour confirmer le numéro de téléphone est renvoyé dans la réponse. |
|
let result
// Request
api.phoneGetCode({
phone_number: '+somenumber',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
Appel | Description | Paramètres |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }) ; | Envoie un code de confirmation à l’adresse e-mail. Le paramètre operation_id utilisé pour confirmer l’adresse e-mail est renvoyé dans la réponse. |
|
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'
}
Appel | Description | Paramètres |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }) ; | Récupère le code de confirmation pour une redirection automatique de l’utilisateur après un clic sur le lien. |
|
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();
Appel | Description | Paramètres |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }) ; | Confirme le numéro de téléphone. L’URL avec le paramètre token est renvoyée dans la réponse. Elle est utilisée dans les requêtes de données supplémentaires sur l’utilisateur. |
|
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'
}
Appel | Description | Paramètres |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }) ; | Confirme l’adresse e-mail. L’URL avec le paramètre token est renvoyée dans la réponse. Elle est utilisée dans les requêtes de données supplémentaires sur l’utilisateur. |
|
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'
}
Demande de champs supplémentaires sans mot de passe
Flux utilisateur :- Après l’authentification réussie de l’utilisateur, l’appel
api.loginWithEmailCode
ouapi.loginWithPhoneCode
renvoie un tableau de champs que vous pouvez afficher dans l’application dans un formulaire séparé et recueillir des informations telles que le numéro de téléphone et l’adresse e-mail de l’utilisateur. Pour obtenir la liste des champs, exécutez l’appelapi.getAskFields
. - L’utilisateur saisit un numéro de téléphone ou une adresse e-mail. L’appel
api.ask
est exécuté. - Le serveur reçoit les données et envoie un code de confirmation au numéro de téléphone ou l’adresse e-mail. Si le paramètre
disableConfirmByLink=true
, qui désactive la confirmation de connexion par le biais d’un lien dans l’e-mail, est passé lors de l’initialisation du code, l’appelapi.getConfirmCode
est utilisé pour la redirection automatique de l’utilisateur après un clic sur le lien. - L’appel
api.ask
renvoie le paramètreoperation_id
utilisé pour confirmer le numéro de téléphone ou l’adresse e-mail par le biais de l’appelapi.loginWithPhoneCode
ouapi.loginWithEmailCode
. - L’URL utilisée pour la redirection vers un utilisateur authentifié est renvoyée après la confirmation réussie des données.
Appel | Description | Paramètres |
---|---|---|
api.getAskFields(token) ; | Récupère la liste des champs pour une requête supplémentaire. |
|
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
}
]
Appel | Description | Paramètres |
---|---|---|
api.ask({ fields, token, link_url }) ; | Envoie des données supplémentaires sur l’utilisateur : numéro de téléphone ou adresse e-mail. Le paramètre operation_id , utilisé pour confirmer le numéro de téléphone ou l’adresse e-mail spécifié, est renvoyé dans la réponse. Si la confirmation n’est pas nécessaire, l’URL avec le paramètre token , utilisé pour la redirection vers un utilisateur authentifié, est renvoyée dans la réponse. |
|
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>'
}
Exemple d’envoi d’adresse e-mail :
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>'
}
Appel | Description | Paramètres |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }) ; | Récupère le code de confirmation pour une redirection automatique de l’utilisateur après un clic sur le lien. |
|
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();
Appel | Description | Paramètres |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }) ; | Confirme le numéro de téléphone. L’URL avec le paramètre token est renvoyée dans la réponse. Elle est utilisée dans les requêtes de données supplémentaires sur l’utilisateur. |
|
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'
}
Appel | Description | Paramètres |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }) ; | Confirme l’adresse e-mail. L’URL avec le paramètre token est renvoyée dans la réponse. Elle est utilisée dans les requêtes de données supplémentaires sur l’utilisateur. |
|
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'
}
Réinitialisation du mot de passe
Flux utilisateur :- L’application ouvre le formulaire dans lequel l’utilisateur saisit son adresse e-mail ou son nom d’utilisateur. L’appel
api.reset
est exécuté. - Le serveur envoie un e-mail de confirmation à l’utilisateur.
- L’utilisateur clique sur le lien contenu dans l’e-mail et ouvre le formulaire de nouveau mot de passe.
- L’utilisateur saisit un nouveau mot de passe. L’appel
api.set
est exécuté.
Appel | Description | Paramètres |
---|---|---|
api.reset(username) ; | Réinitialise le mot de passe et confirme l’action. Pour confirmer la réinitialisation du mot de passe, l’utilisateur doit cliquer sur le lien contenu dans l’e-mail. Le nom d’utilisateur ou l’adresse e-mail de l’utilisateur est passé dans l’objet username . Le code 204 est renvoyé dans la réponse. |
|
let result
// Request
api.reset({
username: 'John'
}).then((res) => {
res.code === 204;
})
Appel | Description | Paramètres |
---|---|---|
api.set({ new_password, reset_code, user_id }) ; | Définit le nouveau mot de passe et confirme l’action. Pour confirmer le nouveau mot de passe, l’utilisateur doit cliquer sur le lien contenu dans l’e-mail. Le code 204 est renvoyé dans la réponse. |
|
let result
// Request
api.set({
new_password: 'newpass',
reset_code: '3423',
user_id: '324324234'
}).then((res) => {
res.code === 204;
})
Authentification unique
Paramètre | Type | Description |
---|---|---|
api.checkUserAuthSSO() ; | Vérifie si l’utilisateur a été autorisé via l’authentification unique. En cas de succès, un message unique code est renvoyé. |
let result
// Request
api
.checkUserAuthSSO()
.then(res => {
result === res;
});
result === {
code: "examplecode"
}
Appel | Description | Paramètres |
---|---|---|
api.userAuthSSOWithRedirect(loginUrl) ; | Vérifie si l’utilisateur a été autorisé via l’authentification unique. En cas de succès, l’utilisateur est redirigé vers l’URL loginUrl générée avec un code d’autorisation. |
|
// Request
api
.userAuthSSOWithRedirect(
loginUrl: 'some-redirect-url.com'
)
.then(res => {
res.code === 302;
});
Appel | Description | Paramètres |
---|---|---|
api.logout(token, session) ; | Déconnecte l’utilisateur du système et supprime la session utilisateur conformément au paramètre session . |
|
// Request
api
.logout(
token: 'exampleToken',
session: 'sso' | 'all'
)
.then(res => {
res.code === 204;
});
Paramètre | Type | Description |
---|---|---|
api.clearSSO() ; | Supprime les fichiers cookies de l’authentification unique de l’appareil de l’utilisateur courant. Le code 204 est renvoyé dans la réponse si l’appel est réussi. |
// Request
api
.clearSSO()
.then(() => {
// Success
});
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.