Login

Login ist ein Tool zur Einmalanmeldung (Single Sign-on), dass Passwörter im Auftrag von Videospielentwicklern authentifiziert und sichert. Es ermöglicht eine einfache Nutzerregistrierung mit nur einem Klick mithilfe von mehr als 30 Authentifizierungs-Anbietern, die den Spielern praktische, sichere und schnelle Methoden zur Registrierung und Anmeldung bei all deren Lieblingsspielen bietet. Login verwendet API-Methoden und ermöglicht Partnern die folgenden Funktionen:

  • Verarbeitung personenbezogener Daten gemäß den Bestimmungen der DSGVO
  • Konfiguration der Lösung im Kundenportal
  • Auswahl des Nutzerdatenspeichers
  • Authentifizierung von Nutzern durch Benutzername/Passwort oder soziale Netzwerke
  • Anordnung sozialer Netzwerke gemäß deren Nutzungshäufigkeit und des Benutzerstandorts

Sie können Nutzer ebenfalls via Login-Widget authentifizieren. Das Widget unterstützt zudem folgende Funktionen:

  • Anpassung der Benutzeroberfläche
  • Übersetzung in 20 Sprachen
  • Automatische Verteilung von Widget-Updates
  • Einrichtung der Widget-Startseite

Note: Das Login-Widget wird empfohlen, wenn das Startprogramm zum Einsatz kommt. Falls Sie bereits Xsolla-Module verwenden und diese mit Login verknüpfen möchten, kontaktieren Sie Ihren Kontoverwalter.

Integrationsablauf

Es gibt zwei Arten, wie Login integriert werden kann:

  • Via API, wenn Sie Ihre eigene Schnittstelle im Spiel verwenden, um die Nutzer zu authentifizieren, oder
  • via Login-Widget, was sowohl über eine Benutzeroberfläche zur Nutzer-Authentifizierung als auch über Login API-Methoden verfügt.

Login via API integrieren

  1. Erstellen Sie eine Login-Instanz in Ihrem Kundenportal und geben Sie Folgendes an:
    • Name,
    • Link zur Spielewebsite, um mit Login zu verbinden.
  2. Gehen Sie zu Allgemeine Einstellungen und geben Sie Folgendes an:
    • Rückruf-URL, um den Nutzer nach einer erfolgreichen Authentifizierung weiterzuleiten,
    • Zugelassene Ursprünge (CORS), die die API-Methoden aufrufen werden,
    • Fehlerhafte Rückruf-URL, um den Nutzer bei einer fehlgeschlagenen Authentifizierung weiterzuleiten. Wenn Sie keinen Wert angeben, wird die Rückruf-URL verwendet.
  3. Wählen Sie eine Datensicherung aus (bei uns oder bei Ihnen).
  4. Wählen Sie die sozialen Netzwerke aus, über die sich die Nutzer einloggen können.

Login via Widget integrieren

  1. Erstellen Sie eine Login-Instanz in Ihrem Kundenportal und geben Sie Folgendes an:
    • Name,
    • Link zur Spielewebsite, um mit Login zu verbinden.
  2. Gehen Sie zu Allgemeine Einstellungen und geben Sie Folgendes an:
    • Rückruf-URL, um den Nutzer nach einer erfolgreichen Authentifizierung weiterzuleiten,
    • Fehlerhafte Rückruf-URL, um den Nutzer bei einer fehlgeschlagenen Authentifizierung weiterzuleiten. Wenn Sie keinen Wert angeben, wird die Rückruf-URL verwendet.
  3. Wählen Sie eine Datensicherung aus (bei uns oder bei Ihnen).
  4. Wählen Sie die sozialen Netzwerke aus, über die sich die Nutzer einloggen können.
  5. Passen Sie die Benutzeroberfläche des Login Widget an.
  6. Verbinden Sie das Login Widget mit Ihrer Website.

Anpassung der Benutzeroberfläche

  1. Laden Sie das Styles-Archivs aus Ihrem Kundeportal herunter und entpacken Sie es.
  2. Laden Sie die neueste LTS-Version von Node.js herunter und installieren Sie sie.
  3. Starten Sie npm i aus dem entpackten Styles-Ordner.
  4. Bearbeiten Sie app/styles/themes/_default.scss.
  5. Starten Sie npm run styles aus dem entpackten Styles-Ordner.
  6. Laden Sie die Datei mit dem Namen, der app.default.css ähnlich sieht, aus dem dist-Ordner in Ihr Kundenportal hoch.

Für weitere Anpassungen der Benutzeroberfläche, wiederholen Sie die Schritte 4–6.

Das Login-Widget mit Ihrer Website verbinden

Verwenden Sie das Xsolla-Login-Javascript-SDK, um das Login-Widget in Ihre Website einzubinden.

Schritt 1

Xsolla-Login-Javascript-SDK verbinden:

  • Falls Ihr Projekt Bower verwendet, müssen Sie die Konsole starten und bower install xsolla-login-js-sdk ausführen.
  • Wenn Sie das Paket nicht installiert haben, fügen Sie den folgenden Code zum <head> Tag der Website hinzu, wo Sie das Widget anzeigen möchten: <script src="https://cdn.xsolla.net/xsolla-login-widget/sdk/2.2.3/xl.min.js"></script>.

Schritt 2

Fügen Sie dem <body> Tag den Initialisierungs-Code des Widget hinzu.

<script type="text/javascript">
XL.init({
  projectId: '{Login ID}',
  callbackUrl: '{callbackUrl}',
  locale: 'en_US'
});
</script>

Parameter Typ Beschreibung
projectId string Login-ID aus dem Kundenportal. Erforderlich.
callbackUrl string URL, zu welcher der Benutzer nach der Registrierung/Authentifizierung/Passwortzurücksetzung weitergeleitet wird. Muss mit der Rückruf-URL übereinstimmen, die im Kundenportal in den Login-Einstellungen festgelegt ist. Erforderlich, falls mehrere Rückruf-URLs vorhanden sind.
locale string Gebietsschema nach folgendem Format: <language code>_<country code>, wobei: Die Liste der sozialen Netzwerke wird gemäß eines schwankenden Werts sortiert: vom am häufigsten genutzten zum am wenigsten genutzten sozialen Netzwerk.
fields array of strings Liste der Parameter, die für eine erfolgreiche Benutzerregistrierung/-authentifizierung erforderlich sind. Beispiel: "email, promo_email_agreement". Der Benutzer wird aufgefordert, diese Parameter in der entsprechenden Form anzugeben.
theme string URL mit den Widget-Styledateien. Falls kein Wert eingetragen ist, werden die im Kundenportal hochgeladenen Stile verwendet.
popupBackgroundColor string Widget-Hintergrundfarbe im Vollbild-Modus. Der Wert kann in einem beliebigen CSS-Farbformat angegeben werden. Standardmäßig ist rgba(50, 150, 150, 0.1) eingestellt.
iframeZIndex string Stapelfolge des Widgets im Vollbild-Modus. Standardmäßig: 1000000.

Schritt 3

Wählen Sie die Art und Weise, wie das Widget auf der Website platziert werden soll:

  • Vollbild-Modus
  • bestimmtes Feld auf der Seite.

VOLLBILD-MODUS

Fügen Sie die Schaltfläche samt On-Click-Event zu Ihrer Website hinzu und rufen Sie die XL.show()-Funktion auf.

<button onclick="XL.show()">Fullscreen widget</button>

Der Vollbild-Modus wird verlassen, sobald man auf einen Bereich außerhalb des Widgets klickt.

FELD AUF DER SEITE

Fügen Sie das Feld, in welches das Widget platziert werden soll, zum <body>-Tag dieser Website hinzu und legen Sie die Feld-ID fest.

<div id="xl_auth"></div>

Fügen Sie folgendes Script hinzu und legen Sie die Parameter wie nachfolgend erläutert fest.

<script type="text/javascript">
var element_id = 'xl_auth';
var options = {
  width: 400,
  height: 550,
  route: XL.ROUTES.REGISTRATION
};
XL.AuthWidget(element_id, options);
</script>

Parameter Typ Beschreibung
element_id string ID des Feldes mit dem Login-Widgets. Erforderlich.
options object Feldeinstellungen des Login-Widgets. Das Objekt besteht aus den nachfolgend aufgeführten Parametern.
width number Feldbreite in Pixel. Voreingestellt: 400.
height number Feldhöhe in Pixel. Voreingestellt: 550.
route string Widget-Startseite. Mögliche Optionen:
  • XL.ROUTES.LOGIN — eine Seite zum Anmelden mittels Benutzername/Passwort. Standardmäßig voreingestellt.
  • XL.ROUTES.REGISTRATION — eine Registrierungsseite.
  • XL.ROUTES.RECOVER_PASSWORD — eine Seite zum Zurücksetzen des Passworts.
  • XL.ROUTES.ALL_SOCIALS — eine Seite mit einer Liste der für die Benutzerauthentifizierung verfügbaren sozialen Netzwerke.

Schritt 4 (optional)

Das Tracken der Widget-Aktion ist möglich:

  • Widget geladen
  • Benutzer versucht das Widget zu schließen
  • Registrierungsbestätigung per E-Mail gesendet.

Initialisieren und verarbeiten Sie die Aktion wie nachfolgend beschrieben.

WIDGET GELADEN

