JSON-Dateien mit Widget-Einstellungen
Die Widget-Einstellungen sind in den folgenden JSON-Dateien enthalten:
settingsJSON– HaupteinstellungensocialsJSON– Einstellungen für die Anmeldung über soziale NetzwerkethemeJSON– Theme-Einstellungen
Sie können die Einstellungen in den Dateien wiederverwenden und dasselbe Widget mit verschiedenen Einstellungen anzeigen. Die Einstellungs-URL wird im Initialisierungscode des Widgets angegeben:
Copy
- json
<script>
const xl = new XsollaLogin.Widget({
// Other settings
settingsJSON: "url_string",
socialsJSON: "url_string",
themeJSON: "url_string"
});
</script>
Haupteinstellungen
Die Haupteinstellungen für das Widget sind:
- Autorisierungsmethoden (
authorization_methods-Objekt) - Registrierungsfelder (
registration_fields-Objekt) - Validierung von E-Mail-Adressen (
email_validation-Objekt) - Sonstige Einstellungen
Vorlage der settingsJSON-Datei:
Copy
- json
{
"authorization_methods": {
// Authorization methods
},
"registration_fields": {
// Registration fields
},
"email_validation": {
// Settings for email validation
}
// Other widget settings
}
Autorisierungsmethoden
Dasauthorization_methods-Objekt enthält ein Array verfügbarer Autorisierungsmethoden. Die Anmeldeseite wird entsprechend den übermittelten Einstellungen angezeigt.Hinweis
Mindestens eine Methode sollte an das Array übermittelt werden. Jede Methode kann nur einmal in einem Array vertreten sein.
Verfügbare Autorisierungsmethoden:
email– Autorisierung per E-Mail-Adresse und Passwort. Der Parameter wird standardmäßig übermittelt, sofern keinauthorization_methods-Objekt mit einer konkreten Liste von Methoden vorhanden ist.social– Anmeldung über soziales Netzwerk. Der Parameter wird standardmäßig übermittelt, sofern keinauthorization_methods-Objekt mit einer konkreten Liste von Methoden vorhanden ist.username– Autorisierung per Benutzername und Passwort.phone– Autorisierung per Telefonnummer und SMS-Code.passwordless-email-code– Autorisierung per E-Mail-Adresse und Code, letzterer wird per E-Mail versandt.
Beispiel:
Copy
- json
{
"authorization_methods": {
["email", "phone"]
}
// Other widget settings
}
Registrierungsfelder
Dasregistration_fields-Objekt enthält ein Array von Feldern, die auf der Registrierungsseite des Widgets angezeigt werden.Hinweis
Das Array muss mindestens ein Feld enthalten. Die Felder werden in der Reihenfolge angezeigt, in der sie an das Array übermittelt werden.
Zusätzlich können Sie die folgenden Parameter für ein Feld angeben:
required(boolean) – Ob es sich um ein Pflichtfeld handelt.default_value(array) – Ein Array von Standardwerten (für eine Liste von Ländern oder Plattformen).validation(object) – Validierungsparameter:allowed_characters(string) – Zulässige Zeichen für das Feld. Getrennt durch ein Komma in der Liste wie die regulären Ausdruckswerte.max_length(number) – Maximale Anzahl der Zeichen.min_length(number) – Minimale Anzahl der Zeichen.regexps(array with strings) – Regulärer Ausdruck zur Validierung des eingegebenen Werts.
Beispiel:
Copy
- json
{
// 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": {}
}
]
}
Validierung von E-Mail-Adressen
Dasemail_validation-Objekt enthält den se_xsolla_email_validator-Parameter, mit dem die in das email-Feld eingegebenen Daten validiert werden.Beispiel:
Copy
- json
{
// Other widget settings
"email_validation": {
"use_xsolla_email_validator": true
}
}
Sonstige Einstellungen
Sonstige Einstellungen werden im JSON-Objektstammverzeichnis dersettingsJSON-Datei übermittelt.Beispiel:
Copy
- json
{{
// Other widget settings
"can_register": true,
"can_reset_password": true,
"cookie_policy": "https://someurl.com"
}
Einstellungen für soziale Netzwerke
Für die Anmeldung über ein soziales Netzwerk werden die folgenden Parameter in der socialsJSON-Datei übermittelt:
- Liste der Regionen
- Parameter und Typen von sozialen Netzwerken für jede Region
Vorlage der socialsJSON-Datei:
Copy
- json
{
"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
]
}
}
Jeder Region ist eine Zahl zugewiesen:
- 1 – Europa
- 2 – China
- 3 – Nord- und Südkorea
- 4 – GUS
- 5 – Nord- und Südamerika
- 6 – restliche Welt
Der Typ eines sozialen Netzwerks ist für jede Region definiert. Es gibt 2 Typen von sozialen Netzwerken: primäre (primary) und sekundäre (secondary). Die primären sozialen Netzwerke werden als große Schaltfläche angezeigt und sind so auf der Widget-Seite besser erkennbar. Die sekundären sozialen Netzwerke werden als kleine Schaltflächen angezeigt und sind weniger auffällig.
Jeder Typ eines sozialen Netzwerks enthält ein Array von Objekten:
Hinweis
Jedes soziale Netzwerk sollte mindestens einmal in einem Array vertreten sein. Das Array darf leer sein.
Copy
- json
{
"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
}
Theme-Einstellungen
Die Widget-Theme-Einstellungen umfassen Folgendes:
- Einstellungen für die Widget-Farbe und ‑Größe
- Einstellungen für Eckenrundung (
rounding-Objekt) - Einstellungen für den Widget-Hintergrund (
background-Objekt) - Header-Einstellungen (
header-Objekt) - Einstellungen für die Widget-Registerkarten (
tabs-Objekt) - Einstellungen für die Anzeige sozialer Netzwerke (
primary_socials- undsecondary_socials-Objekt) - Szeneneinstellungen (
scene-Objekt)
Vorlage der themeJSON-Datei:
Copy
- json
{
// 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
}
}
Widget-Farbe und ‑Größe
Die Farbe und Größe des Widgets werden im JSON-Objektstammverzeichnis derthemeJSON-Datei übermittelt.Beispiel:
Copy
- json
{
// Other theme settings
"primary_color": "#708090",
"secondary_color": "#4682B4"
}
Eckenrundung
Das rounding-Objekt enthält Parameter für die Eckenrundung der verschiedenen Widget-Elemente. Die Eigenschaft bezieht sich auf alle vier Ecken gleichzeitig.
Beispiel:
Copy
- json
{
// Other theme settings
"rounding": {
"inputs": "8px",
"widget": "8px"
}
}
Hintergrund
Dasbackground-Objekt enthält die Parameter für den Widget-Hintergrund.Beispiel:
Copy
- json
{
// Other theme settings
"background": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"opacity": "3"
}
}
}
Header
Dasheader-Objekt enthält die Parameter des Widget-Headers: ein Bereich oberhalb aller Widget-Felder.Beispiel:
Copy
- json
{
// Other theme settings
"header": {
"image": {
"url": "https://someurl.com",
"opacity": "3",
"size": "cover"
}
}
}
Registerkarten
Dastabs-Objekt enthält einen hide-Parameter. Dieser Parameter steuert die Anzeige der Registrierungs- oder Autorisierungsregisterkarte im Widget.Beispiel:
Copy
- json
{
// Other theme settings
"tabs": {
"hide": true
}
}
Anzeige sozialer Netzwerke
Dasprimary_socials- und das secondary_socials-Objekt enthalten den hide-Parameter, der die Anzeige der primären und sekundären sozialen Netzwerke im Widget steuert.| Parameter | Typ | Beschreibung |
|---|---|---|
hide | boolean | Legt fest, ob das soziale Netzwerk ausgeblendet ist. Standardwert: false. |
Copy
- json
{
// Other theme settings
"primary_socials": {
"hide": true
},
"secondary_socials": {
"hide": false
}
}
Szene
Dasscene-Objekt enthält Parameter für die Szene: einen Bereich rund um das Widget.Beispiel:
Copy
- json
{
// Other theme settings
"scene": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"size": "cover"
}
}
}
War dieser Artikel hilfreich?
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
