Guide d'intégration

Options d'authentification

Stockage des données utilisateur

Sécurité

Customisation

Fournisseurs de services de communication

Fonctionnalités

Instructions

Extensions

Mentions légales

Références

Fichiers JSON contenant les paramètres du widget

Les paramètres du widget sont contenus dans les fichiers JSON suivants :

settingsJSON — paramètres principaux ;
socialsJSON — paramètres de connexion via les réseaux sociaux ;
themeJSON — paramètres du thème.

Vous pouvez réutiliser les paramètres dans les fichiers et afficher le même widget sur différents paramètres. L’URL des paramètres est spécifiée dans le code d’initialisation du widget :

Copy

Full screen

Small screen

<script>
const xl = new XsollaLogin.Widget({
  // Other settings
  settingsJSON: "url_string",
  socialsJSON: "url_string",
  themeJSON: "url_string"
});
</script>

Paramètres principaux

Les principaux paramètres du widget sont les suivants :

méthodes d’autorisation (objet authorization_methods) ;
champs d’enregistrement (objet registration_fields) ;
validation de l’adresse e-mail (objet email_validation) ;
paramètres supplémentaires.

Modèle du fichier settingsJSON :

Copy

Full screen

Small screen

{
  "authorization_methods": {
    // Authorization methods
  },
  "registration_fields": {
    // Registration fields
  },
  "email_validation": {
    // Settings for email validation
  }

  // Other widget settings
}

Méthodes d'autorisation

L’objet authorization_methods contient un tableau des méthodes d’autorisation disponibles. La page de connexion est affichée en fonction des paramètres passés.

Au moins une méthode doit être passée au tableau. Chaque méthode ne peut être représentée plus d’une fois dans un tableau.

Méthodes d’autorisation disponibles :

email — autorisation par adresse e-mail et mot de passe. Le paramètre est passé par défaut s’il n’y a pas d’objet authorization_methods avec une liste définie de méthodes.
social — connexion via les réseaux sociaux. Le paramètre est passé par défaut s’il n’y a pas d’objet authorization_methods avec une liste définie de méthodes.
username — autorisation par nom d’utilisateur et mot de passe.
phone — autorisation par numéro de téléphone et par code SMS.
passwordless-email-code — autorisation par adresse e-mail et code envoyé par e-mail.

Exemple :

Copy

Full screen

Small screen

{
  "authorization_methods": {
    ["email", "phone"]
  }

  // Other widget settings
}

Champs d'enregistrement

L’objet registration_fields contient un tableau de champs qui sont affichés sur la page d’enregistrement du widget.

Paramètre	Type	Description
email	email	Adresse e-mail utilisateur.
username	string	Compte utilisateur.
password	pass	Mot de passe.
password_confirm	pass	Confirmation du mot de passe.
given-name	string	Nom d’utilisateur.
family-name	string	Nom de famille de l’utilisateur.
nickname	string	Pseudo de l’utilisateur.
bday	date	Date de naissance.
gender	string	Genre.
country-name	select	Pays.
plateforme	multi-select	Plateforme.
promo_email_agreement	boolean	Consentement à recevoir du matériel promotionnel.

Le tableau doit contenir au moins un champ. Les champs sont affichés dans l’ordre dans lequel ils sont passés dans le tableau.

En outre, vous pouvez spécifier les paramètres suivants pour un champ :

required (boolean) — si le champ est obligatoire.
default_value (array) — tableau de valeurs par défaut (pour une liste de pays ou de plateformes).
validation (object) — paramètres de validation :
- allowed_characters (string) — caractères autorisés pour le champ. Séparés par une virgule dans la liste comme les valeurs de l’expression régulière ;
- max_length (number) — nombre maximal de caractères ;
- min_length (number) — nombre minimum de caractères ;
- regexps (array with strings) — expression régulière pour valider la valeur saisie.

Exemple :

Copy

Full screen

Small screen