XL.on(XL.eventTypes.LOAD, function () {
    console.log('the widget has been loaded');
});

BENUTZER VERSUCHT DAS WIDGET ZU SCHLIEẞEN

XL.on(XL.eventTypes.CLOSE, function () {
    console.log('user is trying to close the widget');
});

REGISTRIERUNGSBESTÄTIGUNG PER E-MAIL GESENDET

XL.on(XL.eventTypes.REGISTRATION_REQUEST, function () {
    console.log('registration form has been sent');
});

Verarbeitung personenbezogener Daten

Die Verarbeitung personenbezogener Daten von Nutzern aus der Europäischen Union (EU) erfolgt gemäß den Bestimmungen der DSGVO. Nachfolgend sind Bestimmungen der DSGVO und Möglichkeiten zur Einhaltung dieser Bestimmungen mithilfe von Login aufgelistet.

Gemäß der Artikel 6–8 der Verordnung müssen Sie:

  • die betroffene Person um Zustimmung zur Verarbeitung ihrer persönlichen Daten bitten,
  • der betroffenen Person das Recht gewähren, ihre Einwilligung jederzeit widerrufen zu können.

Im Login-Widget kommt ein Registrierungsformular zum Einsatz, um die Einwilligung des Benutzers in die Verarbeitung der personenbezogenen Daten einzuholen.

Wenn ein Benutzer seine Meinung ändert, können Sie die Verarbeitung der personenbezogenen Daten durch Senden einer Anfrage an support@xsolla.com stoppen.

Benutzerrechte

Gemäß der Artikel 15–17 und 19 der Verordnung hat der Benutzer das Recht:

  • eine Kopie seiner personenbezogenen Daten zu erhalten,
  • die Berichtigung der ihn betreffenden, unrichtigen personenbezogenen Daten zu verlangen,
  • die Löschung der ihn betreffenden personenbezogenen Daten zu verlangen.

So funktioniert das Abrufen, Korrigieren und Löschen von Nutzerdaten:

  • Senden Sie bei Verwendung des Xsolla-Speichers ein Anfrage an support@xsolla.com.
  • Lesen Sie dieses Tutorial bei Verwendung von PlayFab.
  • Wählen Sie eine eigene Methode bei Verwendung des kundenseitigen Speichers.

Verarbeitung und Speicherung personenbezogener Daten

Gemäß Artikel 5 der Verordnung müssen personenbezogene Daten:

  • für bestimmte Zwecke erhoben werden und dürfen nicht in einer Weise weiterverarbeitet werden, die mit diesen Zwecken unvereinbar ist;
  • in einer Weise verarbeitet werden, die eine angemessene Sicherheit der personenbezogenen Daten gewährleistet, einschließlich des Schutzes vor unbefugter oder unrechtmäßiger Verarbeitung und vor unbeabsichtigtem Verlust, unbeabsichtigter Zerstörung oder unbeabsichtigter Schädigung.

Login greift auf Daten zu, die sich auf die Sperrung, den E-Mail-Versand, die Zahlungsabwicklung und weitere Verwendungsmöglichkeiten für personenbezogene Daten des Benutzers auswirken können.

Die Speicherung und die Übermittlung personenbezogener Daten erfolgt verschlüsselt mittels AES-256-Algorithmus.

Datenübertragbarkeit

Gemäß Artikel 20 der Verordnung hat der Benutzer das Recht, seine personenbezogenen Daten zu übermitteln und zu speichern. Sie müssen dem Benutzer die Daten in einem strukturierten, gängigen und maschinenlesbaren Format zur Verfügung stellen.

So rufen Sie Nutzerdaten ab:

  • Navigieren Sie bei Verwendung des Xsolla-Speichers im Kundenportal zu Login-Einstellungen > Nutzer.
  • Lesen sie dieses Tutorial bei Verwendung von PlayFab.
  • Wählen Sie eine eigene Methode bei Verwendung des kundenseitigen Speichers.

Schutz der Benutzerdaten

Gemäß Artikel 32 der Verordnung müssen Sie ein zuverlässiges Maß an Datensicherheit durch Nutzung von Nachfolgendem gewährleisten:

  • Datenverschlüsselung,
  • Datenvertraulichkeit,
  • Datenintegrität,
  • robuste Datenverarbeitungssysteme.

Es stehen verschiedene Login-Funktionen bereit, die Sie bei der Erfüllung der Anforderung unterstützen:

  • Datenverschlüsselung entsprechend dem AES-256-Algorithmus,
  • Überprüfung der korrekten Eingabe des Passworts,
  • Überprüfung der Passwortsicherheit,
  • Datenzugriffsbeschränkung.

Anleitungen

Mit unseren Anleitungen können Sie einige der erweiterten Funktionen des Login ausprobieren: