Comment intégrer l’authentification utilisateur via Xsolla ID

Comment ça marche

Vous pouvez ajouter l’authentification utilisateur avec Xsolla ID, la plateforme d’identité partagée qui offre un accès fluide à travers les produits Xsolla.

Les méthodes d’authentification disponibles dépendent des paramètres de votre projet. Xsolla ID peut être utilisé uniquement si l’authentification via Xsolla Wallet est désactivée (elle est désactivée par défaut dans les nouveaux projets). Une fois désactivée, l’authentification Xsolla Wallet est définitivement supprimée. Pour la réactiver, contactez un responsable de la réussite client ou envoyez un e-mail à [email protected].

L’image ci-dessus présente l’une des options disponibles pour le widget Login. Vous pouvez personnaliser le widget.

Vous pouvez implémenter l’un des scénarios utilisateur suivants :

Ouverture de la page d’authentification Xsolla ID dans une fenêtre modale en appuyant sur le bouton Log in with Xsolla depuis le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. La page d’authentification Xsolla ID s’ouvre dans une fenêtre modale.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL du Compte éditeur.
Redirection vers la page d’authentification Xsolla ID en appuyant sur le bouton Log in with Xsolla dans le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans la même fenêtre.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL du Compte éditeur.
Redirection vers la page d’authentification Xsolla ID dans une fenêtre contextuelle en appuyant sur un bouton de votre site Web :
1. L’utilisateur appuie sur un bouton de votre site Web.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans une fenêtre contextuelle.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL du Compte éditeur.

Vous pouvez implémenter l’un des scénarios utilisateur suivants :

Ouverture de la page d’authentification Xsolla ID dans une fenêtre modale en appuyant sur le bouton Log in with Xsolla depuis le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. La page d’authentification Xsolla ID s’ouvre dans une fenêtre modale.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID en appuyant sur le bouton Log in with Xsolla dans le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans la même fenêtre.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID dans une fenêtre contextuelle en appuyant sur un bouton de votre site Web :
1. L’utilisateur appuie sur un bouton de votre site Web.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans une fenêtre contextuelle.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.

Vous pouvez implémenter l’un des scénarios utilisateur suivants :

Ouverture de la page d’authentification Xsolla ID dans une fenêtre modale en appuyant sur le bouton Log in with Xsolla depuis le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. La page d’authentification Xsolla ID s’ouvre dans une fenêtre modale.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID en appuyant sur le bouton Log in with Xsolla dans le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans la même fenêtre.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID dans une fenêtre contextuelle en appuyant sur un bouton de votre site Web :
1. L’utilisateur appuie sur un bouton de votre site Web.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans une fenêtre contextuelle.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.

Vous pouvez implémenter l’un des scénarios utilisateur suivants :

Ouverture de la page d’authentification Xsolla ID dans une fenêtre modale en appuyant sur le bouton Log in with Xsolla depuis le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. La page d’authentification Xsolla ID s’ouvre dans une fenêtre modale.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID en appuyant sur le bouton Log in with Xsolla dans le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans la même fenêtre.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID dans une fenêtre contextuelle en appuyant sur un bouton de votre site Web :
1. L’utilisateur appuie sur un bouton de votre site Web.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans une fenêtre contextuelle.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.

Vous pouvez implémenter l’un des scénarios utilisateur suivants :

Ouverture de la page d’authentification Xsolla ID dans une fenêtre modale en appuyant sur le bouton Log in with Xsolla depuis le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. La page d’authentification Xsolla ID s’ouvre dans une fenêtre modale.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID en appuyant sur le bouton Log in with Xsolla dans le widget Login :
1. L’utilisateur appuie sur le bouton Log in with Xsolla dans le widget Login.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans la même fenêtre.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.
Redirection vers la page d’authentification Xsolla ID dans une fenêtre contextuelle en appuyant sur un bouton de votre site Web :
1. L’utilisateur appuie sur un bouton de votre site Web.
2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID dans une fenêtre contextuelle.
3. L’utilisateur s’authentifie sur cette page.
4. L’utilisateur est redirigé vers l’URL renseignée dans le champ Callback URL dans votre compte.

