Wenn Sie Ihr eigenes Authentifizierungssystem verwenden, müssen Sie lediglich sicherstellen, dass es die von Xsolla zur Abonnementverwaltung benötigten Daten speichern und übermitteln kann. Diese Daten sind:

• eine eindeutige Benutzer-ID
• die E-Mail-Adresse des Nutzers

In diesem Fall empfehlen wir, eine Website mit der Web-Shop-Vorlage zu erstellen und so einzurichten, dass sich Nutzer entweder per ID oder Deep Link authentifizieren müssen.

So geht’s:

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Storefronts > Websites.
2. Klicken Sie auf Seite erstellen.
3. Wählen Sie als Vorlage die Option Web Shop aus.
4. Geben Sie eine URL an, die auf eine externe Plattform verweist, auf der Ihr Spiel verfügbar ist. Auf diese Weise können Sie schnell eine Seite im Stil Ihres Spiels erstellen: Bilder und der Spieltitel, Angaben zum Entwickler und ein Farbschema werden automatisch auf der neuen Website übernommen. Wenn Sie keine Spieldaten verwenden möchten, deaktivieren Sie den Schalter Spielinfos aus Google-Play- oder App-Store-URL kopieren.

5. Klicken Sie auf Web Shop erstellen.

6. Richten Sie eine der folgenden Benutzerauthentifizierungsoptionen ein:

   • Authentifizierung über Benutzer-ID
   • Authentifizierung über Benutzer-ID und Deep Link
   • Authentifizierung über Deep Link
   • Authentifizierung über Xsolla Login mit verknüpfter Benutzer-ID

Benutzerauthentifizierung im Kundenportal einrichten

Xsolla ermöglicht es Ihnen, verschiedene Arten der Benutzerauthentifizierung zu konfigurieren. In dieser Anleitung ist die schnellste Vorgehensweise erläutert: Hierbei authentifizieren sich die Nutzer in einem vorgefertigten Widget über einen Einmal-Code oder ein soziales Netzwerk.

Sie können die Benutzerauthentifizierungsmethode später ändern oder eine andere Integrationsoption verwenden.

Xsolla bietet standardmäßige Widget-Vorlagen. Deren Optik und Inhalt werden durch die für Ihr Projekt gewählte Anmeldemethode und die Widget-Anpassungseinstellungen im Kundenportal bestimmt.

Widget-Standardansicht für die Authentifizierung über Einmal-Code oder soziale Netzwerke:

So richten Sie die Benutzerauthentifizierung im Kundenportal ein:

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Spieler > Login.
2. Klicken Sie auf dem Dashboard auf Login-Projekt erstellen.
3. Wählen Sie Standard-Login-Projekt, und klicken Sie auf Erstellen und einrichten. Anschließend werden Sie zur Navigationsseite mit den Login-Projekteinstellungen weitergeleitet.
4. Wählen Sie unter Anmeldemethoden die Option Passwortlose Anmeldung.
5. Klicken Sie auf Konfigurieren.
6. Konfigurieren Sie die Autorisierung über einen Einmal-Code:
   1. Klicken Sie im Block Passwortlose Anmeldung auf Rückruf-URLs.
   2. Geben Sie im Feld Rückruf-URL die URL an, zu der der Nutzer nach erfolgreicher Authentifizierung weitergeleitet wird.
   3. Klicken Sie auf Speichern.
7. Konfigurieren Sie die Authentifizierung über soziale Netzwerke (optional):
   1. Klicken Sie auf den Namen Ihres Login-Projekts in der Breadcrumb-Navigation, um zur Login-Projektseite zurückzukehren.
   2. Scrollen Sie zum Block Authentifizierung, und wählen Sie Anmeldung über soziale Netzwerke aus.
   3. Verknüpfen Sie die sozialen Netzwerke, über die sich die Spieler registrieren und bei der Anwendung anmelden dürfen:

1. 1. • Klicken Sie auf das ⚙-Symbol und dann auf Verknüpfen, um das gewünschte soziale Netzwerk zu verknüpfen.

1. 1. • Um mehrere soziale Netzwerke auf einmal zu verknüpfen, wählen Sie die gewünschten Anzeigebereiche aus (deren Umrandung färbt sich daraufhin grün). Klicken Sie danach auf das Drop-down-Menü Verwalten, und wählen Sie Verknüpfen aus.

1. 1. • Um alle verfügbaren sozialen Netzwerke auf einmal zu verknüpfen, klicken Sie auf Alle auswählen. Klicken Sie danach auf das Drop-down-Menü Verwalten, und wählen Sie Verknüpfen aus.

1. 4. Klicken Sie auf Speichern.

Sie können die Widget-Einstellungen testen. Klicken Sie dazu links auf dem Bildschirm auf Jetzt prüfen, und melden Sie sich an.

Für die Integration benötigen Sie eine Login-Projekt-ID. Diese finden Sie in Ihrem Projekt im Kundenportal unter Spieler > Login > Dashboard.

Benutzerauthentifizierung in der Anwendung implementieren

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.

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:

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</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 Spieler > 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 Spieler > 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.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</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():

1<div id="xl_auth" style="display: none"></div>
2<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.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

Benutzerauthentifizierung im Kundenportal einrichten

Xsolla ermöglicht es Ihnen, verschiedene Arten der Benutzerauthentifizierung zu konfigurieren. In dieser Anleitung ist die schnellste Vorgehensweise erläutert: Hierbei authentifizieren sich die Nutzer über einen Einmal-Code oder ein soziales Netzwerk.

Sie können die Benutzerauthentifizierungsmethode später ändern.

So richten Sie die Benutzerauthentifizierung im Kundenportal ein:

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Spieler > Login.
2. Klicken Sie auf dem Dashboard auf Login-Projekt erstellen.
3. Wählen Sie Standard-Login-Projekt, und klicken Sie auf Erstellen und einrichten. Anschließend werden Sie zur Navigationsseite mit den Login-Projekteinstellungen weitergeleitet.
4. Wählen Sie unter Anmeldemethoden die Option Passwortlose Anmeldung.
5. Klicken Sie auf Konfigurieren.
6. Konfigurieren Sie die Autorisierung über einen Einmal-Code:
   1. Klicken Sie im Block Passwortlose Anmeldung auf Rückruf-URLs.
   2. Geben Sie im Feld Rückruf-URL die URL an, zu der der Nutzer nach erfolgreicher Authentifizierung weitergeleitet wird.
   3. Klicken Sie auf Speichern.
7. Konfigurieren Sie die Authentifizierung über soziale Netzwerke (optional):
   1. Klicken Sie auf den Namen Ihres Login-Projekts in der Breadcrumb-Navigation, um zur Login-Projektseite zurückzukehren.
   2. Scrollen Sie zum Block Authentifizierung, und wählen Sie Anmeldung über soziale Netzwerke aus.
   3. Verknüpfen Sie die sozialen Netzwerke, über die sich die Spieler registrieren und bei der Anwendung anmelden dürfen:

1. 1. • Klicken Sie auf das ⚙-Symbol und dann auf Verknüpfen, um das gewünschte soziale Netzwerk zu verknüpfen.

1. 1. • Um mehrere soziale Netzwerke auf einmal zu verknüpfen, wählen Sie die gewünschten Anzeigebereiche aus (deren Umrandung färbt sich daraufhin grün). Klicken Sie danach auf das Drop-down-Menü Verwalten, und wählen Sie Verknüpfen aus.

1. 1. • Um alle verfügbaren sozialen Netzwerke auf einmal zu verknüpfen, klicken Sie auf Alle auswählen. Klicken Sie danach auf das Drop-down-Menü Verwalten, und wählen Sie Verknüpfen aus.

1. 4. Klicken Sie auf Speichern.

Benutzerauthentifizierung in Site Builder einrichten

So erstellen Sie eine Website und konfigurieren die Benutzerauthentifizierung:

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Storefronts > Websites.
2. Klicken Sie auf Seite erstellen.
3. Wählen Sie eine beliebige Vorlage aus, und fahren Sie mit der Erstellung Ihrer Website fort.

4. Navigieren Sie im Site Builder zum Menüpunkt Login-Einstellungen > Xsolla Login, und wählen Sie die zuvor konfigurierte Authentifizierungsoption aus der Drop-down-Liste aus.
5. Damit das Autorisierungsmodalfenster das Farbschema der Website übernimmt, müssen Sie den Schalter Website-Theme verwenden aktivieren (empfohlen).
6. Im Abschnitt Layout können Sie bei Bedarf das Logo und einen eigenen Hintergrund einrichten.