Freigeben über

Einrichten der PlayFab-Authentifizierung mit Facebook und HTML5

  • Artikel

Dieses Tutorial soll Sie durch die PlayFab-Authentifizierung mit Facebook und HTML5/JavaScript führen.

Voraussetzungen

Notiz

Wenn Sie nicht sicher sind, ob Sie über die richtigen Anforderungen für diese Aktivität verfügen, lesen Sie das Tutorial Ausführen eines HTTP-Servers zu Testzwecken .

Server und Domäne

Im Rahmen der Anforderungen zum Einrichten Ihrer PlayFab-Authentifizierung müssen Sie über einen Server mit einer gültigen Domäne verfügen, um zu folgen. Wenn Sie noch nicht über eine registrierte Domäne und einen Remotewebserver verfügen, folgen Sie unserem Tutorial Ausführen eines HTTP-Servers zum Testen , um einen lokalen Webserver mit einem gültigen Domänennamen auszuführen.

In diesem Leitfaden wird davon ausgegangen, dass Ihre Domäne ist ['http://playfab.example'](http://playfab.example).

Registrieren einer Facebook-Anwendung

Navigieren Sie zunächst zum Facebook Developer Portal.

  1. Wählen Sie die Schaltfläche Meine Apps aus.

Facebook hinzufügen einer neuen App

  1. Wählen Sie App erstellen aus, um eine neue App zu erstellen.

Facebook Erstellen einer neuen App

Ein neues Anwendungs-Popupfenster wird geöffnet.

  1. Geben Sie im Feld unter App-Name hinzufügen einen Namen für Ihre Anwendung ein.
  2. Geben Sie eine Kontakt-E-Mail-Adresse in das Feld unter App-Kontakt-E-Mail ein.
  3. Wählen Sie die Schaltfläche App erstellen aus, um sie zu speichern.

Notiz

Stellen Sie sicher, dass Sie Ihren eigenen eindeutigen Anwendungsnamen und ihre eigene E-Mail-Adresse erstellen, wie im folgenden Beispiel gezeigt.

neue App-ID Facebook

  1. Navigieren Sie zur Registerkarte Einstellungen .
  2. Wählen Sie die Unterregisterkarte Basic aus.
  3. Suchen Sie Ihre App-ID.

Notiz

Kopieren Sie Ihre App-ID an einen sicheren Ort. Wir verwenden sie später zum Einrichten des Facebook SDK.

Facebook App-ID speichern

  1. Wechseln Sie zum Menü auf der linken Seite des Bildschirms, und wählen Sie das Element Produkte aus.
  2. Suchen Sie im Bereich Facebook Anmeldungnach Konfigurieren, und wählen Sie im Dropdownmenü Einstellungen aus.

erste Schritte Facebook Anmeldung

Die Seite sollte geöffnet werden, um das unten gezeigte Beispiel anzuzeigen.

  1. Vergewissern Sie sich, dass sowohl das Client-OAuth als auch das Web-OAuth aktiviert sind (mit Ja markiert).
  2. Legen Sie die gültigen OAuth-Umleitungs-URIs auf Ihren eigenen Authentifizierungsseiten-URI fest.

Notiz

Dies ist playfab.example in Ihrem Fall der Fall.

Facebook Produkteinstellungen für die Anmeldung

Auf dem Bildschirm Client-OAuth-Einstellungen :

  1. Vergewissern Sie sich, dass die Anmeldung mit dem JavaScript SDK aktiviert ist (als Ja markiert)
  2. Legen Sie die gültigen OAuth-Umleitungs-URIs auf Ihren eigenen Authentifizierungsseiten-URI fest.

Notiz

Dies ist playfab.example in Ihrem Fall der Fall. 3. Wählen Sie Änderungen speichern aus, um einen Commit auszuführen.

Facebook Festlegen des OAuth-Umleitungs-URI

Auf der Seite Anwendungs-Manager :

  • Öffnen Sie einstellungen/Basic (1) in Ihrem Menü.
  • Wählen Sie die Schaltfläche Plattform hinzufügen (2) aus.

Facebook Application Manager– Plattform hinzufügen

Auf dem Bildschirm wird ein Popupfenster angezeigt:

  1. Wählen Sie das Symbol Website aus.
  2. Wählen Sie dann Weiter aus.

Facebook Optionen für Plattformwebsite auswählen

Der Bereich "Websitekonfiguration " sollte jetzt angezeigt werden.

  1. Geben Sie im Feld Website-URL Ihre Authentifizierungsseiten-URL ein (in playfab.example Ihrem Fall).
  2. Wählen Sie Änderungen zum Commit speichern aus.

Facebook Websitekonfigurationsbereich

Testen

Verwenden Sie die folgende HTML-Datei, um Ihre PlayFab-Authentifizierung mit Facebook zu testen.

Notiz

Stellen Sie sicher, dass Sie YOUR-APPLICATION-ID und YOUR-PLAYFAB-TITLE durch Ihre eigenen ersetzen.

<!DOCTYPE html>
<html>
<head>
   <script>
        // This function will be called when Facebook SDK is loaded
        window.fbAsyncInit = function() {

            // Make sure to use your own App ID for the configuration
            FB.init({
                appId      : 'YOUR-APPLICATION-ID',
                xfbml      : true,
                version    : 'v2.9'
            });

            // Record PageView event for analytics
            FB.AppEvents.logPageView();
        };

        // Facebook SDK loader. Creates a script entry to load the SDK
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Facebook Auth Example</p>
    <button onclick="loginWithFacebook()">Log In with Facebook</button>
    <script>
        // This method is invoked when you press the button
        function loginWithFacebook() {
            logLine("Logging in via Facebook...");

            // Standard practice: make call to FB.login.
            // This will show Facebook popup window. To prevent browsers from locking it,
            // always make sure to call it from Button click event
            FB.login(function(response){
                if(!response.authResponse){
                    logLine("Problem authenticating via Facebook!");
                } else {
                    loginWithPlayfab(response.authResponse.accessToken);
                }
            });
        }

        function loginWithPlayfab(accessToken){

            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithFacebook API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithFacebook({
                AccessToken: accessToken,
                TitleId: "YOUR-PLAYFAB-TITLE",
                CreateAccount: true
            }, onPlayFabResponse);
        }

        // Handles response from playfab.
        function onPlayFabResponse(response, error) {
            if (response)
                logLine("Response: " + JSON.stringify(response));
            if (error)
                logLine("Error: " + JSON.stringify(error));
        }

        function logLine(message) {
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>

Fordern Sie die folgende Datei von Ihrem Server an, indem Sie die Domäne verwenden, die Sie während Facebook Anwendungskonfiguration (playfab.examplein unserem Fall) eingerichtet haben.

  1. Sobald die Seite Facebook Authentifizierungsbeispiel geöffnet wird, wählen Sie Mit Facebook Schaltfläche anmelden aus.
  2. Befolgen Sie alle Facebook Anweisungen im Popupfenster.

Sehen Sie sich die Ausgabe an.

Facebook-Authentifizierungsbeispiel

Sie erhalten ein PlayFab-Sitzungsticket. An diesem Punkt haben Sie PlayFab und Facebook Authentifizierung mit HTML5 und JavaScript erfolgreich konfiguriert.