Flux utilisateur

1. L'utilisateur accède à Web Shop avec l'authentification par ID utilisateur configurée.
2. L'utilisateur s'authentifie dans Web Shop de l'une des manières suivantes :
   • L'utilisateur saisit son ID dans le bloc de connexion rapide et clique sur le bouton de connexion.
   • L'utilisateur clique sur le bouton d'achat pour l'objet sélectionné ou sur le bouton de connexion dans la barre supérieure :
     1. Une fenêtre modale pour entrer l'ID utilisateur ou se connecter via un réseau social s'ouvre ;
     2. L'utilisateur saisit son ID et clique sur Continue ou clique sur l'icône des réseaux sociaux pour choisir un réseau social et termine l'authentification sur la page du réseau social.

3. Le système vérifie l'existence d'un utilisateur avec cet ID ou ce compte social dans le jeu. S'il existe, l'utilisateur est autorisé dans Web Shop. Sinon, un message d'erreur s'affiche.

Comment configurer

1. Côté application, implémentez la gestion du webhook de validation utilisateur.

Lors de la réception d’un webhook, l’application doit effectuer les opérations suivantes :

• Rechercher l’utilisateur à l’aide de son ID passé dans le webhook.
• En fonction du résultat, envoyer l’un des codes d’état suivants :
  • Un code HTTP 200 avec une réponse du webhook, si l’utilisateur est trouvé ;
  • Un code HTTP 404, si l’ID utilisateur n’est pas trouvé.
• Envoyer les attributs utilisateur à des fins de personnalisation.

2. Ouvrez votre projet dans le Compte utilisateur.
3. Dans la barre latérale, cliquez sur Site Builder.
4. Cliquez sur Open Site Builder.
5. Accédez au bloc Login Settings.

6. Sélectionnez l'option User ID.

7. Dans la liste déroulante, sélectionnez New Login.

8. Entrez l'URL pour recevoir les webhooks.

9. Configurez l'autorisation via les réseaux sociaux déjà connectés à votre application (facultatif) :
   1. Ouvrez votre projet dans le Compte éditeur et accédez à la section Login.
   2. Cliquez sur Configure dans la barre du site.
   3. Accédez au bloc Authentication et sélectionnez Social login.

1. 4. Pour configurer un réseau social, accédez à la carte de réseau social, cliquez sur l'icône ⚙ à droite du nom, puis sélectionnez Connect.

Flux utilisateur

1. L’utilisateur accède à Web Shop avec l’authentification Xsolla Login configurée.
2. L’utilisateur clique sur le bouton d’achat de l’objet sélectionné, sur le bouton de connexion de la barre supérieure ou sur le bouton de connexion du bloc de connexion rapide.
3. Une fenêtre modale s’affiche avec les méthodes d’autorisation configurées dans Xsolla Login.

4. L'utilisateur s'authentifie et saisit des données supplémentaires si nécessaire.
5. Le système vérifie l'existence de l'utilisateur. S'il existe, l'utilisateur est autorisé dans Web Shop. Sinon, un message d'erreur s'affiche.

Comment configurer

1. Dans le constructeur de votre site, accédez au bloc Login settings.

2. Sélectionnez l'option d'autorisation Xsolla Login.
3. Dans la liste déroulante, sélectionnez New Login.

4. Accédez aux paramètres du projet de connexion depuis la fenêtre modale ou cliquez sur Set up authentication method dans le bloc Xsolla Login.

5. Connectez le stockage des données utilisateur.

Selon la méthode de stockage des données utilisateur, différentes fonctionnalités du produit sont à votre disposition (voir Comparaison des options de stockage des données utilisateur).

Stockage Xsolla

Si vous souhaitez que le produit Login traite toute la logique d’authentification, connectez le stockage Xsolla. Vous aurez à votre disposition des paramètres plus flexibles.

Lorsque vous créez un projet de connexion, le stockage Xsolla est connecté par défaut, aucune étape supplémentaire n’est requise pour le configurer. Si vous avez modifié le type de stockage par défaut et que vous devez reconnecter le stockage Xsolla, procédez comme suit :

