So integrieren Sie Xsolla-Konto-Login

So funktioniert's

Sie können eine Benutzerauthentifizierung per Xsolla-Konto ergänzen.

Benutzerszenarien

Sie können eines der folgenden Benutzerszenarien implementieren:

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

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

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

Wie komme ich dazu

So integrieren Sie Xsolla-Konto als soziales Netzwerk:

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

OAuth 2.0-Client für Xsolla-Konto erstellen

So erstellen Sie einen OAuth 2.0-Client für Xsolla-Konto:

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

Integrieren Sie das Login-Widget mithilfe von SDK.

Xsolla-Konto 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-Konto 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-Konto-Authentifizierungsseite nach Klick auf die Schaltfläche Xsolla-Konto 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 Benutzer nach der Authentifizierung weitergeleitet werden soll.
     3. Übermitteln Sie im Login-Widget-Code im Parameter callbackUrl die URL-Adresse der Seite, zu der der Benutzer 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-Konto-Authentifizierungsseite in einem Pop-up-Fenster durch Klick auf die entsprechende Schaltfläche auf Ihrer Website:
     1. Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
     2. Geben Sie im Feld Rückruf-URL folgende URL ein: https://login-widget.xsolla.com/latest/babka-auth-succeed.
     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 Benutzer 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-Konto-Authentifizierungsseite öffnet.

Beispielhafter Xsolla-Konto-Schaltflächencode:

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

1. • Öffnen der Xsolla-Konto-Authentifizierungsseite in einem Modalfenster nach Klick auf die Schaltfläche Xsolla-Konto 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 Benutzer 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 Benutzer 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 aufseiten des Xsolla-Kontos wird der Benutzer 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.

Diese Seite bewerten

Gibt es etwas, das wir verbessern können? Senden

Jetzt nicht

Vielen Dank für Ihr Feedback!