Facebook と HTML5 を使用した PlayFab 認証のセットアップ

このチュートリアルでは、Facebook と HTML5/JavaScript を使用した PlayFab 認証について案内します。

要件

テスト用の Facebook アカウント。
登録済みの PlayFab タイトル。
サインインの基本とベストプラクティスに精通していること。
静的 HTML ファイルを提供するための、有効なドメイン名を持つ最小限のサーバー。

このアクティビティに必要な要件を満たしているかどうか不明な場合は、テスト用の HTTP サーバーの実行チュートリアルをご覧ください。

サーバーとドメイン

PlayFab 認証をセットアップするための要件の一環として、有効なドメインを持つサーバーが必要です。登録済みドメインとリモート Web サーバーがまだない場合は、テスト用の HTTP サーバーの実行チュートリアルに従って、有効なドメイン名でローカル Web サーバーを実行してください。このガイド全体を通じて、ドメインは ['http://playfab.example'](http://playfab.example) であると想定します。

Facebook アプリケーションを登録する

まず、Facebook 開発者ポータルに移動します。

My Apps ボタンを選択します。

Create App を選択して、新しいアプリを作成します。

新しい アプリケーション ポップアップが開きます。

Add an app name の下のフィールドに アプリケーション の名前を入力します。
App contact email の下のフィールドに連絡先メールアドレスを入力します。
Create app ボタンを選択して保存します。

以下の例のように、独自の一意なアプリケーション名とメールを設定してください。

Settings タブに移動します。
Basic サブタブを選択します。
App ID を見つけます。

App ID を安全な場所にコピーしておいてください。後で Facebook SDK のセットアップに使用します。

画面の左側のメニューに移動し、Products 項目を選択します。
Facebook Login エリアで Configure を見つけ、ドロップダウンメニューから Settings を選択します。

ページが開くと、次のような例が表示されます。

Client OAuth と Web OAuth の両方がオン (Yes としてマーク) されていることを確認します。
Valid OAuth redirect URIs を独自の認証ページ URI に設定します。

この場合、playfab.example になります。

Client OAuth Settings 画面で:

Login with the JavaScript SDK がオン (Yes としてマーク) されていることを確認します
Valid OAuth redirect URIs を独自の認証ページ URI に設定します。

この場合、playfab.example になります。

Save Changes を選択して確定します。

Application Manager ページで:

メニューの Settings/Basic (1) を開きます。
Add Platform (2) ボタンを選択します。

画面にポップアップが表示されます。

Website アイコン を選択します。
次に Next を選択します。

Website 構成パネルが表示されます。

Site URL フィールドに、認証ページの URL を入力します (この場合は playfab.example です)。
Save changes を選択して確定します。

テスト

次の HTML ファイルを使用して、Facebook を使用した PlayFab 認証をテストします。

YOUR-APPLICATION-ID と YOUR-PLAYFAB-TITLE は必ずご自身のものに置き換えてください。

<!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>

Facebook アプリケーション の構成中に設定したドメイン (この場合は playfab.example) を使用して、サーバーから次のファイルをリクエストします。

Facebook Auth Example ページが開いたら、Log In with Facebook ボタンを選択します。
ポップアップウィンドウの Facebook の指示に従います。

出力を確認します。 PlayFab セッションチケットを取得できます。これで、HTML5 と JavaScript を使用して PlayFab と Facebook の認証を正常に構成しました。

​要件

​サーバーとドメイン

​Facebook アプリケーションを登録する

​テスト

要件

サーバーとドメイン

Facebook アプリケーションを登録する

テスト