Ablauf für den Nutzer

1. Der Nutzer öffnet den Web Shop, für den die Authentifizierung über Benutzer-ID konfiguriert ist.
2. Der Nutzer autorisiert sich im Web Shop auf eine der folgenden Arten:
   • Der Nutzer gibt seine ID im Block Fast Login ein und klickt auf "Anmelden".
   • Der Nutzer klickt bei dem ausgewählten Artikel auf "Kaufen" oder oben in der Leiste auf "Anmelden":
     1. Daraufhin öffnet sich ein Modalfenster, in dem der Nutzer seine ID eingeben oder ein soziales Netzwerk auswählen muss.
     2. Der Nutzer gibt seine ID ein und klickt auf Weiter. Alternativ klickt der Nutzer auf das Social-Media-Symbol, wählt ein soziales Netzwerk aus und schließt die Authentifizierung auf der Seite des sozialen Netzwerks ab.

3. Das System prüft, ob der Nutzer im Spiel existiert. Wenn ein Nutzer mit dieser ID oder diesem Social-Media-Konto im Spiel existiert, wird er im Web Shop autorisiert. Andernfalls wird eine Fehlermeldung angezeigt.

Wie komme ich dazu

1. Implementieren Sie aufseiten Ihrer Anwendung das Handling des Webhooks für die Benutzervalidierung.

Beim Empfang eines Webhooks sollte die Anwendung Folgendes tun:

• Nach einem Benutzer anhand seiner im Webhook übermittelten ID suchen.
• Je nach Ergebnis einen der folgenden HTTP-Statuscodes senden:
  • 200 inklusive einer Antwort vom Webhook, sofern ein Benutzer gefunden wurde
  • 404, sofern keine Benutzer-ID gefunden wurde
• Benutzerattribute zum Zwecke der Personalisierung senden.

2. Öffnen Sie Ihr Projekt im Kundenportal.
3. Klicken Sie in der Seitenleiste auf Site Builder.
4. Klicken Sie auf Site Builder öffnen.
5. Wechseln Sie zum Block Login-Einstellungen.

6. Wählen Sie die Option Benutzer-ID aus.

7. Wählen Sie in der Drop-down-Liste Neuer Login aus.

8. Geben Sie die URL für den Empfang von Webhooks ein.

9. Konfigurieren Sie die Autorisierung über soziale Netzwerke, die bereits mit Ihrer Anwendung verknüpft sind (optional):
   1. Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
   2. Klicken Sie auf Konfigurieren.
   3. Scrollen Sie zum Block Authentifizierung, und klicken Sie auf Anmeldung über soziale Netzwerke.

1. 4. Klicken Sie auf der Karte des gewünschten sozialen Netzwerks, rechts neben dem Titel, auf das ⚙-Symbol und dann auf Verknüpfen.

Ein Deep Link ist eine spezielle URL, die den Nutzer nicht nur zur Hauptseite einer Anwendung oder Website weiterleitet, sondern direkt zu einem bestimmten Abschnitt, einer Unterseite oder einer Aktion.

Deep Links können als zusätzliche Authentifizierungsmethode beim Anmelden über Benutzer-ID verwendet werden. Ist das Spiel auf dem Mobilgerät des Nutzers installiert, wird dieser über einen Deep Link zum Spiel weitergeleitet und ein Autorisierungstoken abgerufen.

Ablauf für den Nutzer

In der mobilen App

1. Ein nicht autorisierter Nutzer klickt im Web Shop auf die Anmelden- oder Kaufen-Schaltfläche. Daraufhin öffnet sich ein Modalfenster zur Eingabe der Benutzer-ID oder zur Anmeldung beim Handyspiel.

2. Der Nutzer klickt auf Über Handyspiel anmelden.
3. Der Nutzer wird zum Spiel und dann automatisch als autorisierter Nutzer zurück zum Web Shop weitergeleitet.

In der Desktop-Version

1. Ein nicht autorisierter Nutzer klickt im Web Shop auf die Anmelden- oder Kaufen-Schaltfläche. Daraufhin öffnet sich ein Modalfenster zur Eingabe der Benutzer-ID oder zur Anmeldung bei der mobilen Version des Spiels per QR-Code.

