Benutzerauthentifizierung einrichten

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.

4. Wenn Ihre Website mehrere Seiten umfasst, wählen Sie die gewünschte Seite aus:
   1. Klicken Sie oben im Editor auf den Titel der aktuellen Seite.
   2. Wählen Sie die gewünschte Seite aus der Drop-down-Liste aus.
5. Wechseln Sie zum Block Login-Einstellungen.

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

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

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

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Nutzer
    participant WS as Web Shop
    participant B as Browser
    participant MOS as Betriebssystem
    participant G as Spiel
    participant LA as Login API
    U->>WS: klickt auf Schaltfläche, um sich über das Handyspiel anzumelden
    activate WS
    WS->>B: leitet den Nutzer über einen Deep Link weiter
    activate B
    B->>MOS: führt Systemaufruf zum Öffnen des Handyspiels aus
    activate MOS
    MOS->>G: öffnet Handyspiel
    activate G
    G->>LA: generiert Autorisierungstoken
    activate LA
    LA-->>G: gibt Autorisierungstoken zurück
    deactivate LA
    G->>MOS: führt Systemaufruf zum Öffnen des Browser auf (Token ist in der URL enthalten)
    deactivate G
    MOS-->>B: öffnet den Browser mit Token in der URL
    deactivate MOS
    B-->>WS: öffnet Web-Shop-Seite für autorisierte Nutzer
    deactivate B
    WS-->>U: zeigt Nutzernamen im Header an
    deactivate WS

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.

Link zum Öffnen des Spiels über ein registriertes URL-Schema (Beispiel):

scheme://authorize?operationPayload=<VALUE>, wobei:
• scheme eine eindeutige Kennung Ihres Spiels ist, die in einem benutzerdefinierten URL-Schema verwendet wird, um die App zu starten und zur gewünschten Aktion zu navigieren.
• authorize ein beispielhafter Aktionsname ist, der nach dem Start des Spiels ausgeführt werden soll. Verwenden Sie einen Aktionsnamen, der den Aktionen im Betriebssystem Ihrer Anwendung entspricht.
• operationPayload=<VALUE> ein Parameter ist, der Informationen für die Tokengenerierung während der Authentifizierung enthält. Als Wert dienen von Xsolla generierte Base64-kodierte Daten.

Beispiele:

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

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</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):

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 7 "settings": {
 8   "projectId": 123456,
 9   "merchantId": 123456
10 },
11 "user": {
12   "id": "123",
13   "country": "US"
14 }
15 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
16}'

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

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

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Nutzer
    participant WS as Web Shop
    participant B as Browser
    participant MOS as Betriebssystem
    participant G as Spiel
    participant LA as Login API
    U->>WS: klickt auf Schaltfläche, um sich über das Handyspiel anzumelden
    activate WS
    WS->>B: leitet den Nutzer über einen Deep Link weiter
    activate B
    B->>MOS: führt Systemaufruf zum Öffnen des Handyspiels aus
    activate MOS
    MOS->>G: öffnet Handyspiel
    activate G
    G->>LA: generiert Autorisierungstoken
    activate LA
    LA-->>G: gibt Autorisierungstoken zurück
    deactivate LA
    G->>MOS: führt Systemaufruf zum Öffnen des Browser auf (Token ist in der URL enthalten)
    deactivate G
    MOS-->>B: öffnet den Browser mit Token in der URL
    deactivate MOS
    B-->>WS: öffnet Web-Shop-Seite für autorisierte Nutzer
    deactivate B
    WS-->>U: zeigt Nutzernamen im Header an
    deactivate WS

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.

Link zum Öffnen des Spiels über ein registriertes URL-Schema (Beispiel):

scheme://authorize?operationPayload=<VALUE>, wobei:
• scheme eine eindeutige Kennung Ihres Spiels ist, die in einem benutzerdefinierten URL-Schema verwendet wird, um die App zu starten und zur gewünschten Aktion zu navigieren.
• authorize ein beispielhafter Aktionsname ist, der nach dem Start des Spiels ausgeführt werden soll. Verwenden Sie einen Aktionsnamen, der den Aktionen im Betriebssystem Ihrer Anwendung entspricht.
• operationPayload=<VALUE> ein Parameter ist, der Informationen für die Tokengenerierung während der Authentifizierung enthält. Als Wert dienen von Xsolla generierte Base64-kodierte Daten.

