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:

npm i @xsolla/login-sdk

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

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'
});

<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

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

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

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

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

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

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

    xl.open();
  }
</script>

Pakete aus einem Archiv importieren

1. Laden Sie das SDK aus dem CDN oder aus GitHub herunter.

2. Entpacken Sie das Archiv.
3. Öffnen Sie Ihr Unity-Projekt oder erstellen Sie ein neues.
4. Navigieren Sie im Hauptmenü des Unity-Editors zu Assets > Import Package > Custom Package, und wählen Sie das SDK aus.

Compiler einrichten

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

Android-Abhängigkeiten auflösen

Bei Android-Builds verwendet das SDK Funktionen aus nativen Android-Bibliotheken.

So lösen Sie Abhängigkeiten auf und laden die nötigen Bibliotheken herunter:

1. Legen Sie Android als Build-Plattform fest:
   1. Navigieren Sie im Unity-Editor-Hauptmenü zu File > Build Settings.
   2. Wählen Sie im Platform-Fenster die Option Android.
   3. Klicken Sie auf Switch Platform.

2. Starten Sie den Abhängigkeiten-Manager:
   1. Navigieren Sie im Unity-Editor-Hauptmenü zu Assets > External Dependency Manager > Android Resolver > Resolve.
   2. Warten Sie, bis der Abhängigkeiten-Manager fertig ist.

Daraufhin werden die JAR- oder AAR-Dateien aller erforderlichen Android-Bibliotheken in den Ordner Assets/Plugins/Android heruntergeladen.

SDK einrichten

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

1. 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. 5. Klicken Sie auf Apply Settings.

1. 2. 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. 4. 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.

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

SDK installieren

Die erforderlichen Bibliotheken sind auf Maven Central verfügbar.

So installieren Sie die Bibliotheken:

1. Starten Sie Android Studio.
2. Öffnen Sie die Datei build.gradle der Anwendung.
3. Fügen Sie die folgenden Zeilen im Abhängigkeiten-Abschnitt ein, wobei <version_number> die erforderliche Bibliotheksversion ist:

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

SDK initialisieren

Initialisieren Sie die Login-Bibliothek, indem Sie die statische Methode beim Start der Anwendung aufrufen. Fügen Sie dazu die folgenden Zeilen in den Quellcode Ihres Android-Projekts ein:

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

Aufruf des Xsolla-Login-Widgets hinzufügen

So öffnen Sie das Widget:

1. Rufen Sie die Methode XLogin.startAuthWithXsollaWidget aus der Login-Bibliothek auf, und übermitteln Sie die folgenden Parameter:

1. • fragment oder activity – das aktuelle Fragment bzw. die aktuelle Aktivität.

1. • callback – der Status-Rückruf.

1. • 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).

2. Rufen Sie innerhalb der Methode onActivityResult die Methode XLogin.finishAuthWithXsollaWidget aus der Login-Bibliothek auf, und übermitteln Sie die folgenden Parameter:

1. • activity – die aktuelle Aktivität. Erforderlich für die Verarbeitung des Anwendungskontexts.

1. • activityResultRequestCode – der Anfragecode aus der Methode onActivityResult. Dient dazu, die ursprüngliche Anfrage zu identifizieren.

1. • activityResultCode – der Ergebniscode aus der Methode onActivityResult. Anhand des Codes lässt sich ermitteln, ob die Operation erfolgreich war.

1. • activityResultData – Die von der Methode onActivityResult zurückgegebenen Daten. Enthalten die Ergebnisse der Operation.

1. • callback – der Status-Rückruf. Dient dazu, das Ergebnis der Authentifizierung zu verarbeiten.

3. Initialisieren Sie die Store-Bibliothek, bevor Sie das Autorisierungsergebnis verarbeiten.

Store-Bibliothek initialisieren:

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

SDK installieren

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

3. 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. 3. Wechseln Sie zum Epic Games Launcher.

1. 1. 4. Klicken Sie auf Install to Engine.
      5. Öffnen Sie Ihr Unreal Engine-Projekt in Unreal Editor.
      6. 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. 2. 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

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

1. 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).

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

3. 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: