Connecter 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 :

npm i @xsolla/login-sdk

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

Initialiser 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 votre projet sous la section 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 votre projet sous la section 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.

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

Implémenter l'ouverture du widget Xsolla Login

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

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

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

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

Importer un package à partir d'une archive

1. Téléchargez le SDK depuis le CDN ou GitHub.

2. Décompressez le package.
3. Ouvrez votre projet Unity ou créez-en un nouveau.
4. Dans le menu principal de l'éditeur Unity, accédez à Assets > Import Package > Custom Package et sélectionnez le SDK.

Configurer un compilateur

1. Cliquez sur Edit > Project Settings dans le menu principal ;
2. Accédez à la section Player > Other Settings > Configuration ;
3. Assurez-vous que Mono est sélectionné dans le champ Scripting Backend.

Résoudre les dépendances Android

Pour les builds Android, le SDK utilise les fonctions des bibliothèques natives Android.

Pour résoudre les dépendances et télécharger les bibliothèques nécessaires :

1. Spécifiez Android comme plateforme du build :
   1. Dans l'éditeur Unity, accédez à File > Build Settings dans le menu principal.
   2. Dans le panneau Platform, sélectionnez Android.
   3. Cliquez sur Switch Platform.

2. Lancez le gestionnaire de dépendances :
   1. Dans l'éditeur Unity, accédez à Assets > External Dependency Manager > Android Resolver > Resolve dans le menu principal.
   2. Attendez que le gestionnaire de dépendances termine le processus.

En conséquence, les fichiers JAR ou AAR de toutes les bibliothèques Android nécessaires sont téléchargés dans le dossier Assets/Plugins/Android.

Configurer le SDK

1. Ouvrez votre projet Unity.
2. Dans le menu principal, cliquez sur Window > Xsolla > Edit Settings.
3. Dans le panneau Inspector, spécifiez les principaux paramètres du projet en suivant l'une des méthodes suivantes :

1. 1. Importez les paramètres depuis le compte éditeur :
      1. Cliquez sur Fill settings by PA ;
      2. Dans les champs Login et Password, spécifiez les données d'autorisation du compte éditeur ;
      3. Cliquez sur Log In ;
      4. Renseignez les champs de la section Publisher Account ;

1. 1. 5. Cliquez sur Apply Settings.

1. 2. Spécifiez les paramètres manuellement :
      1. Dans le champ Project ID, spécifiez l'ID de projet, qui se trouve dans le Compte éditeur à côté du nom de votre projet ;
      2. Dans le champ Login ID, spécifiez l'ID du projet de connexion. Pour l'obtenir, ouvrez votre Compte éditeur, accédez à la section Login > Dashboard > votre projet de connexion, puis cliquez sur Copy ID à côté du nom du projet de connexion ;
      3. Dans le champ Callback URL, spécifiez l'URL ou le chemin vers lequel les utilisateurs seront redirigés après une authentification, une confirmation par e-mail ou une réinitialisation du mot de passe réussies. La valeur doit correspondre à celle spécifiée dans le Compte éditeur dans la section Login > votre projet de connexion > Security > OAuth 2.0 ;

1. 1. 4. Dans le champ OAuth Client ID, spécifiez l'ID client OAuth 2.0, qui se trouve dans le Compte éditeur sous la section Login > votre projet de connexion > Security > OAuth 2.0.

4. Définissez d'autres paramètres si nécessaire (par exemple, les options d'affichage de l'interface de paiement dans la section Pay Station UI).

Implémenter l'ouverture du widget Xsolla Login

Pour ouvrir le widget, appelez la méthode du SDK XsollaAuth.AuthWithXsollaWidget ; passez les paramètres suivants :

• onSuccess — fonction de rappel en cas d’authentification utilisateur réussie.
• onError — fonction de rappel en cas d’erreur de requête.
• onCancel — fonction de rappel en cas d’annulation de l’authentification utilisateur, déclenché lorsque l’utilisateur ferme le widget sans terminer le processus d’authentification.
• locale — langue de l’interface (facultatif). 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).

Pour les builds autonomes, le widget s’ouvre dans le navigateur intégré inclus dans le SDK. Vous pouvez utiliser tout autre navigateur intégré qui vous permet de suivre les changements d’URL.

Installer le SDK

Les bibliothèques requises sont disponibles sur Maven Central.

Pour installer les bibliothèques :

1. Lancez Android Studio.
2. Ouvrez le fichier build.gradle de votre application.
3. Ajoutez les lignes suivantes à la section des dépendances, où <version_number> est la version de la bibliothèque requise :

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

Initialiser le SDK

Initialisez la bibliothèque Login en appelant une méthode statique au démarrage de l’application. Pour ce faire, ajoutez les lignes suivantes au code source de votre projet Android :

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

Implémenter l'ouverture du widget Xsolla Login

