Comment intégrer l’authentification utilisateur via le compte Xsolla

Comment ça marche

Vous pouvez ajouter l’authentification utilisateur via le compte Xsolla sur Xsolla Wallet.

Scénarios d'utilisation

Implémentez l’un des scénarios d’utilisation suivants :

1. Ouverture de la page d’authentification Xsolla Wallet dans une fenêtre modale en cliquant sur le bouton Log in with Xsolla dans le widget Login :
   1. L’utilisateur clique sur le bouton Log in with Xsolla dans le widget Login ;
   2. Il est redirigé vers l’écran d’authentification Xsolla Wallet qui s’ouvre dans une fenêtre modale ;
   3. L’utilisateur termine le processus d’authentification sur Xsolla Wallet ;
   4. Il est redirigé vers la page dont l’URL est spécifiée dans le champ Callback URL dans le Compte éditeur.

2. Redirection vers la page d'authentification Xsolla Wallet en cliquant sur le bouton Log in with Xsolla dans le widget Login :
   1. L'utilisateur clique sur le bouton Log in with Xsolla dans le widget Login ;
   2. Il est redirigé vers l'écran d'authentification Xsolla Wallet qui s'ouvre dans la même fenêtre ;
   3. L'utilisateur termine le processus d'authentification au Xsolla Wallet ;
   4. Il est redirigé vers la page dont l'URL est spécifiée dans le champ Callback URL dans Compte éditeur.

3. Redirection vers la page d'authentification Xsolla Wallet dans une fenêtre contextuelle en cliquant sur un bouton de votre site web :
   1. L'utilisateur clique sur le bouton sur votre site web ;
   2. Il est redirigé vers l'écran d'authentification Xsolla Wallet qui s'ouvre dans une fenêtre contextuelle ;
   3. L'utilisateur termine le processus d'authentification au Xsolla Wallet ;
   4. Il est redirigé vers la page dont l'URL est spécifiée dans le champ Callback URL dans le Compte éditeur.

Comment configurer

Pour intégrer l’authentification via Xsolla en tant que réseau social :

1. Créez un client OAuth 2.0 pour le compte Xsolla.
2. Intégrez le widget Login.
3. Activez Xsolla en tant que réseau social.
4. Implémentez la récupération du jeton d’autorisation utilisateur.

Création d'un client OAuth 2.0 pour le compte Xsolla

1. Créez un projet dans le Compte éditeur.
2. Configurez un projet de connexion dans le Compte éditeur.
3. Contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com et fournissez les informations suivantes :

4. L'équipe d'intégration Xsolla créera pour vous un client OAuth 2.0 pour le compte Xsolla et vous fournira son identifiant et sa clé secrète. Ces données sont nécessaires pour obtenir le jeton d'autorisation utilisateur.

Intégration du widget Login

Activer Xsolla en tant que réseau social

1. Ouvrez votre projet dans le Compte éditeur et accédez à la section Login.
2. Dans le volet du projet de connexion, cliquez sur Configure.
3. Accédez à la section Authentication, puis choisissez la section Social login.
4. Sélectionnez Xsolla dans la liste des réseaux sociaux.

5. Cliquez sur l'icône ⚙ et sélectionnez Settings.
6. Remplissez les champs suivants :
   • Application ID — identifiant client OAuth 2.0 pour le compte Xsolla, que vous avez reçu de Xsolla ;
   • Application secret key — clé OAuth 2.0 pour le compte Xsolla, que vous avez reçue de Xsolla ;
   • Your website link — site Web à partir duquel les serveurs Xsolla reçoivent la requête d'échange de code d'autorisation contre un jeton d'autorisation utilisateur. Spécifiez la même adresse URL que celle indiquée comme paramètre Audience lors de la création du client OAuth 2.0 pour le compte Xsolla.

7. Cliquez sur Connect.

8. Implémentez l'un des scénarios utilisateur :
   • Redirection vers la page d'authentification Xsolla Wallet en cliquant sur le bouton Log in with Xsolla dans le widget Login (par défaut) :
     1. Accédez à la section Authentication, puis choisissez la section Callback URLs ;
     2. Dans le champ Callback URL, entrez l'adresse URL de la page vers laquelle vous souhaitez rediriger l'utilisateur après l'authentification ;
     3. Dans le paramètre callbackUrl du code du widget Login, spécifiez l'adresse URL de la page vers laquelle l'utilisateur doit être redirigé après l'authentification.

Exemple de code de widget :

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

1. • Redirection vers la page d'authentification Xsolla Wallet dans une fenêtre contextuelle en cliquant sur un bouton de votre site Web :
     1. Sur la page de navigation, accédez à la section Authentication, puis choisissez la section Callback URLs ;
     2. Assurez-vous que les URL suivantes sont ajoutées dans la section Callback URL :
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     3. Dans le code du widget Login, passez au paramètre babkaLoginPopup la valeur true, et spécifiez l'adresse URL de la page vers laquelle l'utilisateur doit être redirigé après l'authentification dans le paramètre callbackUrl.

Exemple de code de widget :

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

1. • 4. Ajoutez le bouton ouvrant la page d'authentification Xsolla Wallet à votre site web.

Exemple de code du bouton Log in with Xsolla :

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • Ouverture de la page d'authentification Xsolla Wallet dans une fenêtre modale en cliquant sur le bouton Log in with Xsolla dans le widget Login :
     1. Accédez à la section Authentication, puis choisissez la section Callback URLs ;
     2. Dans le champ Callback URL, entrez l'adresse URL de la page vers laquelle vous souhaitez rediriger l'utilisateur après l'authentification ;
     3. Dans le code du widget Login, passez au paramètre babkaLoginFlow la valeur popup, et spécifiez l'adresse URL de la page vers laquelle l'utilisateur doit être redirigé après l'authentification dans le paramètre callbackUrl.

Exemple de code de widget :

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

Obtenir un jeton d'autorisation utilisateur

Après l’autorisation côté Xsolla, l’utilisateur est redirigé vers l’URL spécifiée dans le paramètre callback_url. Le jeton d’autorisation utilisateur est passé dans le paramètre token.

Pour passer le jeton OAuth du compte Xsolla dans le jeton d’autorisation JWT :

1. Ouvrez votre projet dans le Compte éditeur et accédez à la section Login.
2. Dans le panneau du projet de connexion, cliquez sur Configure.
3. Accédez à la section Authentication, puis choisissez la section Social login.

4. Réglez la bascule Embed social network JWT token sur On.
5. Cliquez sur Save changes.