Si vous utilisez votre propre système d’authentification, assurez-vous à cette étape qu’il stocke et transmet les données nécessaires à Xsolla pour gérer les abonnements :

• ID utilisateur unique
• adresse e-mail de l’utilisateur

Dans ce cas, créez un site web avec le modèle Web Shop et configurez l’authentification des utilisateurs via un ID ou des liens profonds.

Pour ce faire :

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Storefronts > Websites.
2. Appuyez sur Create site.
3. Sélectionnez le modèle Web Shop.
4. Ajoutez l’URL d’une plateforme externe où votre jeu est disponible. Cette URL vous permet de créer rapidement une page à l’effigie de votre jeu : les images, le titre du jeu, les informations sur le développeur et le schéma de couleurs sont ajoutés automatiquement. Si vous ne souhaitez pas utiliser les données du jeu, désactivez la bascule Copy game info via App Store or Google Play URL.

5. Appuyez sur Create Web Shop.

6. Configurez l’une des options d’authentification utilisateur suivantes :

   • Authentification par ID utilisateur
   • [Authentification par ID utilisateur et lien profond
   • Authentification par lien profond
   • Authentification via Xsolla Login par ID utilisateur lié

Configurez l'authentification utilisateur dans le Compte éditeur

Xsolla vous permet de configurer différentes méthodes d’authentification utilisateur. Ce guide fournit des instructions pour l’intégration et la configuration rapides de l’authentification utilisateur, par code à usage unique ou via un réseau social, en utilisant un widget prêt à l’emploi.

Par la suite, vous pourrez modifier la méthode d’authentification utilisateur ou utiliser une autre méthode d’intégration.

Xsolla fournit des modèles de widget standard. Leur apparence et leur contenu sont déterminés par la méthode de connexion choisie pour le projet et les paramètres de customisation du widget dans le Compte éditeur.

Vue du widget standard pour l’authentification par code à usage unique ou via un réseau social :

Pour configurer l’authentification utilisateur dans le Compte éditeur :

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Players > Login.
2. Dans la section Dashboard, appuyez sur Create Login project.
3. Sélectionnez Standard Login project et cliquez sur Create and set up. Patientez pendant la création de votre nouveau projet de Login. La page du projet de Login s’affiche ensuite.
4. Dans le bloc Login methods, sélectionnez Passwordless login.
5. Cliquez sur Configure.
6. Configurez l’autorisation à l’aide d’un code à usage unique :
   1. Dans le bloc Passwordless login, sélectionnez Callback URLs.
   2. Dans le champ Callback URL, ajoutez l'URL vers laquelle l'utilisateur est redirigé après une authentification réussie.
   3. Appuyez sur Save changes.
7. Configurez l’authentification via les réseaux sociaux (facultatif) :
   1. Appuyez sur le nom du projet Login dans le fil d'Ariane pour revenir à la page du projet Login.
   2. Accédez au bloc Authentification et sélectionnez Social login.
   3. Connectez les réseaux sociaux que les utilisateurs utiliseront pour s'inscrire et se connecter à l'application :

1. 1. • Pour connecter le réseau social souhaité, cliquez sur l'icône ⚙ et sélectionnez Connect

1. 1. • Pour connecter plusieurs réseaux sociaux à la fois, sélectionnez les volets requis (leurs bordures deviennent vertes). Ensuite, dans le menu déroulant Manage, sélectionnez Connect

1. 1. • Pour connecter simultanément tous les réseaux sociaux disponibles, cliquez sur Select all. Ensuite, dans le menu déroulant Manage, sélectionnez Connect

1. 4. Appuyez sur Save changes.

Vous pouvez tester les paramètres du widget. Pour ce faire, cliquez sur Check now sur le côté gauche de l’écran et connectez-vous.

Au cours du processus d’intégration, vous aurez besoin d’un ID de projet Login. Vous pouvez en obtenir un dans votre projet, dans le Compte éditeur, sous la section Players > Login > Dashboard.

Implémentez l'authentification utilisateur dans l'application

Vous trouverez ci-dessous les instructions pour intégrer rapidement Xsolla Login dans votre application en utilisant un widget Web prêt à l’emploi.

Si vous préférez utiliser votre propre interface pour connecter l’utilisateur à votre application, implémentez la logique d’authentification utilisateur à l’aide de Login API ou des méthodes SDK.

Connectez le SDK du widget Xsolla Login

Le widget Xsolla Login est disponible pour installation via le gestionnaire de paquets NPM ou en utilisant la balise <script> sur une page HTML.

Connectez le SDK du widget Xsolla Login de l’une des manières suivantes :

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

Initialisez le SDK du widget Xsolla Login

Initialisez le widget à l’aide de l’une des méthodes ci-dessous. Spécifiez les paramètres suivants :

• projectId — ID de projet de Login. Ce paramètre se trouve dans le projet sous la section Players > Login > Dashboard dans le Compte éditeur.
• preferredLocale — langue de l’interface. Les langues suivantes sont prises en charge : arabe (ar_AE ), bulgare (bg_BG ), tchèque (cz_CZ ), anglais (en_US ), allemand (de_DE ), espagnol (es_ES), français (fr_FR ), hébreu (he_IL ), italien (it_IT ), japonais (ja_JP ), coréen (ko_KR), polonais (pl_PL ), portugais (pt_BR ), roumain (ro_RO ), russe (ru_RU ), thaï (th_TH), turc (tr_TR ), vietnamien (vi_VN ), chinois simplifié (zh_CN ), chinois traditionnel (zh_TW).
• clientId — ID de client OAuth 2.0. Ce paramètre se trouve dans le projet sous la section Players > Login > votre projet de Login > Security > OAuth 2.0 dans le Compte éditeur.
• redirectUri — 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. Doit être spécifiée dans le Compte éditeur dans les paramètres du client OAuth2.0.

Laissez les autres paramètres inchangés.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

Implémentez l'ouverture du widget Xsolla Login

1. Ajoutez un bouton avec l’événement on-click et la fonction xl.open() à votre page HTML :

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. Ajoutez le code pour ouvrir le widget dans le bloc <div> de votre page HTML.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

Configurez l'authentification utilisateur dans le Compte éditeur

Xsolla vous permet de configurer différentes méthodes d’authentification utilisateur. Ce guide fournit des instructions pour l’intégration rapide de l’authentification utilisateur, par code à usage unique ou via un réseau social.

Plus tard, vous pourrez modifier la méthode d’authentification utilisateur.

Pour configurer l’authentification utilisateur dans le Compte éditeur :

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Players > Login.
2. Dans la section Dashboard, appuyez sur Create Login project.
3. Sélectionnez Standard Login project et cliquez sur Create and set up. Patientez pendant la création de votre nouveau projet de Login. La page du projet de Login s’affiche ensuite.
4. Dans le bloc Login methods, sélectionnez Passwordless login.
5. Cliquez sur Configure.
6. Configurez l’autorisation à l’aide d’un code à usage unique :
   1. Dans le bloc Passwordless login, sélectionnez Callback URLs.
   2. Dans le champ Callback URL, ajoutez l'URL vers laquelle l'utilisateur est redirigé après une authentification réussie.
   3. Appuyez sur Save changes.
7. Configurez l’authentification via les réseaux sociaux (facultatif) :
   1. Appuyez sur le nom du projet Login dans le fil d'Ariane pour revenir à la page du projet Login.
   2. Accédez au bloc Authentification et sélectionnez Social login.
   3. Connectez les réseaux sociaux que les utilisateurs utiliseront pour s'inscrire et se connecter à l'application :

1. 1. • Pour connecter le réseau social souhaité, cliquez sur l'icône ⚙ et sélectionnez Connect

1. 1. • Pour connecter plusieurs réseaux sociaux à la fois, sélectionnez les volets requis (leurs bordures deviennent vertes). Ensuite, dans le menu déroulant Manage, sélectionnez Connect

1. 1. • Pour connecter simultanément tous les réseaux sociaux disponibles, cliquez sur Select all. Ensuite, dans le menu déroulant Manage, sélectionnez Connect

1. 4. Appuyez sur Save changes.

Configurez l'authentification utilisateur dans le constructeur de site

Pour créer un site et configurer l’authentification utilisateur :

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Storefronts > Websites.
2. Appuyez sur Create site.
3. Sélectionnez n’importe quel modèle de site et lancez la création de votre site.

4. Dans le constructeur, accédez à la section Login settings > Xsolla Login et, dans la liste déroulante, sélectionnez l’option d’authentification précédemment configurée.
5. Pour que la fenêtre modale d’autorisation corresponde à la palette de couleurs du site, activez le bouton Use site theme (recommandé).
6. Dans la section Layout, configurez le logo et l’arrière-plan personnalisé si nécessaire.