Pour ouvrir le widget :

1. Appelez la méthode XLogin.startAuthWithXsollaWidget de la bibliothèque Login ; passez les paramètres suivants :

1. • fragment ou activity — fragment ou activité en cours ;

1. • callback — fonction de rappel d'état ;

1. • locale — langue de l'interface (facultatif). 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).

2. À l'intérieur de la méthode onActivityResult, appelez la méthode XLogin.finishAuthWithXsollaWidget de la bibliothèque Login ; passez les paramètres suivants :

1. • activity — activité en cours : nécessaire pour traiter le contexte de l'application ;

1. • activityResultRequestCode — code de la requête de la méthodeonActivityResult : utilisé pour identifier la requête originale ;

1. • activityResultCode — code de résultat de la méthodeonActivityResult : permet de déterminer si l'opération s'est déroulée avec succès ;

1. • activityResultData — données renvoyées par onActivityResult : contiennent les résultats de l'opération ;

1. • callback — fonction de rappel d'état : utilisée pour traiter le résultat de l'authentification.

3. Lors du traitement du résultat de l'autorisation, initialisez la bibliothèque Store.

Initialisation de la bibliothèque Store :

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

Installer le SDK

1. Téléchargez le lanceur Epic Games.
2. Créez un nouveau projet Unreal Engine.

3. Téléchargez et installez le SDK :
   1. Pour télécharger et installer le SDK depuis l'Unreal Engine Marketplace :
      1. Accédez à la page du SDK sur l'Unreal Engine Marketplace.
      2. Cliquez sur Open in Launcher.

1. 1. 3. Accédez au lanceur Epic Games.

1. 1. 4. Cliquez sur Install to Engine.
      5. Ouvrez votre projet Unreal Engine dans l'éditeur Unreal.
      6. Accédez à la section Settings > Plugins > Installed > Xsolla SDK. Cochez la case Enabled et cliquez sur Restart Now pour enregistrer les paramètres et recharger l'éditeur Unreal.

1. 2. Pour télécharger et installer le SDK depuis GitHub :
      1. Téléchargez le package avec le SDK pour votre version du moteur.
      2. Décompressez le package.
      3. Déplacez le dossier du SDK dans le répertoire plugins à la racine de votre projet Unreal Engine.

Configurer le SDK

1. Ouvrez votre projet Unreal Engine dans l'éditeur Unreal.
2. Accédez à Settings > Project Settings > Plugins > Xsolla Settings > General et spécifiez les paramètres du projet :

1. 1. Dans le champ Project ID, spécifiez l'ID de projet, qui se trouve dans le Compte éditeur à côté du nom de votre projet ;
   2. Dans le champ Login ID, spécifiez l'ID du projet de connexion. Pour l'obtenir, ouvrez votre Compte éditeur, accédez à la section Login > Dashboard > votre projet de connexion, puis cliquez sur Copy ID à côté du nom du projet de connexion ;
   3. Dans le champ Client ID, spécifiez l'ID client OAuth 2.0, qui se trouve dans le Compte éditeur sous la section Login > votre projet de connexion > Security > OAuth 2.0 ;
   4. Dans le champ Redirect URI, spécifiez l'URL ou le chemin de l'application vers lequel les utilisateurs sont redirigés après une authentification, une confirmation par e-mail ou une réinitialisation du mot de passe réussies. La valeur doit correspondre à celle spécifiée dans le Compte éditeur sous la section Login > votre projet de connexion > Security > OAuth 2.0 ;
   5. Définissez d'autres paramètres si nécessaire (par exemple, les options d'affichage de l'interface de paiement dans la section Pay Station UI).

1. En conséquence, votre projet dans le Compte éditeur sera connecté aux maps de démo.

3. Accédez à Content Browser > View Options et cochez les cases Show Engine Content et Show Plugin Content.

Implémenter l'ouverture du widget Xsolla Login

Appelez la méthode SDK AuthWithXsollaWidget ; passez les paramètres suivants :

• WorldContextObject — Objet de contexte mondial (pour les appels C++).
• SuccessCallback — fonction de rappel en cas d’authentification utilisateur et de réception de jeton réussies (facultatif).
• CancelCallback — fonction de rappel en cas d’annulation de l’authentification utilisateur, déclenché lorsque l’utilisateur ferme le widget sans terminer le processus d’authentification (facultatif).
• ErrorCallback — fonction de rappel en cas d’erreurs pendant le processus d’authentification (facultatif).
• bRememberMe — détermine la nécessité de conserver les données d’authentification (facultatif). La valeur par défaut est false.
• Locale — langue de l’interface (facultatif). Par défaut, cette valeur est définie par l’adresse IP de l’utilisateur.
• State — chaîne utilisée pour une vérification utilisateur supplémentaire sur le serveur de l’application. La valeur par défaut est xsollatest.

Exemple :