2. Der Nutzer scannt den QR-Code mit seinem Mobilgerät.
3. Der Web Shop öffnet sich auf dem Mobilgerät des Nutzers.
4. Der Nutzer wird automatisch zum Spiel und dann als authentifizierter Nutzer zurück zum Web Shop weitergeleitet.

Interaktionsablauf

Einrichtung

Aufseiten des Spiels

1. Registrieren Sie in den Einstellungen Ihrer Spiele-App ein URL-Schema, um das Spiel über einen Deep Link zu öffnen:
   • in Android-Anwendungen – in der Datei AndroidManifest.xml
   • in iOS-Anwendungen – in der Datei Info.plist

Wenn sich ein Nutzer nach der Registrierung des Schemas über das Spiel im Web Shop authentifiziert, sollte sich das Spiel unter der angegebenen Adresse öffnen.

URL-Schema für die Registrierung eines Spiels (Beispiel):
gamename://authorize?operationPayload=<VALUE>, wobei:
• gamename der Name Ihres Spiels ist, das auf einem Mobilgerät geöffnet werden soll.
• authorize eine beispielhafte Aktion ist, die nach dem Öffnen des Spiels ausgeführt werden soll. Verwenden Sie den jeweiligen Aktionsnamen aus dem Betriebssystem Ihrer Anwendung.
• operationPayload=<VALUE> ein zusätzlicher Parameter ist, der Informationen für die Tokengenerierung während der Authentifizierung enthält.

Beispiele:

• URL-Schema in iOS-Anwendungen registrieren
• URL-Schema in Android-Anwendungen registrieren

Copy

Full screen

Small screen

• xml

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>gamename</string>
      </array>
    </dict>
  </array>

Copy

Full screen

Small screen

• xml

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="gamename" android:host="authorize" />
</intent-filter>

2. Implementieren Sie, dass ein Autorisierungstoken im JWT-Format mithilfe der spielpezifischen Benutzer-ID generiert wird.

Aufruf der API-Methode mittels curl für die Generierung des Benutzertokens (Beispiel):

curl -X 'POST' \
'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
-H 'accept: /' \
-H 'Content-Type: application/json' \
-d '{
 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 "settings": {
   "projectId": 123456,
   "merchantId": 123456
 },
 "user": {
   "id": "123",
   "country": "US"
 }
 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
}'

Die Antwort sieht in etwa wie folgt aus: {token="JWT_TOKEN"}.

3. Fügen Sie ein Pop-up-Fenster mit einer Benachrichtigung über die erfolgreiche Autorisierung hinzu (optional).
4. Implementieren Sie, dass der Web Shop im Browser unter Verwendung des abgerufenen Benutzertokens geöffnet wird.

Beispiel für eine URL zum Öffnen des Web Shops im Browser für einen autorisierten Nutzer:
• https:​//example.com/?token={token}, wenn Sie eine benutzerdefinierte Domain verwenden
• https:​//example.xsolla.site/?token={token}, wenn Sie eine Xsolla-Domain verwenden

wobei {token} der Autorisierungstoken des Nutzers ist.

Innerhalb von Site Builder

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Site Builder.
2. Klicken Sie bei der gewünschten Web-Shop-Seite, für die eine Authentifizierung über Benutzer-ID eingerichtet ist, auf Konfigurieren.
3. Wechseln Sie zu den Login-Einstellungen, und wählen Sie Benutzer-ID.
4. Aktivieren Sie den Schalter Deep-Link-Autorisierung.

5. Geben Sie im Feld Deep-Link-URL den Link für die Benutzerauthentifizierung ein.

6. Wenn Sie einen Fast Login-Block auf der Website platziert haben:
   1. Wechseln Sie zum Fast Login-Block.
   2. Aktivieren Sie im Abschnitt Layout den Schalter QR-Code.

7. Klicken Sie auf Vorschau, um die Authentifizierung zu überprüfen.
8. Klicken Sie auf Veröffentlichen, um die Website zu veröffentlichen.

Ein Deep Link ist eine spezielle URL, die den Nutzer nicht nur zur Hauptseite einer Anwendung oder Website weiterleitet, sondern direkt zu einem bestimmten Abschnitt, einer Unterseite oder einer Aktion.

Deep Links ermöglichen es dem Nutzer, sich mit einem Klick über das Spiel im Web Shop zu authentifizieren, anstatt den Authentifizierungsprozess mittels Benutzer-ID oder Xsolla Login zu durchlaufen.

