Überblick

Zahlungstoken clientseitig generieren

Zahlungstoken serverseitig generieren

Testen

Katalog konfigurieren

Personalisierung

Werbeaktionen

Zahlungsportal verwalten

Anti-fraud

Nutzer in Ihrer Anwendung authentifizieren

Um die Sicherheit und den korrekten Ablauf von Zahlungstransaktionen zu gewährleisten, verwendet die Xsolla-API den während der Autorisierung gegenüber Xsolla Login erhaltenen JSON-Web-Token (JWT) des Nutzers.

Im Folgenden finden Sie eine Integrationsanleitung für Xsolla Login – am schnellsten geht es, wenn Sie ein vorgefertigtes Web-Widget in die Anwendung integrieren.

Wenn Sie Ihre eigene Benutzeroberfläche für die Anmeldung verwenden möchten, sollten Sie die Benutzerauthentifizierungslogik mithilfe der Login API oder des SDK implementieren.

Wählen Sie das am besten geeignete SDK für Ihr Projekt:

Allgemeine Anleitungen dazu, wie Sie das Widget importieren und damit arbeiten, finden Sie in der README-Datei.

Verwenden Sie Test-Webanwendungen als Beispiel für die Implementierung:

Xsolla-Login-Widget-SDK einbinden

Das Xsolla-Login-Widget kann mithilfe des Paket-Managers NPM oder dem Tag <script> auf einer HTML-Seite installiert werden.

Binden Sie das Xsolla-Login-Widget-SDK auf einen der folgenden Wege ein:

Starten Sie die Konsole und führen Sie den folgenden Befehl aus:

Copy

Full screen

Small screen

npm i @xsolla/login-sdk

Ergänzen Sie den folgenden Code im Tag <head> auf der HTML-Seite, auf der das Widget platziert werden soll:

Copy

Full screen

Small screen

<script src="https://login-sdk.xsolla.com/latest/">
</script>

Xsolla-Login-Widget-SDK initialisieren

Initialisieren Sie das Widget mit einer der unten aufgeführten Methoden. Legen Sie die folgenden Parameter fest:

projectId – Login-Projekt-ID. Diese finden Sie im Kundenportal unter Login > Dashboard.
preferredLocale – Sprache der Benutzeroberfläche. Folgende Sprachen werden unterstützt: Arabisch (ar_AE), Bulgarisch (bg_BG), Tschechisch (cz_CZ), Englisch (en_US), Deutsch (de_DE), Spanisch (es_ES), Französisch (fr_FR), Hebräisch (he_IL), Italienisch (it_IT), Japanisch (ja_JP), Koreanisch (ko_KR), Polnisch (pl_PL), Portugiesisch (pt_BR), Rumänisch (ro_RO), Russisch (ru_RU), Thai (th_TH), Türkisch (tr_TR), Vietnamesisch (vi_VN), Vereinfachtes Chinesisch (zh_CN), Traditionelles Chinesisch (zh_TW).
clientId – ID des OAuth 2.0-Clients. Diese finden Sie im Kundenportal unter Login > Ihr Login-Projekt > Sicherheit > OAuth 2.0.
redirectUri – Die URL, zu der der Nutzer weitergeleitet wird, nachdem er sein Konto bestätigt, sich angemeldet oder das Passwort zurückgesetzt hat. Muss im Kundenportal in den Einstellungen für den OAuth 2.0-Client festgelegt sein.

Lassen Sie die übrigen Parameter unverändert.

Fügen Sie der JS-Datei den Initialisierungscode hinzu:

Copy

Full screen

Small screen

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

Fügen Sie dem <body>-Tag den Widget-Initialisierungscode hinzu:

Copy

Full screen

Small screen

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

Aufruf des Xsolla-Login-Widgets hinzufügen

Platzieren Sie auf der HTML-Seite eine Schaltfläche mit dem Ereignis on-click und der Funktion xl.open():

Copy

Full screen

Small screen

