Comment intégrer l’authentification utilisateur via Xsolla ID

Comment ça fonctionne

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

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 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. L’utilisateur est redirigé vers la page d’authentification Xsolla ID qui s’ouvre dans une fenêtre modale.
  3. L’utilisateur complète le processus d’authentification sur la page d’authentification Xsolla ID.
  4. L’utilisateur est redirigé vers l’URL spécifiée dans le champ Callback URL dans le Compte éditeur.

• Redirection vers la page d’authentification Xsolla ID 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. L’utilisateur est redirigé vers l’écran d’authentification Xsolla ID qui s’ouvre dans la même fenêtre.
  3. L’utilisateur complète le processus d’authentification sur Xsolla ID.
  4. L’utilisateur est redirigé vers la page dont l’URL est spécifiée dans le champ Callback URL dans le Compte éditeur.

• Redirection vers la page d’authentification Xsolla ID dans une fenêtre contextuelle en cliquant sur un bouton de votre site web :

  1. L’utilisateur clique sur un bouton de votre site web.
  2. L’utilisateur est redirigé vers la page d’authentification Xsolla ID qui s’ouvre dans une fenêtre contextuelle.
  3. L’utilisateur complète le processus d’authentification sur la page d’authentification Xsolla ID.
  4. L’utilisateur est redirigé vers la page dont l’URL est spécifiée dans le champ Callback URL dans le Compte éditeur.

Comment l’obtenir

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

1. Intégrez le widget Login.
2. Activez Xsolla comme réseau social.
3. Implémentez la récupération du jeton d’autorisation utilisateur.

Intégration du widget Login

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

Activer Xsolla comme réseau social

1. Dans votre projet dans le Compte éditeur, allez à la section Players > Login.

2. Cliquez sur Configure dans le panneau d’un projet de Login.

3. Allez au bloc Authentication et sélectionnez Social login.

4. Sélectionnez Xsolla dans la liste des réseaux sociaux.

5. Cliquez sur l’icône ⚙ et sélectionnez Connect.

6. Configurez l’un des scénarios utilisateur :

   • Authentification dans la même fenêtre
   • Authentification dans une fenêtre contextuelle
   • Authentification dans une fenêtre modale

Authentification dans la même fenêtre

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

1. Allez à la section Authentication et cliquez sur Callback URLs.
2. Dans le champ Callback URL, entrez l’URL vers laquelle rediriger l’utilisateur après l’authentification.
3. Dans le paramètre callbackUrl du code du widget Login, passez l’URL vers laquelle rediriger l’utilisateur après l’authentification.

Exemple de code du widget :

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 après qu’il ait cliqué sur un bouton de votre site web :

1. Sur la page de navigation, allez à la section Authentication et cliquez sur Callback URLs.
2. Assurez-vous que l’URL suivante est ajoutée dans la section Callback URL : https://login.xsolla.com/api/social/oauth2/callback.
3. Dans le code du widget Login, passez la valeur true dans le paramètre babkaLoginPopup, et passez l’URL vers laquelle rediriger l’utilisateur après l’authentification dans le paramètre callbackUrl.

Exemple de code du widget :

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});

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

Exemple de code du bouton Log in with Xsolla :

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

Authentification dans une fenêtre modale

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

1. Allez à la section Authentication et cliquez sur Callback URLs.
2. Dans le champ Callback URL, entrez l’URL vers laquelle rediriger l’utilisateur après l’authentification.
3. Dans le code du widget Login, passez la valeur popup dans le paramètre babkaLoginFlow, et passez l’URL vers laquelle rediriger l’utilisateur après l’authentification dans le paramètre callbackUrl.

Exemple de code du widget :

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 l’autorisation du côté Xsolla ID, l’utilisateur sera redirigé vers l’URL spécifiée dans le paramètre callbackUrl. Le jeton d’autorisation 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 :

1. Dans votre projet dans le Compte éditeur, allez à la section Players > Login.
2. Cliquez sur Configure dans le panneau d’un projet de Login.
3. Allez au bloc Authentication et sélectionnez Social login.
4. Activez la bascule Embed social network JWT token.
5. Cliquez sur Save changes.