So integrieren Sie die Benutzerauthentifizierung über Xsolla-Konten

So funktioniert's

Sie können einrichten, dass sich Nutzer in Xsolla-Wallet über ihr Xsolla-Konto authentifizierem müssen.

Benutzerszenarien

Sie können eines der folgenden Benutzerszenarien implementieren:

1. Öffnen der Xsolla-Wallet-Authentifizierungsseite in einem Modalfenster nach einem Klick auf die Schaltfläche Bei Xsolla anmelden im Login-Widget:
   1. Der Nutzer klickt im Login-Widget auf die Schaltfläche Bei Xsolla anmelden.
   2. Daraufhin öffnet sich der Xsolla-Wallet-Authentifizierungsbildschirm in einem Modalfenster.
   3. Der Nutzer schließt den Authentifizierungsvorgang bei Xsolla-Wallet ab.
   4. Der Nutzer wird zur der Seite weitergeleitet, deren URL im Kundenportal im Feld Rückruf-URL angegeben ist.

2. Weiterleitung zur Xsolla-Wallet-Authentifizierungsseite nach einem Klick auf die Schaltfläche Bei Xsolla anmelden im Login-Widget:
   1. Der Nutzer klickt im Login-Widget auf die Schaltfläche Bei Xsolla anmelden.
   2. Daraufhin öffnet sich der Xsolla-Wallet-Authentifizierungsbildschirm im selben Fenster.
   3. Der Nutzer schließt den Authentifizierungsvorgang bei Xsolla-Wallet ab.
   4. Der Nutzer wird zur der Seite weitergeleitet, deren URL im Kundenportal im Feld Rückruf-URL angegeben ist.

3. Weiterleitung zur Xsolla-Wallet-Authentifizierungsseite in einem Pop-up-Fenster nach einem Klick auf die entsprechende Schaltfläche auf Ihrer Website:
   1. Der Nutzer klickt auf die entsprechende Schaltfläche auf Ihrer Website.
   2. Daraufhin öffnet sich der Xsolla-Wallet-Authentifizierungsbildschirm in einem Pop-up-Fenster.
   3. Der Nutzer schließt den Authentifizierungsvorgang bei Xsolla-Wallet ab.
   4. Der Nutzer wird zur der Seite weitergeleitet, deren URL im Kundenportal im Feld Rückruf-URL angegeben ist.

Wie komme ich dazu

So integrieren Sie Xsolla als soziales Netzwerk:

1. Erstellen Sie einen OAuth 2.0-Client für Xsolla-Konten.
2. Integrieren Sie das Login-Widget.
3. Aktivieren Sie Xsolla als soziales Netzwerk.
4. Implementieren Sie das Abrufen des Benutzerautorisierungstokens.

OAuth 2.0-Client für Xsolla-Konten erstellen

1. Erstellen Sie ein Projekt im Kundenportal.
2. Richten Sie ein Login-Projekt im Kundenportal ein.
3. Teilen Sie Ihrem Customer Success Manager die folgenden Informationen mit oder senden Sie diese per E-Mail an csm@xsolla.com:

4. Das Xsolla-Integrationsteam erstellt einen Xsolla-Konto-OAuth-2.0-Client für Sie und stellt dessen Kennung und geheimen Schlüssel zur Verfügung. Diese Daten sind notwendig, um den Benutzerautorisierungstoken zu erhalten.

Integration eines Login-Widgets

Xsolla als soziales Netzwerk aktivieren

1. Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
2. Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
3. Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Anmeldung über soziale Netzwerke.
4. Wählen Sie Xsolla aus der Liste der sozialen Netzwerke aus.

5. Klicken Sie auf das Symbol ⚙, und wählen Sie Einstellungen.
6. Füllen Sie die folgenden Felder aus:
   • Anwendungs-ID – die Xsolla-Konto-OAuth-2.0-Client-Kennung, die Sie von Xsolla erhalten haben.
   • Geheimer Schlüssel der Anwendung – den Xsolla-Konto-OAuth-2.0-Schlüssel, den Sie von Xsolla erhalten haben.
   • Ihr Website-Link – die Website, von der aus Anfragen zum Austausch des Autorisierungscodes gegen ein Benutzerautorisierungstoken gesendet werden. Geben Sie dieselbe URL-Adresse an, die bei der Erstellung des Xsolla-Konto-OAuth-2.0-Clients als Audience-Parameter angegeben wurde.

7. Klicken Sie auf Connect.

8. Richten Sie eines der Benutzerszenarien ein:
   • Weiterleitung zur Xsolla-Wallet-Authentifizierungsseite nach einem Klick auf die Schaltfläche Bei Xsolla anmelden im Login-Widget (voreingestellt):
     1. Wechseln Sie zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
     2. Geben sie im Feld Rückruf-URL die URL-Adresse der Seite ein, zu der der Nutzer nach der Authentifizierung weitergeleitet werden soll.
     3. Übermitteln Sie im Login-Widget-Code im Parameter callbackUrl die URL-Adresse der Seite, zu der der Nutzer nach der Authentifizierung weitergeleitet werden soll.

Widget-Code-Beispiel:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  callbackUrl: '[Your Callback URL]',
});

1. • Weiterleitung zur Xsolla-Wallet-Authentifizierungsseite in einem Pop-up-Fenster durch Klick auf die entsprechende Schaltfläche auf Ihrer Website:
     1. Scrollen Sie auf der Navigationsseite zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
     2. Fügen Sie die folgenden URLs im Abschnitt Rückruf-URLs ein:
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     3. Übermitteln Sie im Login-Widget-Code im Parameter babkaLoginPopup den Wert true, und übermitteln Sie im Parameter callbackUrl die URL-Adresse der Seite, zu der der Nutzer nach der Authentifizierung weitergeleitet werden soll.

Widget-Code-Beispiel:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginPopup: true,
  callbackUrl: '[Your Callback URL]',
});

1. • 4. Ergänzen Sie Ihre Website um eine Schaltfläche, die die Xsolla-Wallet-Authentifizierungsseite öffnet.

Code für die Schaltfläche “Bei Xsolla anmelden” (Beispiel):

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • Öffnen der Xsolla-Wallet-Authentifizierungsseite in einem Modalfenster nach einem Klick auf die Schaltfläche Bei Xsolla anmelden im Login-Widget:
     1. Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
     2. Geben sie im Feld Rückruf-URL die URL-Adresse der Seite ein, zu der der Nutzer nach der Authentifizierung weitergeleitet werden soll.
     3. Übermitteln Sie im Login-Widget-Code im Parameter babkaLoginFlow den Wert popup, und übermitteln Sie im Parameter callbackUrl die URL-Adresse der Seite, zu der der Nutzer nach der Authentifizierung weitergeleitet werden soll.

Widget-Code-Beispiel:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginFlow: popup,
  callbackUrl: '[Your Callback URL]',
});

Abrufen eines Benutzerautorisierungs-Tokens

Nach der Autorisierung bei Xsolla wird der Nutzer zu der im Parameter callback_url angegebenen URL weitergeleitet. Der Benutzerautorisierungstoken wird im Parameter token übergeben.

So betten Sie den Xsolla-Konto-OAuth-JWT-Token in den Xsolla-Login-JWT-Token ein:

1. Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
2. Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
3. Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Anmeldung über soziale Netzwerke.

4. Setzen Sie den JWT-Token des sozialen Netzwerks einbetten auf Ein.
5. Klicken Sie auf Änderungen speichern.