{
  // Other widget settings

  "registration_fields": [
    {
      "name": "username",
      "required": false,
      "type": "str",
      "validation": {
        "allowed_characters": "A-Z, a-z, 0-9",
        "max_length": 16,
        "min_length": 5,
        "regexps": ["^.{5,16}$"]
      }
    },
    { "name": "email", "required": true, "type": "email", "validation": {} },
    { "name": "bday", "required": true, "type": "date", "validation": {} },
    {
      "name": "platform",
      "default_value": ["MacOS", "Nintendo Switch", "Steam"],
      "required": false,
      "type": "multi-select",
      "validation": {}
    },
    {
      "name": "country-name",
      "default_value": ["US", "GB", "DE"],
      "required": false,
      "type": "select",
      "validation": {}
    },
    { "name": "password", "required": true, "type": "pass", "validation": {} },
    {
      "name": "password_confirm",
      "required": false,
      "type": "pass",
      "validation": {}
    },
    {
      "name": "promo_email_agreement",
      "required": false,
      "type": "bool",
      "validation": {}
    }
  ]
}

Validation de l'adresse e-mail

L’objet email_validation contient le paramètre se_xsolla_email_validator qui valide les données saisies dans le champ email.

Paramètre	Type	Description
use_xsolla_email_validator	boolean	Détermine la validation supplémentaire des données saisies dans le champ `email`. Si `true`, l’adresse e-mail est validée côté front-end et back-end avec des fonctionnalités telles que SMTP, RFC et Greylist. Si `false`, l’adresse e-mail est validée côté front-end uniquement. La valeur par défaut est `false`.

Exemple :

Copy

Full screen

Small screen

{
  // Other widget settings

  "email_validation": {
    "use_xsolla_email_validator": true
  }
}

Paramètres supplémentaires

Les paramètres supplémentaires sont passés dans l’objet JSON racine du fichier settingsJSON.

Paramètre	Type	Description
can_register	boolean	Détermine l’activation de l’enregistrement utilisateur. La valeur par défaut est `true`.
can_reset_password	boolean	Détermine l’activation de la réinitialisation du mot de passe utilisateur. La valeur par défaut est `true`.
consent_url	string	Lien vers la politique de consentement utilisateur.
cookie_policy	string	Lien vers la politique en matière de cookies.
privacy_policy	string	Lien vers la politique de confidentialité.
tos_url	string	Lien vers les conditions d’utilisation.
game_name	string	Nom de projet ou de jeu. Affiché dans certaines méthodes d’autorisation.

Exemple :

Copy

Full screen

Small screen

{{
  // Other widget settings

  "can_register": true,
  "can_reset_password": true,
  "cookie_policy": "https://someurl.com"
}

Paramètres des réseaux sociaux

Pour la connexion via les réseaux sociaux, les paramètres suivants sont passés dans le fichier socialsJSON :

liste des régions ;
paramètres et types de réseaux sociaux pour chaque région.

Modèle du fichier socialsJSON :

Copy

Full screen

Small screen

{
  "1": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "2": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "3": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "4": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "5": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "6": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  }
}

Chaque région a un numéro :

1 — Europe ;
2 — Chine ;
3 — Corée du Nord et du Sud ;
4 — CEI ;
5 — Amérique du Nord et du Sud ;
6 — reste du monde.

Pour chaque région, le type de réseau social est défini. Il existe deux types de réseaux sociaux : les réseaux primaires (primary) et les réseaux secondaires (secondary). Les réseaux sociaux principaux sont affichés sous forme de gros boutons et sont plus visibles sur la page du widget, tandis que les réseaux sociaux secondaires sont présentés sous forme de petits boutons et sont moins visibles.

Chaque type de réseau social contient un tableau d’objets :