Comment obtenir

Pour intégrer la connexion via les réseaux sociaux avec Xsolla ID :

Intégrez le widget Login.
Activez Xsolla en tant que réseau social.
Implémentez la récupération du jeton d’autorisation utilisateur.

Ajoutez le widget Xsolla Login à votre application, il fournit une interface d’authentification utilisateur prête à l’emploi.

Ouvrez votre projet dans le Compte éditeur et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Other tools > Login.

Appuyez sur Configure dans le panneau d’un projet de Login.
Accédez au bloc Authentication et sélectionnez Social login.
Sélectionnez Xsolla dans la liste des réseaux sociaux.

Appuyez sur l’icône ⚙ et sélectionnez Connect.
Configurez l’un des scénarios utilisateur :

Authentification dans la même fenêtre

Pour rediriger l’utilisateur vers la page d’authentification Xsolla ID après qu’il ait appuyé sur le bouton Log in with Xsolla dans le widget Login :

Accédez à la section Authentication et appuyez sur Callback URLs.
Dans le champ Callback URL, saisissez l’URL vers laquelle rediriger l’utilisateur après l’authentification.
Dans le code du widget Login, passez cette URL dans le paramètre callbackUrl.

Exemple de code du widget :

Copy

Full screen

Small screen

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  callbackUrl: '[Your Callback URL]',
6});

Authentification dans une fenêtre contextuelle

Pour rediriger l’utilisateur vers la page d’authentification Xsolla ID dans une fenêtre contextuelle lorsque l’utilisateur appuie sur un bouton de votre site Web :

Dans la page de navigation, accédez à la section Authentication et appuyez sur Callback URLs.
Vérifiez que l’URL https://login.xsolla.com/api/social/oauth2/callback figure dans la section Callback URL.
Dans le code du widget Login, définissez babkaLoginPopup sur true et renseignez dans callbackUrl l’URL vers laquelle rediriger l’utilisateur après l’authentification.

Exemple de code du widget :

Copy

Full screen

Small screen

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginPopup: true,
6  callbackUrl: '[Your Callback URL]',
7});

Ajoutez le bouton ouvrant la page d’authentification Xsolla ID à votre site web.

Exemple de code du bouton Log in with Xsolla :

Copy

Full screen

Small screen

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

Pour rediriger l’utilisateur vers la page d’authentification Xsolla ID dans une fenêtre modale après qu’il ait appuyé sur le bouton Log in with Xsolla dans le widget Login :

Accédez à la section Authentication et appuyez sur Callback URLs.
Dans le champ Callback URL, saisissez l’URL vers laquelle rediriger l’utilisateur après l’authentification.
Dans le code du widget Login, définissez babkaLoginFlow sur popup et renseignez cette URL dans le paramètre callbackUrl.

Exemple de code du widget :

Copy

Full screen

Small screen

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginFlow: "popup",
6  callbackUrl: '[Your Callback URL]',
7});

Obtention du jeton d’autorisation utilisateur

Après autorisation sur Xsolla ID, l’utilisateur est redirigé vers l’URL définie dans callbackUrl. Le jeton d’autorisation de l’utilisateur est passé dans le paramètre token.

Pour intégrer le jeton OAuth JWT de Xsolla ID dans le jeton JWT de Xsolla Login :

Ouvrez votre projet dans le Compte éditeur et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Players > Login.

Ouvrez le projet dans votre compte et accédez à la section Other tools > Login.

Appuyez sur Configure dans le panneau d’un projet de Login.
Accédez au bloc Authentication et sélectionnez Social login.
Activez la bascule Embed social network JWT token.
Appuyez sur Save changes.

Merci pour votre commentaire !

Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.

Dernière mise à jour: 7 Octobre 2026

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entrée.

Contenu

Comment ça marche
Comment obtenir
Intégration du widget Login
Activez Xsolla en tant que réseau social
Obtention du jeton d’autorisation utilisateur

Signaler un problème

Nous améliorons continuellement notre contenu grâce à vos commentaires.

Indiquez votre adresse e-mail pour un suivi

Merci pour votre commentaire !

Impossible d'envoyer votre commentaire

Réessayez plus tard ou contactez-nous à [email protected].