JSON-Dateien mit Widget-Einstellungen

Die Widget-Einstellungen sind in den folgenden JSON-Dateien enthalten:

settingsJSON – Haupteinstellungen
socialsJSON – Einstellungen für die Anmeldung über soziale Netzwerke
themeJSON – 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

Full screen

Small screen

<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

Full screen

Small screen

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

  // Other widget settings
}

Autorisierungsmethoden

Das authorization_methods-Objekt enthält ein Array verfügbarer Autorisierungsmethoden. Die Anmeldeseite wird entsprechend den übermittelten Einstellungen angezeigt.

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 kein authorization_methods-Objekt mit einer konkreten Liste von Methoden vorhanden ist.
social – Anmeldung über soziales Netzwerk. Der Parameter wird standardmäßig übermittelt, sofern kein authorization_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

Full screen

Small screen

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

  // Other widget settings
}

Registrierungsfelder

Das registration_fields-Objekt enthält ein Array von Feldern, die auf der Registrierungsseite des Widgets angezeigt werden.

Parameter	Typ	Beschreibung
email	email	E-Mail-Adresse des Benutzers.
username	string	Benutzerkonto.
password	pass	Passwort.
password_confirm	pass	Passwortbestätigung.
given-name	string	Benutzername.
family-name	string	Familienname des Benutzers.
nickname	string	Nickname des Benutzers.
bday	date	Geburtsdatum.
gender	string	Geschlecht.
country-name	select	Land.
platform	multi-select	Plattform.
promo_email_agreement	boolean	Zustimmung für den Erhalt von Werbematerialien.

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

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": {}
    }
  ]
}

Validierung von E-Mail-Adressen

Das email_validation-Objekt enthält den se_xsolla_email_validator-Parameter, mit dem die in das email-Feld eingegebenen Daten validiert werden.

Parameter	Typ	Beschreibung
use_xsolla_email_validator	boolean	Legt fest, ob die in das `email`-Feld eingegebenen Daten zusätzlich validiert werden. Ist `true` festgelegt, wird eine E-Mail-Adresse aufseiten des Backend und Frontend mithilfe von Funktionen wie SMTP, RFC und Greylist validiert. Ist `false` festgelegt, wird die E-Mail-Adresse nur aufseiten des Frontend validiert. `false` ist voreingestellt.

Beispiel:

Copy

Full screen

Small screen

{
  // Other widget settings

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

Sonstige Einstellungen

Sonstige Einstellungen werden im JSON-Objektstammverzeichnis der settingsJSON-Datei übermittelt.

Parameter	Typ	Beschreibung
can_register	boolean	Legt fest, ob Benutzer sich registrieren dürfen. `true` ist voreingestellt.
can_reset_password	boolean	Legt fest, ob Benutzer Passwörter zurücksetzen dürfen. `true` ist voreingestellt.
consent_url	string	Link zur Benutzerrichtlinienzustimmung.
cookie_policy	string	Link zur Cookie-Richtlinie.
privacy_policy	string	Link zur Datenschutzerklärung.
tos_url	string	Link zu den Nutzungsbedingungen.
game_name	string	Name eines Projekts oder Spiels. Wird bei manchen Autorisierungsmethoden angezeigt.

Beispiel:

Copy

Full screen

Small screen

{{
  // 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

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
    ]
  }
}

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:

Parameter	Typ	Beschreibung
name	string	Name des sozialen Netzwerks. Mögliche Optionen: `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	Link für das Öffnen eines sozialen Netzwerks, wenn die JWT-Autorisierung verwendet wird.
oauth2	string	Link für das Öffnen eines sozialen Netzwerks, wenn die protokollbasierte OAuth 2.0-Autorisierung verwendet wird.

Jedes soziale Netzwerk sollte mindestens einmal in einem Array vertreten sein. Das Array darf leer sein.

Beispiel:

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
}

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- und secondary_socials-Objekt)
Szeneneinstellungen (scene-Objekt)

Vorlage der themeJSON-Datei:

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
  }
}

Widget-Farbe und ‑Größe

Die Farbe und Größe des Widgets werden im JSON-Objektstammverzeichnis der themeJSON-Datei übermittelt.

Parameter	Typ	Beschreibung
primary_color	string	Primäre Widget-Farbe (Farbe der Schaltflächen und der Umrandung von aktiven Eingabefeldern) im RGB- oder HEX-Format. Standardwert: `#0073F7`.
secondary_color	string	Sekundäre Widget-Farbe (Farbe der inaktiven Eingabefelder) im RGB- oder HEX-Format. Standardwert: `#DADADA`.
error_color	string	Farbe der Fehlertexte im RGB- oder HEX-Format. Standardwert: `#EB002F`.
text_color	string	Farbe des Haupttexts im RGB- oder HEX-Format. Standardwert: `#000000`.