Paramètre	Type	Description
nom	string	Nom du réseau social. Options disponibles : `amazon`, `apple`, `baidu`, `battlenet`, `china_telecom`, `discord`, `email`, `epicgames`, `facebook`, `github`, `google`, `google-plus`, `instagram`, `kakao`, `linkedin`, `mailru`, `microsoft`, `msn`, `naver`, `ok`, `paradox`, `paypal`, `pinterest`, `qq`, `reddit`, `steam`, `slack`, `twitch`, `twitter`, `vimeo`, `vk`, `wechat`, `weibo`, `xbox`, `yahoo`, `yandex`, `youtube`.
jwt	string	Lien pour ouvrir un réseau social si l’autorisation JWT est utilisée.
oauth2	string	Lien pour ouvrir un réseau social si l’autorisation basée sur le protocole OAuth 2.0 est utilisée.

Chaque réseau social doit être représenté au moins une fois dans un tableau. Le tableau peut être vide.

Exemple :

Copy

Full screen

Small screen

{
  "1": {
    "primary": [{
      "name": "google",
      "jwt": "https://login.xsolla.com/api/social/google/login_redirect",
      "oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
    }],
    "secondary": [{
        "name": "facebook",
        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
      },
      {
        "name": "twitter",
        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
      }
    ]
  },
  "2": {
    "primary": [{
      "name": "wechat",
      "jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
      "oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
    }],
    "secondary": [{
        "name": "facebook",
        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
      },
      {
        "name": "twitter",
        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
      },
      {
        "name": "steam",
        "jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
      }
    ]
  }

  // More regions
}

Paramètres du thème

Les paramètres du thème des widgets comprennent :

paramètres de couleur et de taille du widget ;
paramètres d’arrondi (objet rounding) ;
paramètres d’arrière-plan du widget (objet background) ;
paramètres d’en-tête (objet header) ;
paramètres des onglets du widget (objet tabs) ;
paramètres d’affichage des réseaux sociaux (objets primary_socials et secondary_socials) ;
paramètres de la scène (objet scene).

Modèle du fichier themeJSON :

Copy

Full screen

Small screen

{
  // Color and size settings

  "header": {
    // Header settings
  },
  "background": {
    // Widget background settings
  },
  "rounding": {
    // Rounding settings
  },
  "tabs": {
    // Tab settings
  },
  "primary_socials": {
    // Display settings for the primary social networks
  },
  "secondary_socials": {
    // Display settings for the secondary social networks
  },
  "scene": {
    // Scene settings
  }
}

Couleur et taille du widget

La couleur et la taille du widget sont passées dans l’objet JSON racine du fichier themeJSON.

Paramètre	Type	Description
primary_color	string	Couleur primaire du widget (couleur des boutons et des bordures des champs de saisie actifs) au format RGB ou HEX. La valeur par défaut est `#0073F7`.
secondary_color	string	Couleur secondaire du widget (couleur des champs de saisie inactifs) au format RGB ou HEX. La valeur par défaut est `#DADADA`.
error_color	string	Couleur du texte d’erreur au format RGB ou HEX. La valeur par défaut est `#EB002F`.
text_color	string	Couleur du texte principal au format RGB ou HEX. La valeur par défaut est `#000000`.

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "primary_color": "#708090",
  "secondary_color": "#4682B4"
}

Arrondi

L’objet rounding contient des paramètres d’arrondi pour différents éléments du widget. La propriété s’applique simultanément aux quatre coins.

Paramètre	Type	Description
inputs	string	Arrondi en pixels pour les champs actifs. La valeur par défaut est `6px`.
buttons	string	Arrondi en pixels pour les boutons. La valeur par défaut est `100px`.
widget	string	Arrondi en pixels pour le widget. La valeur par défaut est `6px`.

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "rounding": {
    "inputs": "8px",
    "widget": "8px"

  }
}

Arrière-plan

L’objet background contient les paramètres d’arrière-plan du widget.

Paramètre	Type	Description
color	string	Couleur d’arrière-plan au format RGB ou HEX. La valeur par défaut est `#FFFFFF`.
image	object	Image d’arrière-plan. L’objet contient un lien vers l’image et les paramètres d’opacité. La valeur d’opacité par défaut est `1`.

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "background": {
    "color": "#708090",
    "image": {
      "url": "https://someurl.com",
      "opacity": "3"
    }
  }
}

