跳轉到主要內容
本教學課程旨在引導您使用 Facebook 和 HTML5/JavaScript 完成 PlayFab 驗證。

需求

如果您不確定自己是否符合此活動的需求,請參閱執行 HTTP 伺服器進行測試教學課程。

伺服器和網域

設定 PlayFab 驗證的需求之一,是您必須擁有具有有效網域的伺服器。如果您還沒有已註冊的網域和遠端 Web 伺服器,請依照我們的執行 HTTP 伺服器進行測試教學課程,執行具有有效網域名稱的本機 Web 伺服器。 在本指南中,我們假設您的網域是 ['http://playfab.example'](http://playfab.example)。

註冊 Facebook 應用程式

首先,瀏覽至 Facebook 開發人員入口網站。
  1. 選取 My Apps 按鈕。
Facebook 新增應用程式
  1. 選取 Create App 以建立新的應用程式。
Facebook 建立新的應用程式 隨即開啟新的 Application 快顯視窗。
  1. 在 Add an app name 下方的欄位中,輸入您的 Application 名稱。
  2. 在 App contact email 下方的欄位中,輸入連絡電子郵件地址。
  3. 選取 Create app 按鈕以儲存。
請務必自行設定唯一的應用程式名稱和電子郵件,如下方提供的範例所示。
Facebook 新的應用程式 ID
  1. 瀏覽至 Settings 索引標籤。
  2. 選取 Basic 子索引標籤。
  3. 找到您的 App ID。
請將您的 App ID 複製到安全的地方,稍後我們會使用它來設定 Facebook SDK。
Facebook 儲存應用程式 ID
  1. 前往畫面左側的功能表,然後選取 Products 項目。
  2. 在 Facebook Login 區域中找到 Configure,然後從下拉式功能表中選取 Settings。
Facebook 登入開始使用 頁面應會開啟並顯示如下所示的範例。
  1. 確認 Client OAuth 和 Web OAuth 都已開啟 (標示為 Yes)。
  2. 將 Valid OAuth redirect URIs 設定為您自己的驗證頁面 URI。
在您的案例中,這會是 playfab.example。
Facebook 登入產品設定 在 Client OAuth Settings 畫面中:
  1. 確認 Login with the JavaScript SDK 已開啟 (標示為 Yes)
  2. 將 Valid OAuth redirect URIs 設定為您自己的驗證頁面 URI。
在您的案例中,這會是 playfab.example。
  1. 選取 Save Changes 以認可變更。
Facebook 設定 OAuth 重新導向 URI 在 Application Manager 頁面上:
  • 在功能表中開啟 Settings/Basic (1)。
  • 選取 Add Platform (2) 按鈕。
Facebook Application Manager 新增平台 畫面上會出現快顯視窗:
  1. 選取 Website 圖示。
  2. 然後選取 Next。
Facebook 選取平台網站選項 現在應該會出現 Website 設定面板。
  1. 在 Site URL 欄位中,輸入您的驗證頁面 URL (在您的案例中是 playfab.example)。
  2. 選取 Save changes 以認可變更。
Facebook 網站設定面板

測試

使用下列 HTML 檔案,測試使用 Facebook 的 PlayFab 驗證。
請務必將 YOUR-APPLICATION-ID 和 YOUR-PLAYFAB-TITLE 取代為您自己的值。
使用您在 Facebook Application 設定期間設定的網域 (在我們的案例中是 playfab.example),從伺服器要求下列檔案。
  1. 開啟 Facebook Auth Example 頁面後,選取 Log In with Facebook 按鈕。
  2. 依照快顯視窗中的任何 Facebook 指示進行操作。
觀察輸出。 Facebook 驗證範例 您將取得 PlayFab 工作階段票證。此時,您已成功使用 HTML5 和 JavaScript 設定 PlayFab 和 Facebook 驗證。
最後修改於 2026年10月6日