<div id="xl_auth" style="display: none"></div>
<button onclick="showFullscreen()">Fullscreen widget</button>

Fügen Sie den Code für den Widget-Aufruf in den Block <div> Ihrer HTML-Seite ein.

Fügen Sie der JS-Datei den folgenden Code hinzu:

Copy

Full screen

Small screen

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

Fügen Sie dem <body>-Tag den Code für den Widget-Aufruf hinzu:

Copy

Full screen

Small screen

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

Allgemeine Anleitungen zur Installation und Verwendung des SDK finden Sie in der Dokumentation des SDK für Unity (PC, Web).

Pakete aus einem Archiv importieren

Laden Sie die neueste SDK-Version herunter (empfohlen), oder wählen Sie die gewünschte SDK-Version auf GitHub aus und laden Sie diese herunter.
Entpacken Sie das Archiv.
Öffnen Sie Ihr Unity-Projekt oder erstellen Sie ein neues.
Navigieren Sie im Hauptmenü des Unity-Editors zu Assets > Import Package > Custom Package, und wählen Sie das SDK aus.

Compiler einrichten

Wir empfehlen Ihnen, den Mono-Compiler für Desktop-Plattformen zu verwenden, da dieser mit dem bereitgestellten Ingame-Browser kompatibel ist. Wenn Sie andere Browser-Lösungen nutzen, können Sie stattdessen den IL2CPP-Compiler verwenden.

Vergewissern Sie sich, dass zum Erstellen einer Spiel-Build der Mono-Compiler zum Einsatz kommt (nur bei eigenständigen Builds erforderlich):

Klicken Sie im Hauptmenü auf Edit > Project Settings.
Navigieren Sie zu Player > Other Settings > Configuration.
Stellen Sie sicher, dass Mono im Feld Scripting Backend ausgewählt ist.

SDK einrichten

Öffnen Sie Ihr Unity-Projekt.
Navigieren Sie im Hauptmenü zu Window > Xsolla > Edit Settings.
Legen Sie die Hauptprojektparameter im Inspector-Anzeigebereich auf einen der folgenden Wege fest:

1. Importieren Sie die Einstellungen aus dem Kundenportal:
  1. Klicken Sie auf Fill settings by PA.
  2. Geben Sie die Kundenportal-Autorisierungsdaten in die Felder Login und Password ein.
  3. Klicken Sie auf Log In.
  4. Füllen Sie die Felder im Abschnitt Publisher Account aus.

1. 1. Klicken Sie auf Apply Settings.

Wenn Sie sich mithilfe eines sozialen Netzwerks im Kundenportal registrieren, müssen Sie auf eine der folgenden Arten ein Passwort vergeben, um die Einstellungen aus dem Kundenportal importieren zu können:

Klicken Sie auf der Registrierungs-/Anmeldeseite des Kundenportals auf Haben Sie Ihr Passwort vergessen?, und befolgen Sie die Anweisungen.
Vergeben Sie ein neues Passwort im Kundenportal unter Profileinstellungen > Passwortänderung (geben Sie im Feld Aktuelles Passwort einen beliebigen Wert ein).

1. Legen Sie die Parameter manuell fest:
  1. Geben Sie im Feld Project ID die Projekt-ID an. Diese wird im Kundenportal neben dem Namen Ihres Projekts angezeigt.
  2. Geben Sie im Feld Login ID die ID des Login-Projekts an. Diese finden Sie im Kundenportal, navigieren Sie dazu zu Login > Dashboard > Ihr Login-Projekt, und klicken Sie neben dem Namen des Login-Projekts auf ID kopieren.
  3. Geben Sie im Feld Callback URL die URL oder den Pfad an, zu der/dem die Benutzer nach erfolgreicher Authentifizierung, Bestätigung der E-Mail-Adresse oder Zurücksetzen des Passworts weitergeleitet werden. Dieser Wert muss mit dem im Kundenportal unter Login > Ihr Login-Projekt > Sicherheit > OAuth 2.0 angegebenen Wert übereinstimmen.

