Anmeldung über soziale Netzwerke
Sie können den Benutzern Ihrer Anwendung gestatten, sich über ihr Social-Media-Konto anzumelden. Wenn sich der Benutzer zum ersten Mal über ein soziales Netzwerk anmeldet, wird automatisch ein neues Konto erstellt. Der Benutzer muss weder einen Benutzernamen noch eine E-Mail-Adresse oder andere Daten eingeben.
Es gibt zwei Wege, die Authentifizierung über soziale Netzwerke zu implementieren:
- Webbasierte Authentifizierung. In diesem Fall öffnet die Anwendung eine Eingabemaske im Browser, um die Authentifizierung über das ausgewählte soziale Netzwerk abzuschließen. Diese Option eignet sich sowohl für mobile Apps als auch für Desktop-Anwendungen.
- Native Authentifizierung. In diesem Fall erfolgt die Authentifizierung in der Social-Media-App auf dem Gerät des Benutzers. Diese Option ist nur für mobile Apps geeignet.
Soziale Netzwerke können als primäre oder alternative Authentifizierungsmethode Ihrer Anwendung dienen.
Wenn Sie soziale Netzwerke als alternative Authentifizierungsmethode verwenden, wird das Social-Media-Konto automatisch mit einem bestehenden Benutzerkonto verknüpft, sofern die folgenden Bedingungen erfüllt sind:
- Ein Benutzer, der sich mittels Benutzername/E-Mail-Adresse und Passwort registriert hat, meldet sich über sein Social-Media-Konto bei Ihrer Anwendung an.
- Das soziale Netzwerk gibt eine E-Mail-Adresse zurück.
- Die E-Mail-Adresse des Benutzers in einem sozialen Netzwerk stimmt überein mit der E-Mail-Adresse, die bei der Registrierung in Ihrer Anwendung angegeben wurde.
Ebenso können Sie die manuelle Verknüpfung eines sozialen Netzwerks implementieren.
Anleitungen
Das SDK unterstützt die folgenden Anbieter sozialer Netzwerke:
- Amazon
- Apple
- Baidu
- Battle.net
- Discord
- GitHub
- Kakao
- MSN
- Mail.ru
- Microsoft
- Naver
- Odnoklassniki
- PayPal
- Steam
- Twitch.tv
- VK
- Vimeo
- Xbox Live
- Yahoo
- Yandex
- YouTube
So richten Sie die Authentifizierung über Webdienste ein:
- Ergänzen Sie die Benutzeroberfläche der Anwendung um Schaltflächen für die Authentifizierung über soziale Netzwerke.
- Binden Sie im Kundenportal Social-Media-Dienste für ein Login-Projekt ein.
- Implementieren Sie die Authentifizierungslogik aufseiten der Anwendung.
Soziale Netzwerke für Login-Projekte im Kundenportal einbinden
- Öffnen Sie Ihr Projekt im Kundenportal.
- Klicken Sie in der Seitenleiste auf Login.
- Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
- Scrollen Sie zum Block Authentifizierung, und klicken Sie auf Anmeldung über soziale Netzwerke.
- Verknüpfen Sie die sozialen Netzwerke, über die sich die Spieler registrieren und bei der Anwendung anmelden dürfen:
- Klicken Sie auf das ⚙-Symbol und dann auf Verknüpfen, um ein soziales Netzwerk zu verknüpfen.
- Um mehrere soziale Netzwerke auf einmal zu verknüpfen, wählen Sie die gewünschten Anzeigebereiche aus (deren Umrandung färbt sich daraufhin grün). Klicken Sie danach auf das Drop-down-Menü Verwalten, und wählen Sie Verknüpfen aus.
- Um alle verfügbaren sozialen Netzwerke auf einmal zu verknüpfen, klicken Sie auf Alle auswählen. Klicken Sie danach auf das Drop-down-Menü Verwalten, und wählen Sie Verknüpfen aus.
Integration aufseiten der Anwendung
Implementieren Sie die folgende Logik, die beim Klick auf die Social-Media-Anmeldeschaltfläche abläuft:
- Öffnen Sie die Registrierungs-/Anmeldeseite mithilfe der SDK-Methode
AuthenticateViaSocialNetwork
. - Abonnieren Sie die Ereignisse
SuccessCallback
,ErrorCallback
undCancelCallback
. - Besorgen Sie sich den Token aus dem Parameter
LoginData
oder durch Aufruf der MethodeGetLoginData
, und verwenden Sie ihn in Anfragen an die Xsolla-Server.
SuccessCallback
einen Autorisierungstoken im Parameter LoginData
zurück. Der Token wird lokal in der Methode GetLoginData
zwischengespeichert.Eine beispielhafte Implementierung dieser Logik ist im BP_LoginController
-Blueprint des Demoprojekts verfügbar.
Die native Authentifizierung ermöglicht es Spielern, sich über installierte Anwendungen, die soziale Netzwerke nutzen, bei Ihrer Anwendung anzumelden. Derzeit ist im SDK die native Authentifizierung über die folgenden sozialen Netzwerke implementiert:
So konfigurieren Sie die native Authentifizierung:
- Ergänzen Sie die Benutzeroberfläche der Anwendung um Schaltflächen für die Authentifizierung über soziale Netzwerke.
- Erstellen Sie Ihre UE-Projekt-Build für Android.
- Konfigurieren Sie die Anwendung im Entwicklerkonto des entsprechenden sozialen Netzwerks:
- Gehen Sie für die Authentifizierung über Facebook wie folgt vor:
- Registrieren Sie sich, und erstellen Sie eine neue Anwendung.
- Konfigurieren Sie die Anwendungsseite in Ihrem Facebook-Entwicklerkonto.
- Konfigurieren Sie für die Authentifizierung über Google das Projekt in der Google API Console.
- Gehen Sie für die Authentifizierung über WeChat wie folgt vor:
- Registrieren Sie sich, und erstellen Sie eine neue Anwendung.
- Reichen Sie die Anwendung zur Überprüfung ein.
- Gehen Sie für die Authentifizierung über QQ wie folgt vor:
- Registrieren Sie sich, und erstellen Sie eine neue Anwendung.
- Reichen Sie die Anwendung zur Überprüfung ein.
- Gehen Sie für die Authentifizierung über Facebook wie folgt vor:
- Konfigurieren Sie die Authentifizierung über soziale Netzwerke aufseiten von Xsolla:
- Für Facebook bzw. Google müssen Sie das jeweilige soziale Netzwerk im Kundenportal einbinden.
- Für WeChat und QQ müssen Sie sich an Ihren Customer Success Manager wenden oder eine E-Mail an csm@xsolla.com senden.
- Konfigurieren Sie das SDK für Ihr Unreal Engine-Projekt.
- Implementieren Sie die Authentifizierungslogik aufseiten der Anwendung.
Anwendungsseite in Ihrem Facebook-Entwicklerkonto einrichten
- Wechseln Sie zu den Projekteinstellungen des Facebook-Entwicklerkontos.
- Navigieren Sie zu Einstellungen > Allgemeines.
- Klicken Sie auf Plattform hinzufügen, und wählen Sie Android aus.
- Geben Sie den Paketnamen Ihrer Android-Anwendung im Feld Google Play Package-Name an.
- Geben Sie im Feld Klassenname einen zulässigen Klassennamen der Aktivität an (Standardwert:
com.epicgames.ue4.GameActivity
). - Generieren Sie einen Hash-Key, und geben Sie ihn im Feld Key-Hashes an.
- Klicken Sie auf Änderungen speichern.
Zur weiteren Konfiguration der nativen Authentifizierung benötigen Sie Folgendes:
- App-ID und App-Geheimcode. Beide finden Sie in den Projekteinstellungen unter Einstellungen > Allgemeines.
- Client Token. Diesen finden Sie unter Einstellungen > Erweitert > Sicherheit.
Projekt in der Google API Console einrichten
- Wechseln Sie zur Google API Console.
- Klicken Sie auf Neues Projekt.
- Geben Sie den Projektnamen und den Speicherort an, und klicken Sie auf Erstellen.
- Wechseln Sie zum erstellten Projekt, und klicken Sie im Seitenmenü auf OAuth-Zustimmungsbildschirm.
- Wählen Sie die Option Extern aus, und klicken Sie auf Erstellen.
- Geben Sie die nötigen Parameter an, und klicken Sie auf Speichern.
- Klicken Sie im Seitenmenü auf Anmeldedaten.
- Erstellen Sie einen OAuth 2.0-Client für die Android-Anwendung:
- Klicken Sie auf Anmeldedaten erstellen, und wählen Sie OAuth-Client-ID aus.
- Wählen Sie unter Anwendungstyp die Option Android aus.
- Geben Sie einen Namen an.
- Geben Sie den Paketnamen aus Ihrer Android-Anwendung im Feld Paketname an.
- Rufen Sie den SHA-Schlüssel ab.
- Geben Sie den im vorherigen Schritt generierten SHA-Schlüssel im Feld SHA-1-Zertifikatfingerabdruck an.
- Klicken Sie auf Erstellen.
- Klicken Sie auf OK.
- Erstellen Sie einen OAuth 2.0-Client für die Webanwendung:
- Klicken Sie auf Anmeldedaten erstellen, und wählen Sie OAuth-Client-ID aus.
- Wählen Sie unter Anwendungstyp die Option Webanwendung aus.
- Geben Sie einen Namen an.
- Klicken Sie unter Autorisierte Weiterleitungs-URIs auf URI hinzufügen, und geben Sie folgende URI an:
https://login.xsolla.com/api/social/oauth2/callback
. - Klicken Sie auf Erstellen.
- Klicken Sie auf OK.
Zur weiteren Konfiguration der nativen Authentifizierung benötigen Sie eine Client-ID und einen Clientschlüssel. Beide finden Sie in den Einstellungen der Client-ID für die Webanwendung.
Soziale Netzwerke für Login-Projekte im Kundenportal einbinden
- Öffnen Sie Ihr Projekt im Kundenportal.
- Klicken Sie in der Seitenleiste auf Login.
- Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
- Scrollen Sie zum Block Authentifizierung, und klicken Sie auf Anmeldung über soziale Netzwerke.
- Klicken Sie auf der Karte des gewünschten sozialen Netzwerks, rechts neben dem Titel, auf das ⚙-Symbol und dann auf Verknüpfen.
SDK für das Unreal Engine-Projekt einrichten
- Wechseln Sie zu Ihrem Unreal Engine-Projekt.
- Navigieren Sie zu
Settings > Project Settings > Plugins > Xsolla Settings > Android . - Geben Sie die Anwendungs-ID an:
- Geben Sie die App-ID aus dem Facebook-Entwicklerkonto im Feld
Facebook App Id an. - Geben Sie den Client Token aus dem Facebook-Entwicklerkonto im Feld
Facebook Client Token an. - Geben Sie die Client-ID einer Webanwendung aus der Google API Console im Feld
Google App Id an. - Geben Sie die AppID aus den WeChat-Anwendungseinstellungen im Feld
We Chat App Id an. - Geben Sie die AppID aus den QQ-Anwendungseinstellungen im Feld
QQ App Id an.
- Geben Sie die App-ID aus dem Facebook-Entwicklerkonto im Feld
Integration aufseiten der Anwendung
Wenn Sie auf die Schaltfläche für die soziale Anmeldung klicken, implementieren Sie den Methodenaufruf LaunchNativeSocialAuthentication
. Ein Implementierungsbeispiel ist in der Methode AuthenticateViaSocialNetwork
des BP_LoginController
-Controllers im Demoprojekt enthalten.
Nützliche Links
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.