Ist das Spiel auf dem Mobilgerät des Nutzers installiert, wird dieser über einen Deep Link zum Spiel weitergeleitet und ein Autorisierungstoken abgerufen.

Wird ein Deep Link als primäre Authentifizierungsmethode verwendet, können Zahlungsdaten gespeichert werden, wohingegen dies bei einer Authentifizierung über Benutzer-ID und Deep Link nicht möglich ist. In diesem Fall beschleunigt der Deep Link lediglich die Authentifizierung, ergänzt aber keine neuen Funktionen.

Ablauf für den Nutzer

In der mobilen App

1. Ein nicht autorisierter Nutzer klickt im Web Shop auf die Anmelden- oder Kaufen-Schaltfläche. Daraufhin öffnet sich ein Modalfenster, in dem er sich über das Handyspiel anmelden kann.

2. Der Nutzer klickt auf Über Handyspiel anmelden.
3. Der Nutzer wird zum Spiel und dann automatisch als autorisierter Nutzer zurück zum Web Shop weitergeleitet.

In der Desktop-Version

1. Ein nicht autorisierter Nutzer klickt im Web Shop auf die Anmelden- oder Kaufen-Schaltfläche. Daraufhin öffnet sich ein Modalfenster zur Anmeldung bei der mobilen Version des Spiels per QR-Code.

2. Der Nutzer scannt den QR-Code mit seinem Mobilgerät.
3. Der Web Shop öffnet sich auf dem Mobilgerät des Nutzers.
4. Der Nutzer wird automatisch zum Spiel und dann als authentifizierter Nutzer zurück zum Web Shop weitergeleitet.

Interaktionsablauf

Einrichtung

Aufseiten des Spiels

1. Registrieren Sie in den Einstellungen Ihrer Spiele-App ein URL-Schema, um das Spiel über einen Deep Link zu öffnen:
   • in Android-Anwendungen – in der Datei AndroidManifest.xml
   • in iOS-Anwendungen – in der Datei Info.plist

Wenn sich ein Nutzer nach der Registrierung des Schemas über das Spiel im Web Shop authentifiziert, sollte sich das Spiel unter der angegebenen Adresse öffnen.

URL-Schema für die Registrierung eines Spiels (Beispiel):
gamename://authorize?operationPayload=<VALUE>, wobei:
• gamename der Name Ihres Spiels ist, das auf einem Mobilgerät geöffnet werden soll.
• authorize eine beispielhafte Aktion ist, die nach dem Öffnen des Spiels ausgeführt werden soll. Verwenden Sie den jeweiligen Aktionsnamen aus dem Betriebssystem Ihrer Anwendung.
• operationPayload=<VALUE> ein zusätzlicher Parameter ist, der Informationen für die Tokengenerierung während der Authentifizierung enthält.

Beispiele:

• URL-Schema in iOS-Anwendungen registrieren
• URL-Schema in Android-Anwendungen registrieren

Copy

Full screen

Small screen

• xml

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>gamename</string>
      </array>
    </dict>
  </array>

Copy

Full screen

Small screen

• xml

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="gamename" android:host="authorize" />
</intent-filter>

2. Implementieren Sie, dass ein Autorisierungstoken im JWT-Format mithilfe der spielpezifischen Benutzer-ID generiert wird.

Die Xsolla-API nutzt die Basisauthentifizierung. Alle API-Anfragen müssen den Header Authorization: Basic enthalten, wobei your_authorization_basic_key das gemäß dem Base64-Standard codierte client_id:client_secret-Paar ist.

Der OAuth 2.0-Client für die Serverauthentifizierung wird im Kundenportal eingerichtet. Detaillierte Anweisungen finden Sie in der Dokumentation.

Aufruf der API-Methode mittels curl für die Generierung des Benutzertokens (Beispiel):

curl -X 'POST' \
'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
-H 'Accept: /' \
-H 'Content-Type: application/json' \
-H 'Authorization: Basic <Base64Encoded(client_id:client_secret)>' \
-d '{
 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 "settings": {
   "projectId": 123456,
   "merchantId": 123456
 },
 "user": {
   "id": "123",
   "country": "US"
 }
 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
}'

Die Antwort sieht in etwa wie folgt aus: {token="JWT_TOKEN"}.

3. Fügen Sie ein Pop-up-Fenster mit einer Benachrichtigung über die erfolgreiche Autorisierung hinzu (optional).
4. Implementieren Sie, dass der Web Shop im Browser unter Verwendung des abgerufenen Benutzertokens geöffnet wird.

Beispiel für eine URL zum Öffnen des Web Shops im Browser für einen autorisierten Nutzer:
• https:​//example.com/?token={token}, wenn Sie eine benutzerdefinierte Domain verwenden
• https:​//example.xsolla.site/?token={token}, wenn Sie eine Xsolla-Domain verwenden

wobei {token} der Autorisierungstoken des Nutzers ist.

Innerhalb von Site Builder

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Site Builder.
2. Klicken Sie bei der gewünschten Web-Shop-Seite auf Konfigurieren.
3. Wechseln Sie zu den Login-Einstellungen, und wählen Sie Deep Link.

4. Geben Sie im Feld Deep-Link-URL den Link für die Benutzerauthentifizierung ein.

5. Wenn Sie einen Fast Login-Block auf der Website platziert haben:
   1. Wechseln Sie zum Fast Login-Block.
   2. Passen Sie in den Blockeinstellungen den Anzeigestil für die QR-Code-Anmeldeschaltfläche an.

6. Klicken Sie auf Vorschau, um die Authentifizierung zu überprüfen.
7. Klicken Sie auf Veröffentlichen, um die Website zu veröffentlichen.

Ablauf für den Nutzer

1. Der Nutzer öffnet den Web Shop, für den die Authentifizierung über Xsolla Login konfiguriert ist.
2. Der Nutzer klickt bei dem ausgewählten Artikel auf die Schaltfläche “Kaufen”, auf die Schaltfläche “Anmelden” in der oberen Leiste oder auf die Schaltfläche “Anmelden” im Block Fast Login.
3. Daraufhin öffnet sich ein Modalfenster, darin werden die in Xsolla Login eingerichteten Autorisierungsmethoden angezeigt.

4. Der Nutzer fährt mit der Autorisierung fort und gibt ggf. weitere Daten ein.
5. Das System prüft, ob der Nutzer im Spiel existiert. Wenn der Nutzer im Spiel existiert, wird er im Web Shop autorisiert. Andernfalls wird eine Fehlermeldung angezeigt.

Wie komme ich dazu

1. Wechseln Sie im Baukasten Ihrer Website zum Block Login-Einstellungen.

2. Wählen Sie die Autorisierungsoption Xsolla Login aus.
3. Wählen Sie in der Drop-down-Liste Neuer Login aus.

4. Wechseln Sie aus dem Modalfenster zu den Login-Projekteinstellungen oder klicken Sie im Block Xsolla Login auf Konfigurieren Sie die Authentifizierungsmethoden.

5. Benutzerdatenspeicher verknüpfen.

Je nachdem, wo die Nutzerdaten gespeichert sind, sind verschiedene Produktfunktionen verfügbar (siehe Vergleich der Nutzerdatenspeicher-Möglichkeiten).

Xsolla-Speicher

Wenn Sie möchten, dass Login die gesamte Authentifizierungslogik verarbeitet, verknüpfen Sie den Xsolla-Speicher. Infolgedessen stehen Ihnen flexiblere Einstellungen zur Verfügung.

Wenn Sie ein Login-Projekt erstellen, wird standardmäßig der Xsolla-Speicher verknüpft, es sind keine weiteren Schritte zur Konfiguration erforderlich. Gehen Sie wie folgt vor, wenn Sie den standardmäßigen Speichertyp geändert haben und den Xsolla-Speicher erneut verknüpfen müssen:

1. Scrollen Sie zum Block Nutzerdatenbank, und klicken Sie auf Speicher.
2. Wählen Sie Xsolla-Speicher aus, und klicken Sie auf Speichern.

PlayFab-Speicher

Wenn Sie die PlayFab-Funktionen für die Arbeit mit Benutzern verwenden möchten, verknüpfen Sie den PlayFab-Speicher. Im Speicher werden folgende Nutzerdaten hinterlegt:

• Benutzername
• E-Mail-Adresse des Benutzers
• Benutzerpasswort
• Felder aus einem erweiterten Registrierungsformular, sofern das Formular eingerichtet ist

Der PlayFab-Speicher ermöglicht Ihnen den Zugriff auf folgende Funktionen:

• Benutzerregistrierung
• Authentifizierung über E-Mail-Adresse oder Benutzername und Passwort
• Authentifizierung über Twitch
• Zurücksetzen von Benutzerpasswörtern
• Benutzer sperren

So verknüpfen Sie den Speicher:

1. Scrollen Sie zum Block Nutzerdatenbank, und klicken Sie auf Speicher.
2. Wählen Sie PlayFab aus.
3. Geben Sie im Feld Titel-ID den Wert des gleichnamigen Felds aus Ihrem PlayFab-Konto ein.
4. Klicken Sie auf Speichern.

Firebase-Speicher

Wenn Sie die Firebase-Funktionen für Benutzer verwenden möchten, verknüpfen Sie den Firebase-Speicher. In diesem Speicher sind folgende Nutzerdaten hinterlegt:

• Benutzername
• E-Mail-Adresse des Benutzers
• Benutzerpasswort
• Felder aus einem erweiterten Registrierungsformular, sofern das Formular eingerichtet ist

1. Scrollen Sie zum Block Nutzerdatenbank, und klicken Sie auf Speicher.
2. Wählen Sie Firebase aus.
3. Geben Sie im Feld API-Schlüssel den Wert des gleichnamigen Felds aus Ihrem Firebase-Konto ein.
4. Klicken Sie auf Speichern.

Kundenseitiger Speicher

Verknüpfen Sie den eigenen Speicher, wenn Sie ein eigenes Autorisierungssystem verwenden und Benutzerdaten aufseiten Ihrer Anwendung speichern.

Der eigene Speicher ermöglicht Ihnen den Zugriff auf folgende Funktionen:

• Benutzerregistrierung
• Authentifizierung über E-Mail-Adresse oder Benutzername und Passwort
• Passwortlose Authentifizierung über eine Telefonnummer
• Authentifizierung über soziale Netzwerke
• Zurücksetzen von Benutzerpasswörtern

1. Verknüpfen Sie den eigenen Speicher.
2. Konfigurieren Sie die Verarbeitung von Anfragen vom Xsolla Login-Server.

Kundenseitigen Speicher verknüpfen

1. Scrollen Sie zum Block Nutzerdatenbank, und klicken Sie auf Speicher.
2. Wählen Sie Eigener Speicher aus.
3. Geben Sie die URLs ein, an die die API-Anfragen gesendet werden sollen:
   • URL für die Nutzerverifizierung
   • URL für neue Nutzer
   • URL zum Zurücksetzen des Passworts
   • URL für das passwortlose Anmelden mittels Mobiltelefons
   • URL für die Anmeldung über soziale Netzwerke
4. Klicken Sie auf Speichern.
5. Implementieren Sie für die festgelegten URLs eine API, die wie folgt antwortet:
   • mit dem Statuscode HTTP 200/HTTP 205 bei erfolgreichen Anfragen. Bei Bedarf kann ein JSON mit zusätzlichen Benutzerdaten in den Antwortrumpf eingefügt werden. Die übermittelten Daten werden in ein JWT geschrieben (Parameter partner_data).
   • mit einem sonstigen HTTP-Statuscode bei einer fehlgeschlagenen Anfrage.

Verarbeitung von Anfragen vom Xsolla Login-Server einrichten

Anfragen des Xsolla Login-Servers werden samt Header Authorization: Bearer <JWT> an die von Ihnen im Kundenportal angegebenen URLs gesendet. Der JWT wird mit dem geheimen Schlüssel Ihres Projekts unterzeichnet.

So verarbeiten Sie eine Anfrage:

1. Validieren Sie einen empfangenen JWT.
2. Dekodieren Sie bei erfolgreicher Validierung das JWT und stellen Sie sicher, dass es die Claims aus der folgenden Tabelle enthält. Finden und verwenden Sie eine Bibliothek für die Dekodierung.

{
  "exp": 1573635020,
  "iat": 1573634600,
  "iss": "https://login.xsolla.com",
  "request_type": "gateway_request",
  "xsolla_login_project_id": "00000000-0000-0000-0000-000000000000"
}