1. 1. Geben Sie im Feld OAuth Client ID die Client-ID für OAuth 2.0 an. Diese finden Sie im Kundenportal unter Login > Ihr Login-Projekt > Sicherheit > OAuth 2.0.

Nehmen Sie bei Bedarf weitere Einstellungen vor (z. B. Anzeigeoptionen für das Zahlungsportal im Abschnitt Pay Station UI).

Aufruf des Xsolla-Login-Widgets hinzufügen

Um das Widget zu öffnen, müssen Sie die SDK-Methode XsollaAuth.AuthWithXsollaWidget aufrufen und die folgenden Parameter übermitteln:

onSuccess – der Rückruf bei erfolgreicher Benutzerauthentifizierung.
onError – der Rückruf bei Anfragefehlern.
onCancel – der Rückruf bei Abbruch der Benutzerauthentifizierung. Wird ausgelöst, wenn der Nutzer das Widget schließt, ohne den Authentifizierungsvorgang abzuschließen.
locale – Sprache der Benutzeroberfläche (optional). Folgende Sprachen werden unterstützt: Arabisch (ar_AE), Bulgarisch (bg_BG), Tschechisch (cz_CZ), Englisch (en_US), Deutsch (de_DE), Spanisch (es_ES), Französisch (fr_FR), Hebräisch (he_IL), Italienisch (it_IT), Japanisch (ja_JP), Koreanisch (ko_KR), Polnisch (pl_PL), Portugiesisch (pt_BR), Rumänisch (ro_RO), Russisch (ru_RU), Thai (th_TH), Türkisch (tr_TR), Vietnamesisch (vi_VN), Vereinfachtes Chinesisch (zh_CN), Traditionelles Chinesisch (zh_TW).

Bei eigenständigen Builds wird das Widget wird im integrierten Browser geöffnet, der im SDK enthalten ist. Sie können auch eine andere integrierte Browser-Lösung verwenden, sofern sich damit URL-Änderungen tracken lassen.

Allgemeine Anleitungen zur Installation und Verwendung des SDK finden Sie in der Dokumentation des SDK für Unreal Engine auf Unternehmensebene.

SDK installieren

Laden Sie den Epic Games Launcher herunter.
Erstellen Sie ein neues Unreal Engine-Projekt.

SDK herunterladen und installieren:
1. So laden Sie das SDK vom Unreal Engine Marketplace herunter und installieren es:
  1. Wechseln Sie zur SDK-Seite auf dem Unreal Engine Marketplace.
  2. Klicken Sie auf Open in Launcher.

1. 1. Wechseln Sie zum Epic Games Launcher.

1. 1. Klicken Sie auf Install to Engine.
  2. Öffnen Sie Ihr Unreal Engine-Projekt in Unreal Editor.
  3. Navigieren Sie zu Settings > Plugins > Installed > Xsolla SDK. Aktivieren Sie das Kontrollkästchen Enabled, und klicken Sie auf Restart Now, um die Einstellungen zu speichern und Unreal Editor neu zu starten.

1. So laden Sie das SDK von GitHub herunter und installieren es:
  1. Laden Sie das Archiv mit dem SDK für Ihre Engine-Version herunter.
  2. Entpacken Sie das Archiv.
  3. Verschieben Sie den SDK-Ordner in das Verzeichnis plugins im Stammverzeichnis Ihres Unreal Engine-Projekts.

SDK einrichten

Öffnen Sie Ihr Unreal Engine-Projekt im Unreal Editor.
Navigieren Sie zu Settings > Project Settings > Plugins > Xsolla Settings > General, und legen Sie die Projektparameter fest:

1. Geben Sie im Feld Project ID die Projekt-ID an. Diese wird im Kundenportal neben dem Namen Ihres Projekts angezeigt.
2. Geben Sie im Feld Login ID die ID des Login-Projekts an. Diese finden Sie im Kundenportal, navigieren Sie dazu zu Login > Dashboard > Ihr Login-Projekt, und klicken Sie neben dem Namen des Login-Projekts auf ID kopieren.
3. Geben Sie im Feld Client ID die Client-ID für OAuth 2.0 an. Diese finden Sie im Kundenportal, navigieren Sie dazu zu Login > Ihr Login-Projekt > Sicherheit > OAuth 2.0.
4. Geben Sie im Feld Redirect URI die URL oder den Pfad in der Anwendung an, zu der/dem die Benutzer nach erfolgreicher Authentifizierung, Bestätigung der E-Mail-Adresse oder Zurücksetzen des Passworts weitergeleitet werden. Dieser Wert muss mit dem im Kundenportal unter Login > Ihr Login-Projekt > Sicherheit > OAuth 2.0 angegebenen Wert übereinstimmen.
5. Nehmen Sie bei Bedarf weitere Einstellungen vor (z. B. Anzeigeoptionen für das Zahlungsportal im Abschnitt Pay Station UI).

Daraufhin wird Ihr Projekt im Kundenportal mit den Demo-Maps verknüpft.

Navigieren Sie zu Content Browser > View Options, und aktivieren Sie die Kontrollkästchen Show Engine Content und Show Plugin Content.

Aufruf des Xsolla-Login-Widgets hinzufügen

Rufen Sie die SDK-Methode AuthWithXsollaWidget auf, und übermitteln Sie die folgenden Parameter:

WorldContextObject – das Weltkontext-Objekt (für C++-Aufrufe).
SuccessCallback – der Rückruf bei erfolgreicher Benutzerauthentifizierung und erfolgreichem Tokenerhalt (optional).
CancelCallback – der Rückruf bei Abbruch der Benutzerauthentifizierung. Wird ausgelöst, wenn der Nutzer das Widget schließt, ohne den Authentifizierungsvorgang abzuschließen.
ErrorCallback – der Rückruf bei Fehlern, die während des Authentifizierungsvorgangs auftreten (optional).
bRememberMe – ob es notwendig ist, die Authentifizierungsdaten zu speichern (optional). Standardmäßig ist false festgelegt.
Locale – Sprache der Benutzeroberfläche (optional). Wird standardmäßig anhand der IP-Adresse des Nutzers ermittelt.
State – Ein String, der dazu dient, den Nutzer auf dem Anwendungsserver zusätzlich zu verifizieren. Der Standardwert ist festgelegt auf xsollatest.

Beispiel:

Bei eigenständigen Builds wird das Widget über den im SDK enthaltenen Blueprint W_LoginBrowser geöffnet.

Sie können festlegen, wie das Authentifizierungs-Widget geöffnet werden soll, indem Sie den Blueprint entsprechend anpassen.

Vielen Dank für Ihr Feedback!

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

Letztmalig aktualisiert: 20. Dezember 2024

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

Inhaltsverzeichnis

Xsolla-Login-Widget-SDK einbinden
Xsolla-Login-Widget-SDK initialisieren
Aufruf des Xsolla-Login-Widgets hinzufügen
Pakete aus einem Archiv importieren
Compiler einrichten
SDK einrichten
Aufruf des Xsolla-Login-Widgets hinzufügen
SDK installieren
SDK einrichten
Aufruf des Xsolla-Login-Widgets hinzufügen

Your browser is not supported. Please try a different browser

Payments

Nutzer in Ihrer Anwendung authentifizieren

Xsolla-Login-Widget-SDK einbinden

Xsolla-Login-Widget-SDK initialisieren

Aufruf des Xsolla-Login-Widgets hinzufügen

Pakete aus einem Archiv importieren

Compiler einrichten

SDK einrichten

Aufruf des Xsolla-Login-Widgets hinzufügen

SDK installieren

SDK einrichten

Aufruf des Xsolla-Login-Widgets hinzufügen