Configurer l’authentification utilisateur

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 Fast Login 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.

4. Si votre site comporte plusieurs pages, sélectionnez celle qui vous intéresse :
   1. Appuyez sur le titre de la page actuelle en haut du constructeur.
   2. Sélectionnez la page souhaitée dans la liste déroulante.
5. Accédez au bloc Login settings.

6. Sélectionnez l’option ID utilisateur.

7. Dans la liste déroulante, sélectionnez New 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.

Un lien profond est une URL spéciale qui redirige l’utilisateur non seulement vers la page d’accueil d’une application ou d’un site Web, mais directement vers une section, une page ou une action précise.

Les liens profonds peuvent être utilisés comme méthode d’authentification supplémentaire lors de la connexion par ID utilisateur. Si le jeu est déjà installé sur l’appareil mobile de l’utilisateur, il sera automatiquement redirigé vers le jeu via un lien profond pour obtenir un jeton d’autorisation.

Flux utilisateur

Dans l'application mobile

1. Un utilisateur non autorisé du Web Shop clique sur le bouton de connexion ou sur le bouton d'achat. Une fenêtre modale permettant de saisir l'ID utilisateur ou de se connecter via le jeu mobile s'affiche.

2. L'utilisateur clique sur le bouton Log in via Mobile Game.
3. L'utilisateur est redirigé vers le jeu, puis automatiquement vers le Web Shop en tant qu'utilisateur autorisé.

Dans la version de bureau

1. Un utilisateur non autorisé du Web Shop clique sur le bouton de connexion ou sur le bouton d'achat. Une fenêtre modale permettant de saisir l'ID utilisateur ou de se connecter à la version mobile du jeu à l'aide d'un code QR s'affiche.

2. L'utilisateur scanne le code QR à l'aide de son appareil mobile.
3. Le Web Shop s'ouvre sur l'appareil mobile de l'utilisateur.
4. L'utilisateur est automatiquement redirigé vers le jeu, puis automatiquement vers le Web Shop en tant qu'utilisateur autorisé.

Flux d'interaction des services

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Utilisateur
    participant WS as Web Shop
    participant B as Navigateur
    participant MOS as OS mobile
    participant G as Jeu
    participant LA as Login API
    U->>WS: Appuie sur le bouton pour se connecter via le jeu mobile
    activate WS
    WS->>B: Redirige l’utilisateur via un lien profond
    activate B
    B->>MOS: Effectue un appel système pour ouvrir un jeu mobile
    activate MOS
    MOS->>G: Ouvre le jeu mobile
    activate G
    G->>LA: Génère un jeton d’autorisation
    activate LA
    LA-->>G: Renvoie un jeton d’autorisation
    deactivate LA
    G->>MOS: Effectue un appel système pour ouvrir le navigateur avec le jeton dans l’URL
    deactivate G
    MOS-->>B: Ouvre le navigateur avec le jeton dans l’URL
    deactivate MOS
    B-->>WS: Ouvre la page du Web Shop pour les utilisateurs autorisés
    deactivate B
    WS-->>U: Affiche le nom d’utilisateur dans l’en-tête
    deactivate WS

Comment configurer

Côté jeu

1. Dans les paramètres de l’application mobile de votre jeu, enregistrez un schéma d’URL pour ouvrir le jeu via un lien profond :
   • dans les applications Android — dans le fichier AndroidManifest.xml ;
   • dans les applications iOS — dans le fichier Info.plist.

Après l'enregistrement du schéma, lorsque l'utilisateur s'authentifie dans le Web Shop via le jeu, le jeu s'ouvrira à l'adresse spécifiée.

Exemple de lien d'ouverture du jeu via un schéma d'URL enregistré :

scheme://authorize?operationPayload=<VALUE>, où :
• scheme — identifiant unique du jeu, utilisé dans un schéma d'URL personnalisé pour lancer l'application et accéder à l'action souhaitée.
• authorize — exemple de nom d'action à exécuter après l'ouverture du jeu. Utilisez le nom d'action correspondant à votre système d'exploitation.
• operationPayload=<VALUE> — paramètre contenant les informations nécessaires pour générer le jeton lors de l'authentification. La valeur est encodée en Base64 et générée par Xsolla.

Exemples :

• Enregistrement d'un schéma d'URL dans les applications iOS
• Enregistrement d'un schéma d'URL dans les applications Android

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</intent-filter>

2. Implémentez la génération d’un jeton d’autorisation au format JWT en utilisant l’ID utilisateur dans le jeu.

Exemple d'appel à la méthode API de génération de jeton utilisateur à l'aide de curl :

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 7 "settings": {
 8   "projectId": 123456,
 9   "merchantId": 123456
10 },
11 "user": {
12   "id": "123",
13   "country": "US"
14 }
15 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
16}'

Vous obtiendrez une réponse de type {token="JWT_TOKEN"}.

3. Ajoutez une fenêtre contextuelle avec une notification d’autorisation réussie (facultatif).

4. Implémentez l’ouverture du Web Shop dans le navigateur à l’aide du jeton utilisateur obtenu.

Exemple de création d'une URL pour ouvrir le Web Shop dans le navigateur d'un utilisateur autorisé :
• https:​//example.com/?token={token}, si vous utilisez un domaine personnalisé ;
• https:​//example.xsolla.site/?token={token}, si vous utilisez un domaine Xsolla.

Où {token} est le jeton d'autorisation utilisateur.

Dans Site Builder

2. Cliquez sur Configure sur la carte du site de votre Web Shop avec authentification par ID utilisateur.
3. Accédez à Login Settings et sélectionnez la section User ID.
4. Activez l’option Deeplink authorization.

5. Dans le champ Deeplink URL, entrez le lien pour l’authentification utilisateur.

6. Si vous utilisez le bloc Fast Login sur votre site :
   1. Accédez au bloc Fast Login ;
   2. Dans la section Layout, activez l’option QR code.

7. Pour vérifier l’authentification, cliquez sur Preview.
8. Pour publier le site Web, cliquez sur Publish.

Un lien profond est une URL spéciale qui redirige l’utilisateur non seulement vers la page d’accueil d’une application ou d’un site Web, mais directement vers une section, une page ou une action précise.

Les liens profonds permettent à l’utilisateur de s’authentifier dans le Web Shop via le jeu en un seul clic, contournant ainsi le processus d’authentification par ID utilisateur ou via Xsolla Login.

Si le jeu est déjà installé sur l’appareil mobile de l’utilisateur, il sera automatiquement redirigé vers le jeu via un lien profond pour obtenir un jeton d’autorisation.

Lorsqu’un lien profond est utilisé comme méthode d’authentification principale, il permet d’enregistrer les informations de paiement, ce qui n’est pas possible avec l’authentification par ID utilisateur et lien profond. Dans ce cas, il sert uniquement à rendre l’authentification plus rapide, sans ajouter de nouvelles fonctionnalités.

Flux utilisateur

Dans l'application mobile

1. Un utilisateur non autorisé du Web Shop clique sur le bouton de connexion ou sur le bouton d'achat. Une fenêtre modale permettant de se connecter via le jeu mobile s'affiche.

2. L'utilisateur clique sur le bouton Log in via Mobile Game.
3. L'utilisateur est redirigé vers le jeu, puis automatiquement vers le Web Shop en tant qu'utilisateur autorisé.

Dans la version de bureau

1. Un utilisateur non autorisé du Web Shop clique sur le bouton de connexion ou sur le bouton d'achat. Une fenêtre modale permettant de se connecter à la version mobile du jeu à l'aide d'un code QR s'affiche.

2. L'utilisateur scanne le code QR à l'aide de son appareil mobile.
3. Le Web Shop s'ouvre sur l'appareil mobile de l'utilisateur.
4. L'utilisateur est automatiquement redirigé vers le jeu, puis automatiquement vers le Web Shop en tant qu'utilisateur autorisé.

Flux d'interaction des services

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Utilisateur
    participant WS as Web Shop
    participant B as Navigateur
    participant MOS as OS mobile
    participant G as Jeu
    participant LA as Login API
    U->>WS: Appuie sur le bouton pour se connecter via le jeu mobile
    activate WS
    WS->>B: Redirige l’utilisateur via un lien profond
    activate B
    B->>MOS: Effectue un appel système pour ouvrir un jeu mobile
    activate MOS
    MOS->>G: Ouvre le jeu mobile
    activate G
    G->>LA: Génère un jeton d’autorisation
    activate LA
    LA-->>G: Renvoie un jeton d’autorisation
    deactivate LA
    G->>MOS: Effectue un appel système pour ouvrir le navigateur avec le jeton dans l’URL
    deactivate G
    MOS-->>B: Ouvre le navigateur avec le jeton dans l’URL
    deactivate MOS
    B-->>WS: Ouvre la page du Web Shop pour les utilisateurs autorisés
    deactivate B
    WS-->>U: Affiche le nom d’utilisateur dans l’en-tête
    deactivate WS

