Login / So integrieren Sie Xsolla-Konto-Login
  Alle Dokumentation

Login

So integrieren Sie Xsolla-Konto-Login

So funktioniert's

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

Hinweis
Das obige Bild zeigt eine der Optionen für das Login-Widget. Sie können das Widget anpassen.

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.

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

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

ParameterTypBeispielBeschreibung
Redirect URIsArray von Strings[“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”]Eine Liste von URI-Adressen, die für die Weiterleitung des Benutzers nach der Authentifizierung durch Xsolla-Konto verwendet werden können.
AudienceString“https://example.com”Die Domäne, in der der Xsolla Account-Login verwendet werden soll.
ScopeArray von Strings[“email”, “transactions”]Liste der Berechtigungen im Xsolla-Konto.

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

  1. Klicken Sie auf das Symbol ⚙, und wählen Sie Einstellungen.
  2. 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.

  1. Klicken Sie auf Connect.

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

Copy
Full screen
Small screen

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

    • 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:

Copy
Full screen
Small screen

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

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

Beispielhafter Xsolla-Konto-Schaltflächencode:

Copy
Full screen
Small screen

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

    • Ö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:

Copy
Full screen
Small screen

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.

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

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!
Letztmalig aktualisiert: 9. November 2023

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

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!