Configurez l’authentification utilisateur

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 :

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é

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.

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

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.

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 :

• 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).

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>

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.

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.