JSON-Dateien mit Widget-Einstellungen

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

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:

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.

Note
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.

ParameterTypBeschreibung
email
emailE-Mail-Adresse des Benutzers.
username
stringBenutzerkonto.
password
passPasswort.
password_confirm
passPasswortbestätigung.
given-name
stringBenutzername.
family-name
stringFamilienname des Benutzers.
nickname
stringNickname des Benutzers.
bday
dateGeburtsdatum.
gender
stringGeschlecht.
country-name
selectLand.
platform
multi-selectPlattform.
promo_email_agreement
booleanZustimmung für den Erhalt von Werbematerialien.
Note
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.

ParameterTypBeschreibung
use_xsolla_email_validator
booleanLegt 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.

ParameterTypBeschreibung
can_register
booleanLegt fest, ob Benutzer sich registrieren dürfen. true ist voreingestellt.
can_reset_password
booleanLegt fest, ob Benutzer Passwörter zurücksetzen dürfen. true ist voreingestellt.
stringLink zur Benutzerrichtlinienzustimmung.
stringLink zur Cookie-Richtlinie.
privacy_policy
stringLink zur Datenschutzerklärung.
tos_url
stringLink zu den Nutzungsbedingungen.
game_name
stringName 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:

ParameterTypBeschreibung
name
stringName 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
stringLink für das Öffnen eines sozialen Netzwerks, wenn die JWT-Autorisierung verwendet wird.
oauth2
stringLink für das Öffnen eines sozialen Netzwerks, wenn die protokollbasierte OAuth 2.0-Autorisierung verwendet wird.
Note
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:

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.

ParameterTypBeschreibung
primary_color
stringPrimäre Widget-Farbe (Farbe der Schaltflächen und der Umrandung von aktiven Eingabefeldern) im RGB- oder HEX-Format. Standardwert: #0073F7.
secondary_color
stringSekundäre Widget-Farbe (Farbe der inaktiven Eingabefelder) im RGB- oder HEX-Format. Standardwert: #DADADA.
error_color
stringFarbe der Fehlertexte im RGB- oder HEX-Format. Standardwert: #EB002F.
text_color
stringFarbe 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.

ParameterTypBeschreibung
inputs
stringEckenrundung in Pixel für Felder. Standardwert: 6px.
buttons
stringEckenrundung in Pixel für Schaltflächen. Standardwert: 100px.
widget
stringEckenrundung 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.

ParameterTypBeschreibung
color
stringHintergrundfarbe im RGB- oder HEX-Format. Standardwert: #FFFFFF.
image
objectHintergrundbild. 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.

ParameterTypBeschreibung
image
objectHeader-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.

ParameterTypBeschreibung
hide
booleanLegt 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.

ParameterTypBeschreibung
hide
booleanLegt 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.

ParameterTypBeschreibung
color
stringHintergrundfarbe im RGB- oder HEX-Format. Standardwert: #FFFFFF.
image
objectHintergrundbild. 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"
    }
  }
}

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!
Letztmalig aktualisiert: 22. April 2022

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

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!