1. Accédez au bloc User database et sélectionnez la section Storage.
2. Sélectionnez Xsolla storage et cliquez sur Save changes.

Stockage PlayFab

Si vous souhaitez utiliser les fonctionnalités PlayFab pour interagir avec les utilisateurs, connectez le stockage PlayFab. Ce stockage enregistre les données utilisateur suivantes :

• nom d’utilisateur ;
• adresse e-mail utilisateur ;
• mot de passe utilisateur ;
• champs d’un formulaire d’inscription étendu, si le formulaire est configuré.

Le stockage PlayFab vous donne accès aux fonctionnalités suivantes :

• inscription utilisateur ;
• authentification par adresse e-mail ou nom d’utilisateur et mot de passe ;
• authentification via Twitch ;
• réinitialisation du mot de passe utilisateur ;
• blocage des utilisateurs.

Pour connecter le stockage :

1. Accédez au bloc User database et sélectionnez la section Storage.
2. Sélectionnez PlayFab.
3. Dans le champ Title ID, entrez la même valeur que celle dans votre compte PlayFab.
4. Cliquez sur Save changes.

Stockage Firebase

Si vous souhaitez utiliser les fonctionnalités Firebase pour interagir avec les utilisateurs, connectez le stockage Firebase. Ce stockage enregistre les données utilisateur suivantes :

• nom d’utilisateur ;
• adresse e-mail utilisateur ;
• mot de passe utilisateur ;
• champs du formulaire d’inscription étendu, si le formulaire est configuré.

1. Accédez au bloc User database et sélectionnez la section Storage.
2. Sélectionnez Firebase.
3. Dans le champ API key, entrez la même valeur que celle dans votre compte Firebase.
4. Cliquez sur Save changes.

Stockage personnalisé

Si vous utilisez votre propre système d’autorisation et que vous stockez les données utilisateur côté application, connectez votre propre stockage.

Le stockage personnalisé vous donne accès aux fonctionnalités suivantes :

• inscription utilisateur ;
• authentification par adresse e-mail ou nom d’utilisateur et mot de passe ;
• authentification sans mot de passe par numéro de téléphone ;
• authentification via les réseaux sociaux ;
• réinitialisation du mot de passe utilisateur.

1. Connectez le stockage personnalisé.
2. Configurez le traitement des requêtes depuis le serveur de connexion Xsolla.

Connecter un stockage personnalisé

1. Accédez au bloc User database et sélectionnez la section Storage.
2. Sélectionnez Custom storage.
3. Entrez les URL vers lesquelles envoyer les requêtes API :
   • URL de vérification utilisateur ;
   • URL de nouvel utilisateur ;
   • URL de réinitialisation de mot de passe ;
   • URL de connexion sans mot de passe par téléphone ;
   • URL de connexion via les réseaux sociaux.
4. Cliquez sur Save changes.
5. Pour les URL que vous avez définies, implémentez un appel API qui renverra ce qui suit :
   • Un code HTTP 200 ou 204 en cas de requête réussie. Si nécessaire, un JSON contenant des données utilisateur supplémentaires peut être placé dans le corps de la réponse. Les données passées sont écrites dans un JWT (le paramètre partner_data) ;
   • Autres codes HTTP d'état en cas de requête infructueuse.

Configurer le traitement des requêtes depuis le serveur Xsolla Login

Les requêtes du serveur Xsolla Login sont envoyées aux URL que vous avez spécifiées dans le Compte éditeur, avec l’en-tête Authorization: Bearer <JWT>. Le JWT est signé avec la clé secrète de votre projet.

Pour traiter une demande :

1. Validez le JWT reçu.
2. Si la validation est réussie, décodez le JWT et assurez-vous qu’il inclut les revendications du tableau ci-dessous. Trouvez et utilisez une bibliothèque pour le décodage.

{
  "exp": 1573635020,
  "iat": 1573634600,
  "iss": "https://login.xsolla.com",
  "request_type": "gateway_request",
  "xsolla_login_project_id": "00000000-0000-0000-0000-000000000000"
}