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:
- Öffnen der Xsolla-Konto-Authentifizierungsseite in einem Modalfenster nach Klick auf die Schaltfläche Xsolla-Konto im Login-Widget:
- Der Benutzer klickt im Login-Widget auf die Schaltfläche Xsolla-Konto.
- Daraufhin öffnet sich der Xsolla-Konto-Authentifizierungsbildschirm in einem Modalfenster.
- Der Benutzer schließt den Authentifizierungsvorgang bei Xsolla-Konto ab.
- Der Benutzer wird zur der Seite weitergeleitet, deren URL im Kundenportal im Feld Rückruf-URL angegeben ist.
- Weiterleitung zur Xsolla-Konto-Authentifizierungsseite nach Klick auf die Schaltfläche Xsolla-Konto im Login-Widget:
- Der Benutzer klickt im Login-Widget auf die Schaltfläche Xsolla-Konto.
- Daraufhin öffnet sich der Xsolla-Konto-Authentifizierungsbildschirm im selben Fenster.
- Der Benutzer schließt den Authentifizierungsvorgang bei Xsolla-Konto ab.
- Der Benutzer wird zur der Seite weitergeleitet, deren URL im Kundenportal im Feld Rückruf-URL angegeben ist.
- Weiterleitung zur Xsolla-Konto-Authentifizierungsseite in einem Pop-up-Fenster nach Klick auf die entsprechende Schaltfläche auf Ihrer Website:
- Der Benutzer klickt auf die entsprechende Schaltfläche auf Ihrer Website.
- Daraufhin öffnet sich der Xsolla-Konto-Authentifizierungsbildschirm in einem Pop-up-Fenster.
- Der Benutzer schließt den Authentifizierungsvorgang bei Xsolla-Konto ab.
- 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:
- Erstellen Sie einen OAuth 2.0-Client für Xsolla-Konto.
- Integrieren Sie das Login-Widget.
- Aktivieren Sie Xsolla-Konto als soziales Netzwerk.
- 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:
- Erstellen Sie ein Projekt im Kundenportal.
- Richten Sie ein Login-Projekt im Kundenportal ein.
- Teilen Sie Ihrem Customer Success Manager die folgenden Informationen mit oder senden Sie diese per E-Mail an csm@xsolla.com:
Parameter | Typ | Beispiel | Beschreibung |
---|---|---|---|
Redirect URIs | Array 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. |
Audience | String | “https://example.com” | Die Domäne, in der der Xsolla Account-Login verwendet werden soll. |
Scope | Array von Strings | [“email”, “transactions”] | Liste der Berechtigungen im Xsolla-Konto. |
- 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
- Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
- Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
- Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Anmeldung über soziale Netzwerke.
- Wählen Sie Xsolla-Konto aus der Liste der sozialen Netzwerke aus.
- Klicken Sie auf das Symbol ⚙, und wählen Sie Einstellungen.
- 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.
- Klicken Sie auf Connect.
- Richten Sie eines der Benutzerszenarien ein:
- Weiterleitung zur Xsolla-Konto-Authentifizierungsseite nach Klick auf die Schaltfläche Xsolla-Konto im Login-Widget (voreingestellt):
- Wechseln Sie zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
- Geben sie im Feld Rückruf-URL die URL-Adresse der Seite ein, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
- Übermitteln Sie im Login-Widget-Code im Parameter
callbackUrl
die URL-Adresse der Seite, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
- Weiterleitung zur Xsolla-Konto-Authentifizierungsseite nach Klick auf die Schaltfläche Xsolla-Konto im Login-Widget (voreingestellt):
Widget-Code-Beispiel:
- js
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:
- Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
- Geben Sie im Feld Rückruf-URL folgende URL ein:
https://login-widget.xsolla.com/latest/babka-auth-succeed
. - Übermitteln Sie im Login-Widget-Code im Parameter
babkaLoginPopup
den Werttrue
, und übermitteln Sie im ParametercallbackUrl
die URL-Adresse der Seite, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
- Weiterleitung zur Xsolla-Konto-Authentifizierungsseite in einem Pop-up-Fenster durch Klick auf die entsprechende Schaltfläche auf Ihrer Website:
Widget-Code-Beispiel:
- js
import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US',
babkaLoginPopup: true,
callbackUrl: '[Your Callback URL]',
});
- Ergänzen Sie Ihre Website um eine Schaltfläche, die die Xsolla-Konto-Authentifizierungsseite öffnet.
Beispielhafter Xsolla-Konto-Schaltflächencode:
- html
<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:
- Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Rückruf-URLs.
- Geben sie im Feld Rückruf-URL die URL-Adresse der Seite ein, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
- Übermitteln Sie im Login-Widget-Code im Parameter
babkaLoginFlow
den Wertpopup
, und übermitteln Sie im ParametercallbackUrl
die URL-Adresse der Seite, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
- Öffnen der Xsolla-Konto-Authentifizierungsseite in einem Modalfenster nach Klick auf die Schaltfläche Xsolla-Konto im Login-Widget:
Widget-Code-Beispiel:
- js
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:
- Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
- Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
- Scrollen Sie zum Abschnitt Authentifizierung, und wählen Sie Anmeldung über soziale Netzwerke.
- Setzen Sie den JWT-Token des sozialen Netzwerks einbetten auf Ein.
- Klicken Sie auf Änderungen speichern.
War dieser Artikel hilfreich?
Diese Seite bewerten
Jetzt nicht
Vielen Dank für Ihr Feedback!
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.