> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 Facebook 和 HTML5 設定 PlayFab 驗證

> 逐步教學課程，說明如何使用 HTML5 和 JavaScript 將 Facebook 登入新增至 PlayFab 遊戲，涵蓋 Facebook 應用程式註冊和玩家驗證。

本教學課程旨在引導您使用 Facebook 和 HTML5/JavaScript 完成 PlayFab 驗證。

## 需求

* 用於測試的 [Facebook 帳戶](https://www.facebook.com/)。
* 已註冊的 [PlayFab](https://developer.playfab.com/) 遊戲。
* 熟悉[登入基本概念和最佳做法](/zh-TW/services/playfab/identity/player-identity/login/login-basics-best-practices)。
* 一部最基本的伺服器，具有有效的網域名稱，可提供靜態 HTML 檔案。

<Note>
  如果您不確定自己是否符合此活動的需求，請參閱[執行 HTTP 伺服器進行測試](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing)教學課程。
</Note>

## 伺服器和網域

設定 PlayFab 驗證的需求之一，是您必須擁有具有有效網域的伺服器。如果您還沒有已註冊的網域和遠端 Web 伺服器，請依照我們的[執行 HTTP 伺服器進行測試](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing)教學課程，執行具有有效網域名稱的本機 Web 伺服器。

在本指南中，我們假設您的網域是 `['http://playfab.example'](http://playfab.example)`。

## 註冊 Facebook 應用程式

首先，瀏覽至 [Facebook 開發人員入口網站](https://developers.facebook.com/)。

1. 選取 **My Apps** 按鈕。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/my-apps.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=c533fd072cd7b47233fd2c7eb8c431a6" alt="Facebook 新增應用程式" width="1205" height="481" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/my-apps.png" />

1. 選取 **Create App** 以建立新的應用程式。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-add-a-new-app.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=ab8793987c97a532fa9e970436afe2a3" alt="Facebook 建立新的應用程式" width="1205" height="667" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-add-a-new-app.png" />

隨即開啟新的 **Application** 快顯視窗。

1. 在 **Add an app name** 下方的欄位中，輸入您的 **Application** 名稱。
2. 在 **App contact email** 下方的欄位中，輸入連絡電子郵件地址。
3. 選取 **Create app** 按鈕以儲存。

<Note>
  請務必自行設定唯一的應用程式名稱和電子郵件，如下方提供的範例所示。
</Note>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-new-app-id.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=43a15fe0906efcfb030b98c375ef610f" alt="Facebook 新的應用程式 ID" width="1205" height="575" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-new-app-id.png" />

1. 瀏覽至 **Settings** 索引標籤。
2. 選取 **Basic** 子索引標籤。
3. 找到您的 **App ID**。

<Note>
  請將您的 **App ID** 複製到安全的地方，稍後我們會使用它來設定 **Facebook SDK**。
</Note>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-save-app-id.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=724d5c403c24e3077b1fe09f59791f46" alt="Facebook 儲存應用程式 ID" width="1205" height="916" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-save-app-id.png" />

1. 前往畫面左側的功能表，然後選取 **Products** 項目。
2. 在 **Facebook Login** 區域中找到 **Configure**，然後從下拉式功能表中選取 **Settings**。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/login-get-started.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=bd346c82af2a1914bd8dfca79653f5c6" alt="Facebook 登入開始使用" width="1205" height="601" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/login-get-started.png" />

頁面應會開啟並顯示如下所示的範例。

1. 確認 **Client OAuth** 和 **Web OAuth** 都已開啟 (標示為 **Yes**)。
2. 將 **Valid OAuth redirect URIs** 設定為您自己的驗證頁面 **URI**。

<Note>
  在您的案例中，這會是 `playfab.example`。
</Note>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/login-product-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=493c1ca8600489493ca47ced5c579204" alt="Facebook 登入產品設定" width="1204" height="915" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/login-product-settings.png" />

在 **Client OAuth Settings** 畫面中：

1. 確認 **Login with the JavaScript SDK** 已開啟 (標示為 **Yes**)
2. 將 **Valid OAuth redirect URIs** 設定為您自己的驗證頁面 **URI**。

<Note>
  在您的案例中，這會是 `playfab.example`。
</Note>

3. 選取 **Save Changes** 以認可變更。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/set-oauth-redirect.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=1d900349086b3efc854d19e7e394bbfa" alt="Facebook 設定 OAuth 重新導向 URI" width="1204" height="915" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/set-oauth-redirect.png" />

在 **Application Manager** 頁面上：

* 在功能表中開啟 **Settings/Basic (1)**。
* 選取 **Add Platform (2)** 按鈕。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/add-platform.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=d715322d7bdb36fdb0cca082e6394fd7" alt="Facebook Application Manager 新增平台" width="1205" height="916" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/add-platform.png" />

畫面上會出現快顯視窗：

1. 選取 **Website 圖示**。
2. 然後選取 **Next**。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/website-options.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=96645e531316bffa3730f606c1b799ce" alt="Facebook 選取平台網站選項" width="1206" height="916" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/website-options.png" />

現在應該會出現 **Website** 設定面板。

1. 在 **Site URL** 欄位中，輸入您的驗證頁面 **URL** (在您的案例中是 `playfab.example`)。
2. 選取 **Save changes** 以認可變更。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/website-configuration.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=ef19a6ad2bf003e8e58802abeea329c5" alt="Facebook 網站設定面板" width="1205" height="916" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/website-configuration.png" />

## 測試

使用下列 HTML 檔案，測試使用 Facebook 的 PlayFab 驗證。

<Note>
  請務必將 **YOUR-APPLICATION-ID** 和 **YOUR-PLAYFAB-TITLE** 取代為您自己的值。
</Note>

```html theme={null}
<!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 Application** 設定期間設定的網域 (在我們的案例中是 `playfab.example`)，從伺服器要求下列檔案。

1. 開啟 **Facebook Auth Example** 頁面後，選取 **Log In with Facebook** 按鈕。
2. 依照快顯視窗中的任何 Facebook 指示進行操作。

觀察輸出。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-auth-example.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=e6f77a4ce2fae3bfd5dfcc97acd2e88b" alt="Facebook 驗證範例" width="597" height="278" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/facebook-html5/facebook-auth-example.png" />

您將取得 PlayFab 工作階段票證。此時，您已成功使用 HTML5 和 JavaScript 設定 PlayFab 和 Facebook 驗證。


## Related topics

- [平台特定驗證](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/index.md)
- [使用 Google 和 HTML5 設定 PlayFab 驗證](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/google-html5.md)
- [使用 Kongregate 和 HTML5 設定 PlayFab 驗證](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/kongregate-html5.md)
- [使用 Twitch 和 HTML5 設定 PlayFab 驗證](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/twitch-html5.md)
- [為 PlayFab 設定使用 Battle.net 登入](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/battlenet-login.md)