次の方法で共有

Facebook と HTML5 を使用して PlayFab 認証を設定する

  • [アーティクル]

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

要件

注意

このアクティビティの要件が満たされているかどうかが不明な場合は、「テストのために HTTP サーバーを実行する」チュートリアルを参照してください。

サーバーとドメイン

PlayFab 認証を設定するための要件の一部として、有効なドメインを持つサーバーが必要です。 登録済みのドメインとリモート Web サーバーをまだお持ちでない場合は、「テストのために HTTP サーバーを実行する」チュートリアルに従い、有効なドメイン名を持つローカル Web サーバーを実行してください。

このガイド全体を通して、ドメインが ['http://playfab.example'](http://playfab.example) であると想定します。

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

まず、Facebook のデベロッパー用ポータル に移動します。

  1. [マイ アプリ] ボタンを選択します。

Facebook での新しいアプリの追加

  1. [アプリの作成] を選択して、新しいアプリを作成します。

Facebook での新しいアプリの追加

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

  1. [アプリ名の追加] の下のフィールドにアプリケーションの名前を入力します。
  2. [アプリの連絡先メール] の下のフィールドに連絡先メール アドレスを入力します。
  3. [アプリの作成] ボタンを選択し、続行します。

注意

次の例に示すように、必ず一意のアプリケーション名とメール アドレスを使用してください。

Facebook の新しいアプリ ID

  1. [設定] タブに移動します。
  2. [基本] というサブのタブを選択します。
  3. アプリ ID を見つけます。

注意

アプリ ID を安全な場所にコピーしておいてください。これは後で Facebook SDK の設定に使用します。

Facebook のアプリ ID の保存

  1. 画面の左にあるメニューに移動し、[製品] の項目を選択します。
  2. [Facebook ログイン] 領域で [構成] を見つけて、ドロップダウン メニューから [設定] を選択します。

Facebook ログインの開始

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

  1. [クライアント OAuth] と [Web OAuth] の両方が有効 (Yes に設定) になっていることを確認します。
  2. [有効な OAuth リダイレクト URI] に認証ページの URI を設定します。

注意

この例では、playfab.example になります。

Facebook のログイン製品設定

[クライアント OAuth 設定] 画面で、次の操作を実行します。

  1. JavaScript SDK を使用したログイン がオンになっていることを確認します ([はい] とマークされています)
  2. [有効な OAuth リダイレクト URI] に認証ページの URI を設定します。

注意

この例では、playfab.example になります。 3. [変更を保存] を選択して適用します。

Facebook での OAuth リダイレクト URI の設定

[アプリケーション マネージャー]ページで次の操作を実行します。

  • メニューの [設定/基本] (1) を開きます。
  • [プラットフォームを追加] (2) ボタンを選択します。

Facebook アプリケーション マネージャーでのプラットフォームの追加

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

  1. Web サイト アイコン を選択します。
  2. [次へ] を選択します。

Facebook でのプラットフォーム Web サイト オプションの選択

Web サイト設定パネルが表示されます。

  1. [サイトURL] フィールドに、認証ページの URL (この例では、playfab.example になります) を入力します。
  2. [変更を保存] を選択して適用します。

Facebook の Web サイト設定パネル

テスト

以下の 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) を使用して、サーバーから以下のファイルを要求します。

  1. Facebook の認証例のページが開いたら、[Facebook を使用してログイン] ボタンを選択します。
  2. ポップアップ ウィンドウの Facebook の指示に従います。

出力を確認します。

Facebook の認証例

PlayFab セッション チケットを取得します。 これで、HTML5 と JavaScript を使用した PlayFab と Facebook の認証が正常に設定されました。