Comment configurer

Côté jeu

1. Dans les paramètres de l’application mobile de votre jeu, enregistrez un schéma d’URL pour ouvrir le jeu via un lien profond :
   • dans les applications Android — dans le fichier AndroidManifest.xml ;
   • dans les applications iOS — dans le fichier Info.plist.

Après l'enregistrement du schéma, lorsque l'utilisateur s'authentifie dans le Web Shop via le jeu, le jeu s'ouvrira à l'adresse spécifiée.

Exemple de lien d'ouverture du jeu via un schéma d'URL enregistré :

scheme://authorize?operationPayload=<VALUE>, où :
• scheme — identifiant unique du jeu, utilisé dans un schéma d'URL personnalisé pour lancer l'application et accéder à l'action souhaitée.
• authorize — exemple de nom d'action à exécuter après l'ouverture du jeu. Utilisez le nom d'action correspondant à votre système d'exploitation.
• operationPayload=<VALUE> — paramètre contenant les informations nécessaires pour générer le jeton lors de l'authentification. La valeur est encodée en Base64 et générée par Xsolla.

Exemples :

• Enregistrement d'un schéma d'URL dans les applications iOS
• Enregistrement d'un schéma d'URL dans les applications Android

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</intent-filter>

2. Implémentez la génération d’un jeton d’autorisation au format JWT en utilisant l’ID utilisateur dans le jeu.

Exemple d'appel à la méthode API de génération de jeton utilisateur à l'aide de curl :

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'Accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "string",
 7 "settings": {
 8   "projectId": 0,
 9   "merchantId": 0
10 },
11 "user": {
12   "id": "string",
13   "country": "string",
14   "name": "string",
15   "picture": "string"
16 },
17 "operationPayload": "eyJ4c29sbGF1aWQiOiIzNzE5Nzc5NjU1MDE2Nzc2MzcifQ%3D%3D"
18}'

Vous obtiendrez une réponse de type {token="JWT_TOKEN"}.

3. Ajoutez une fenêtre contextuelle avec une notification d’autorisation réussie (facultatif).

4. Implémentez l’ouverture du Web Shop dans le navigateur à l’aide du jeton utilisateur obtenu.

Exemple de création d'une URL pour ouvrir le Web Shop dans le navigateur d'un utilisateur autorisé :
• https:​//example.com/?token={token}, si vous utilisez un domaine personnalisé ;
• https:​//example.xsolla.site/?token={token}, si vous utilisez un domaine Xsolla.

Où {token} est le jeton d'autorisation utilisateur.

Dans Site Builder

3. Accédez à Login Settings et sélectionnez la section Deep link.

4. Dans le champ Deeplink URL, entrez le lien pour l’authentification utilisateur.

5. Si vous utilisez le bloc Fast Login sur votre site :
   1. Accédez au bloc Fast Login ;
   2. Dans la section Block Settings, ajustez le style d’affichage du bouton de connexion par code QR.

6. Pour vérifier l’authentification, cliquez sur Preview.
7. Pour publier le site Web, cliquez sur Publish.

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 Fast Login.
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 ;
   • 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

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.

1{
2  "exp": 1573635020,
3  "iat": 1573634600,
4  "iss": "https://login.xsolla.com",
5  "request_type": "gateway_request",
6  "xsolla_login_project_id": "00000000-0000-0000-0000-000000000000"
7}

Flux utilisateur

1. L’utilisateur accède pour la première fois au Web Shop après avoir configuré l’authentification par ID utilisateur lié.
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 Fast Login.
3. Une fenêtre modale s’affiche avec les méthodes d’autorisation configurées dans Xsolla Login.
4. L’utilisateur procède à l’autorisation et saisit des données supplémentaires si nécessaire.

5. Après une autorisation réussie via Xsolla Login, la fenêtre modale permettant de lier l’ID utilisateur depuis le jeu s’affiche.

6. Le système vérifie l’existence de l’utilisateur. Si l’utilisateur avec l’ID spécifié existe dans le jeu, il est autorisé dans le 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.

4. Si votre site comporte plusieurs pages, sélectionnez celle qui vous intéresse :
   1. Appuyez sur le titre de la page actuelle en haut du constructeur.
   2. Sélectionnez la page souhaitée dans la liste déroulante.
5. Accédez au bloc Login settings.

6. Sélectionnez l’option Login with linked user ID.
7. Dans la liste déroulante, sélectionnez New Login ou l’un des projets créés.
8. Entrez l’URL pour la réception des webhooks.