Beispiele:

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

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</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):

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'Accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "string",
 7 "settings": {
 8   "projectId": 0,
 9   "merchantId": 0
10 },
11 "user": {
12   "id": "string",
13   "country": "string",
14   "name": "string",
15   "picture": "string"
16 },
17 "operationPayload": "eyJ4c29sbGF1aWQiOiIzNzE5Nzc5NjU1MDE2Nzc2MzcifQ%3D%3D"
18}'

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

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 Xsolla-Login-Authentifizierung konfiguriert ist.
2. Der Nutzer klickt entweder beim ausgewählten Artikel auf “Kaufen”, in der oberen Leiste auf “Anmelden” oder im Block Fast Login auf “Anmelden”.
3. Daraufhin öffnet sich ein Modalfenster mit verschiedenen Autorisierungsmethoden.
4. Der Nutzer fährt mit der Autorisierung fort und gibt bei Bedarf zusätzliche Daten ein.
5. Das System prüft, ob der Nutzer im Spiel registriert ist. Wenn ja, wird der Nutzer im Web Shop autorisiert. Andernfalls wird eine Fehlermeldung angezeigt.

Einrichtung

2. Klicken Sie beim gewünschten Web Shop, für den die Xsolla-Login-Authentifizierung eingerichtet ist, auf das •••-Symbol, und wählen Sie Konfigurieren.
3. Klicken Sie auf Zum Baukasten, und scrollen Sie zum Block Login-Einstellungen.

4. Wählen Sie als Autorisierungsmethode die Option Xsolla Login.

5. Wählen Sie in der Drop-down-Liste eine Authentifizierungsoption aus:
   • eine vorhandene, sofern Xsolla Login in Ihrem Projekt bereits konfiguriert ist
   • Neuer Login, wenn es für den Web Shop noch keine Authentifizierungsoption gibt

Wenn Sie die Website zum ersten Mal in der Vorschau betrachten oder veröffentlichen, werden die Vorschau-URL und die Domain des Web Shops automatisch in das Feld Rückruf-URL in den Einstellungen der Authentifizierungsoptionen eingetragen. Der Nutzer wird in den folgenden Fällen zu diesen URLs weitergeleitet:

• nach erfolgreicher Authentifizierung
• nach Bestätigung der E-Mail-Adresse
• nach dem Zurücksetzen des Passworts
• bei fehlgeschlagener Authentifizierung

Wenn Sie die Domain des Web Shops ändern, werden diese URLs automatisch aktualisiert.

6. Richten Sie die sozialen Netzwerke ein, mit denen sich Nutzer im Web Shop anmelden können (optional). Weitere Informationen finden Sie in der Dokumentation Anmeldung über soziale Netzwerke.

7. Wenn Sie keine Nutzerdaten bei Xsolla speichern möchten, müssen Sie einen anderen Nutzerdatenspeicher verknüpfen (optional). Weitere Informationen finden Sie in der Dokumentation Nutzerdatenspeicher verknüpfen.

Die verfügbaren Funktionen hängen vom ausgewählten Nutzerdatenspeicher ab. Weitere Informationen finden Sie in der Dokumentation Vergleich der Nutzerdatenspeicher-Möglichkeiten.

Ablauf für den Nutzer

1. Der Nutzer besucht den Web Shop zum ersten Mal, wobei die Authentifizierung über eine verknüpfte Benutzer-ID bereits konfiguriert sein muss.
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 bei Bedarf zusätzliche Daten ein.

5. Nach erfolgreicher Autorisierung über Xsolla Login öffnet sich ein Modalfenster, in dem der Nutzer seine ID aus dem Spiel verknüpft.

6. Das System überprüft, ob der Nutzer existiert. Wenn der Nutzer mit der angegebenen ID im Spiel vorhanden ist, wird er im Web Shop autorisiert. Andernfalls wird eine Fehlermeldung angezeigt.

Vorgehensweise

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.

4. Wenn Ihre Website mehrere Seiten umfasst, wählen Sie die gewünschte Seite aus:
   1. Klicken Sie oben im Editor auf den Titel der aktuellen Seite.
   2. Wählen Sie die gewünschte Seite aus der Drop-down-Liste aus.
5. Wechseln Sie zum Block Login-Einstellungen.

6. Wählen Sie die Option Anmeldung mit verknüpfter Benutzer-ID.
7. Wählen Sie in der Drop-down-Liste die Option Neuer Login oder eines der erstellten Projekte.
8. Geben Sie die URL an, unter der Sie Webhooks empfangen möchten.