So integrieren Sie die Benutzerauthentifizierung über Xsolla ID

Funktionsweise

Sie können die Benutzerauthentifizierung mit Xsolla ID hinzufügen — der gemeinsamen Identitätsplattform, die nahtlosen Zugriff auf Xsolla-Produkte bietet.

Sie können eines der folgenden Benutzerszenarien implementieren:

• Öffnen der Xsolla ID-Authentifizierungsseite in einem Modalfenster durch Klicken auf die Log in with Xsolla-Schaltfläche im Login-Widget:

  1. Der Benutzer klickt auf die Log in with Xsolla-Schaltfläche im Login-Widget.
  2. Der Benutzer wird zur Xsolla ID-Authentifizierungsseite weitergeleitet, die in einem Modalfenster geöffnet wird.
  3. Der Benutzer schließt den Authentifizierungsprozess auf der Xsolla ID-Authentifizierungsseite ab.
  4. Der Benutzer wird zur URL weitergeleitet, die im Callback URL-Feld im Kundenportal angegeben ist.

• Weiterleitung zur Xsolla ID-Authentifizierungsseite durch Klicken auf die Log in with Xsolla-Schaltfläche im Login-Widget:

  1. Der Benutzer klickt auf die Log in with Xsolla-Schaltfläche im Login-Widget.
  2. Der Benutzer wird zur Xsolla ID-Authentifizierungsseite weitergeleitet, die im selben Fenster geöffnet wird.
  3. Der Benutzer schließt den Authentifizierungsprozess auf Xsolla ID ab.
  4. Der Benutzer wird zur Seite weitergeleitet, deren URL im Callback URL-Feld im Kundenportal angegeben ist.

• Weiterleitung zur Xsolla ID-Authentifizierungsseite in einem Pop-up-Fenster durch Klicken auf eine Schaltfläche auf Ihrer Website:

  1. Der Benutzer klickt auf eine Schaltfläche auf Ihrer Website.
  2. Der Benutzer wird zur Xsolla ID-Authentifizierungsseite weitergeleitet, die in einem Pop-up-Fenster geöffnet wird.
  3. Der Benutzer schließt den Authentifizierungsprozess auf der Xsolla ID-Authentifizierungsseite ab.
  4. Der Benutzer wird zur Seite weitergeleitet, deren URL im Callback URL-Feld im Kundenportal angegeben ist.

So erhalten Sie es

Um die Anmeldung über soziale Netzwerke via Xsolla ID zu integrieren:

1. Integrieren Sie das Login-Widget.
2. Aktivieren Sie Xsolla als soziales Netzwerk.
3. Implementieren Sie die Abrufung des Benutzer-Autorisierungstokens.

Integration des Login-Widgets

Fügen Sie das Xsolla Login-Widget zu Ihrer Anwendung hinzu — es bietet eine fertige Benutzerauthentifizierungsoberfläche.

Xsolla als soziales Netzwerk aktivieren

1. Gehen Sie in Ihrem Projekt im Kundenportal zum Abschnitt Players > Login.

2. Klicken Sie im Bereich eines Login-Projekts auf Configure.

3. Gehen Sie zum Block Authentication und wählen Sie Social login.

4. Wählen Sie Xsolla aus der Liste der sozialen Netzwerke.

5. Klicken Sie auf das ⚙-Symbol und wählen Sie Connect.

6. Richten Sie eines der Benutzerszenarien ein:

   • Authentifizierung im selben Fenster
   • Authentifizierung im Pop-up-Fenster
   • Authentifizierung im Modalfenster

Authentifizierung im selben Fenster

Um den Benutzer zur Xsolla ID-Authentifizierungsseite weiterzuleiten, nachdem er auf die Log in with Xsolla-Schaltfläche im Login-Widget geklickt hat:

1. Gehen Sie zum Abschnitt Authentication und klicken Sie auf Callback URLs.
2. Geben Sie im Callback URL-Feld die URL ein, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
3. Übergeben Sie im callbackUrl-Parameter des Codes des Login-Widgets die URL, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.

Beispiel für Widget-Code:

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

Authentifizierung im Pop-up-Fenster

Um den Benutzer zur Xsolla ID-Authentifizierungsseite in einem Pop-up-Fenster weiterzuleiten, nachdem er auf eine Schaltfläche auf Ihrer Website geklickt hat:

1. Gehen Sie auf der Navigationsseite zum Abschnitt Authentication und klicken Sie auf Callback URLs.
2. Stellen Sie sicher, dass die folgende URL im Abschnitt Callback URL hinzugefügt ist: https://login.xsolla.com/api/social/oauth2/callback.
3. Übergeben Sie im Code des Login-Widgets den Wert true im babkaLoginPopup-Parameter und die URL, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll, im callbackUrl-Parameter.

Beispiel für Widget-Code:

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

4. Fügen Sie die Schaltfläche hinzu, die die Xsolla ID-Authentifizierungsseite auf Ihrer Website öffnet.

Beispiel für den Code der Log in with Xsolla-Schaltfläche:

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

Authentifizierung im Modalfenster

Um den Benutzer zur Xsolla ID-Authentifizierungsseite in einem Modalfenster weiterzuleiten, nachdem er auf die Log in with Xsolla-Schaltfläche im Login-Widget geklickt hat:

1. Gehen Sie zum Abschnitt Authentication und klicken Sie auf Callback URLs.
2. Geben Sie im Callback URL-Feld die URL ein, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll.
3. Übergeben Sie im Code des Login-Widgets den Wert popup im babkaLoginFlow-Parameter und die URL, zu der der Benutzer nach der Authentifizierung weitergeleitet werden soll, im callbackUrl-Parameter.

Beispiel für Widget-Code:

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

Abruf des Benutzer-Autorisierungstokens

Nach der Autorisierung auf der Xsolla ID-Seite wird der Benutzer zur URL weitergeleitet, die im callbackUrl-Parameter angegeben ist. Das Benutzer-Autorisierungstoken wird im token-Parameter übergeben.

Um das Xsolla ID OAuth JWT-Token im Xsolla Login JWT-Token einzubetten:

1. Gehen Sie in Ihrem Projekt im Kundenportal zum Abschnitt Players > Login.
2. Klicken Sie im Bereich eines Login-Projekts auf Configure.
3. Gehen Sie zum Block Authentication und wählen Sie Social login.
4. Schalten Sie den Embed social network JWT token-Schalter ein.
5. Klicken Sie auf Save changes.