En-tête

L’objet header contient les paramètres de l’en-tête du widget : la zone située au-dessus de tous les champs du widget.

Paramètre	Type	Description
image	object	Image d’arrière-plan de l’en-tête. L’objet contient un lien vers l’image, les paramètres d’opacité et la taille de l’image d’arrière-plan. La valeur d’opacité par défaut est `1`. Les valeurs disponibles pour la taille de l’image d’arrière-plan correspondent aux valeurs de la propriété CSS `background-size` (la valeur par défaut est `cover`).

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "header": {
    "image": {
      "url": "https://someurl.com",
      "opacity": "3",
      "size": "cover"
    }
  }
}

Onglets

L’objet tabs contient un paramètre hide. Ce paramètre gère l’affichage des onglets d’enregistrement ou d’autorisation sur le widget.

Paramètre	Type	Description
hide	boolean	Détermine si les onglets d’autorisation ou d’enregistrement doivent être masqués dans un widget. Utilisez la valeur `true` pour, par exemple, masquer temporairement l’onglet d’enregistrement ou afficher séparément les pages d’enregistrement et d’autorisation. La valeur par défaut est `false`.

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "tabs": {
    "hide": true
  }
}

Affichage des réseaux sociaux

Les objets primary_socials et secondary_socials contiennent le paramètre hide qui gère l’affichage des réseaux sociaux primaires et secondaires sur un widget.

Paramètre	Type	Description
hide	boolean	Détermine si les réseaux sociaux doivent être masqués. La valeur par défaut est `false`.

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "primary_socials": {
    "hide": true
  },
  "secondary_socials": {
    "hide": false
  }
}

Scène

L’objet scene contient les paramètres de la scène : la zone autour du widget.

Paramètre	Type	Description
color	string	Couleur d’arrière-plan au format RGB ou HEX. La valeur par défaut est `#FFFFFF`.
image	object	Image d’arrière-plan. L’objet contient un lien vers l’image, les paramètres d’opacité et la taille de l’image d’arrière-plan. Les valeurs disponibles pour la taille de l’image d’arrière-plan correspondent aux valeurs de la propriété CSS `background-size` (la valeur par défaut est `cover`).

Exemple :

Copy

Full screen

Small screen

{
  // Other theme settings

  "scene": {
    "color": "#708090",
    "image": {
      "url": "https://someurl.com",
      "size": "cover"
    }
  }
}

Merci pour votre commentaire !

Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.

Dernière mise à jour: 22 Janvier 2024

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

Contenu

Paramètres principaux
Méthodes d'autorisation
Champs d'enregistrement
Validation de l'adresse e-mail
Paramètres supplémentaires
Paramètres des réseaux sociaux
Paramètres du thème
Couleur et taille du widget
Arrondi
Arrière-plan
En-tête
Onglets
Affichage des réseaux sociaux
Scène

Your browser is not supported. Please try a different browser

Réponse basée sur les sources suivantes:

Laissez-nous un commentaire (facultatif)

Laissez-nous un commentaire (facultatif)

Login

Fichiers JSON contenant les paramètres du widget

Paramètres principaux

Méthodes d'autorisation

Champs d'enregistrement

email

username

password

password_confirm

given-name

family-name

nickname

bday

gender

country-name

plateforme

promo_email_agreement

Validation de l'adresse e-mail

use_xsolla_email_validator

Paramètres supplémentaires

can_register

can_reset_password

consent_url

cookie_policy

privacy_policy

tos_url

game_name

Paramètres des réseaux sociaux

nom

jwt

oauth2

Paramètres du thème

Couleur et taille du widget

primary_color

secondary_color

error_color

text_color

Arrondi

inputs

buttons

widget

Arrière-plan

color

image

En-tête

image

Onglets

hide

Affichage des réseaux sociaux

hide

Scène

color

image