Beispiel:

Copy

Full screen

Small screen

{
  // 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.

Parameter	Typ	Beschreibung
inputs	string	Eckenrundung in Pixel für Felder. Standardwert: `6px`.
buttons	string	Eckenrundung in Pixel für Schaltflächen. Standardwert: `100px`.
widget	string	Eckenrundung in Pixel für das Widget. Standardwert: `6px`.

Beispiel:

Copy

Full screen

Small screen

{
  // Other theme settings

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

  }
}

Hintergrund

Das background-Objekt enthält die Parameter für den Widget-Hintergrund.

Parameter	Typ	Beschreibung
color	string	Hintergrundfarbe im RGB- oder HEX-Format. Standardwert: `#FFFFFF`.
image	object	Hintergrundbild. Das Objekt enthält einen Link zum Bild und die Deckkrafteinstellungen. Standardwert für die Deckkraft: `1`.

Beispiel:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Header

Das header-Objekt enthält die Parameter des Widget-Headers: ein Bereich oberhalb aller Widget-Felder.

Parameter	Typ	Beschreibung
image	object	Header-Hintergrundbild. Das Objekt enthält einen Link zu dem Bild, die Deckkrafteinstellungen und die Größe des Hintergrundbildes. Standardwert für die Deckkraft: `1`. Die möglichen Werte für die Größe des Hintergrundbilds entsprechen den Werten der CSS-Eigenschaft `background-size` (`cover` ist voreingestellt).

Beispiel:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Registerkarten

Das tabs-Objekt enthält einen hide-Parameter. Dieser Parameter steuert die Anzeige der Registrierungs- oder Autorisierungsregisterkarte im Widget.

Parameter	Typ	Beschreibung
hide	boolean	Legt fest, ob die Registrierungs- oder Autorisierungsregisterkarte ausgeblendet ist. Legen Sie `true` fest, um z. B. die Registerkarte “Registrierung” vorübergehend auszublenden oder die Seiten für Registrierung und Autorisierung getrennt anzuzeigen. Standardwert: `false`.

Beispiel:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Anzeige sozialer Netzwerke

Das primary_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`.

Beispiel:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Szene

Das scene-Objekt enthält Parameter für die Szene: einen Bereich rund um das Widget.

Parameter	Typ	Beschreibung
color	string	Hintergrundfarbe im RGB- oder HEX-Format. Standardwert: `#FFFFFF`.
image	object	Hintergrundbild. Das Objekt enthält einen Link zu dem Bild, die Deckkrafteinstellungen und die Größe des Hintergrundbildes. Die möglichen Werte für die Größe des Hintergrundbilds entsprechen den Werten der CSS-Eigenschaft `background-size` (`cover` ist voreingestellt).

Beispiel:

Copy

Full screen

Small screen

{
  // Other theme settings

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

Vielen Dank für Ihr Feedback!

Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.

Letztmalig aktualisiert: 22. Januar 2024

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Your browser is not supported. Please try a different browser

Die Antwort basiert auf den folgenden Quellen:

Geben Sie uns Feedback (optional)

Geben Sie uns Feedback (optional)

Login

JSON-Dateien mit Widget-Einstellungen

Haupteinstellungen

Autorisierungsmethoden

Registrierungsfelder

email

username

password

password_confirm

given-name

family-name

nickname

bday

gender

country-name

platform

promo_email_agreement

Validierung von E-Mail-Adressen

use_xsolla_email_validator

Sonstige Einstellungen

can_register

can_reset_password

consent_url

cookie_policy

privacy_policy

tos_url

game_name

Einstellungen für soziale Netzwerke

name

jwt

oauth2

Theme-Einstellungen

Widget-Farbe und ‑Größe

primary_color

secondary_color

error_color

text_color

Eckenrundung

inputs

buttons

widget

Hintergrund

color

image

Header

image

Registerkarten

hide

Anzeige sozialer Netzwerke

hide

Szene

color

image