> ## 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.

# 使用 Kongregate 和 HTML5 設定 PlayFab 驗證

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

本教學課程說明使用 Kongregate 和 HTML5/JavaScript 在 PlayFab 中驗證玩家所需的最低設定。

## 需求

* 已註冊的 [Kongregate](https://www.kongregate.com/) 帳戶。
* 熟悉 [Kongregate 開發人員指南](https://www.kongregate.com/developer_center/docs/en/kongregate-api)。
* 已註冊的 PlayFab 遊戲。
* 熟悉[登入基本概念和最佳做法](/zh-TW/services/playfab/identity/player-identity/login/login-basics-best-practices)。

## 設定 Kongregate 應用程式

Kongregate 要求您先上傳應用程式的預覽版本，之後您才能存取必要的 API 資訊。

為此，我們需要準備一個包含下列內容的 `index.html` 檔案。

```html theme={null}
<!doctype html>
<html lang="en-us">
<head></head>
<body>
 <h1>Placeholder</h1>
</body>
</html>
```

瀏覽至 [Kongregate 網站](https://www.kongregate.com/)：

1. 選取 **Games** 索引標籤。
2. 選取 **Upload your game** 按鈕。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-games-tab.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=3af3bc93c645a3f8948701caf1f08d03" alt="Kongregate Games 索引標籤" width="965" height="471" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-games-tab.png" />

隨即開啟用於設定新應用程式的頁面。

1. 在 **Title** 欄位中輸入 **Application Name**。
2. 然後在提供的欄位中輸入 **Game Description**。
3. 選取 **Category**。
4. 選取 **Continue** 按鈕以提交新應用程式，如下列範例所示。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-upload-your-game.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=0e66a21c81da6861bd59d2dddb82c22f" alt="Kongregate 上傳您的遊戲" width="636" height="603" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-upload-your-game.png" />

您會被移至 **Application Upload** 頁面。

重要的第一步是務必儲存**網址列**中的 **URL**。這樣可在您關閉頁面後，節省大量嘗試重新存取應用程式的時間。

1. 完成後，選取準備好的 **index.html** 檔案作為您的 **Game File**。
2. 然後設定畫面大小。
3. 務必接受所有必要的授權。
4. 選取 **Upload** 按鈕以上傳您的應用程式，如下列範例所示。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-app-upload-page.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=893af9198a1deef8b7cdb6bcd4534cc9" alt="Kongregate 應用程式上傳頁面" width="792" height="1120" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-app-upload-page.png" />

* 預覽開啟後，請忽略其內容並開啟 **api information** 連結。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-preview-api-info.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=b136fa2e3dd827e4b6344921b500a8be" alt="Kongregate 預覽 API 資訊" width="786" height="432" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-preview-api-info.png" />

<Note>
  **API Information** 頁面開啟時，找出 **API Key** 並將其儲存在安全且容易存取的位置，以供稍後使用。
</Note>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-api-key.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=a99770329d85ce86613cd0a32cdf28a4" alt="Kongregate API 金鑰" width="900" height="344" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-api-key.png" />

## 設定 PlayFab 遊戲

在您的 PlayFab 遊戲 Game Manager 中：

1. 瀏覽至 **Add-ons**。
2. 找到並選取 **Kongregate**。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/playfab-select-kongregate-add-on.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=e25c251fc51474717d5b5a693ad1bf0c" alt="PlayFab 選取 Kongregate 附加元件" width="1100" height="685" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/playfab-select-kongregate-add-on.png" />

隨即開啟新頁面，讓您設定 **Kongregate** 整合。

1. 輸入您在上一節取得的 **API Key**。
2. 選取 **Install Kongregate**。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/playfab-set-up-kongregate-integration.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=fa6dd5111bfe1bb60c6cf118622272c1" alt="PlayFab 設定 Kongregate 整合" width="1000" height="693" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/playfab-set-up-kongregate-integration.png" />

如果您沒有收到任何錯誤訊息，表示您已設定好 PlayFab 遊戲與 Kongregate 應用程式的整合。

## 準備一些程式碼

使用下列範例程式碼填入遊戲的 `index.html`。

```html theme={null}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
  <title>Kongregate Javascript API example</title>
  <!-- Import PlayFab API -->
  <script src='https://download.playfab.com/PlayFabClientApi.js'></script>
  <!-- Import JQuery, required specifically by this example, does not effect either API -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
  <!-- Import Kongregate API -->
  <script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
</head>

<!-- Define elements with IDs to show current state of things and a couple of buttons -->
<body style='background-color:white'>
  <span id='init'>Initializing...</span>
  <div id='content' style='display:none'>
    <div>Kongregate API Loaded!</div>
    <div id='username'></div>
    <div id='user_id'></div>
    <!-- This button will invoke Kongregate Auth Box -->
    <button id='login' style='display:none'
      onclick='kongregate.services.showRegistrationBox()'>Sign in/register</button>
    <!-- This button will invoke PlayFab authentication process -->
    <button id='login'
       onclick='loginInUsingPlayFab()'>PlayFab Login With Kongregate</button>
  </div>

  <script type='text/javascript'>

    // This function just updates UI, nothing else
    function updateFields() {
      $('#init').hide();
      $('#content').show();

      // Visualize Kongregate Auth Data
      $('#username').text('Username: ' + kongregate.services.getUsername());
      $('#user_id').text('User ID: ' + kongregate.services.getUserId());

      // If not authenticated in Kongregate, allow to use Login button
      if(kongregate.services.isGuest()) {
        $('#login').show();
      } else {
        $('#login').hide();
      }
    }

    // The function prepares and triggers PlayFab LoginWithKongregate API call
    function loginInUsingPlayFab() {
      // Setting up PlayFab title ID
      PlayFab.settings.titleId = "159F";

      // forming request
      var request = {
        TitleId: PlayFab.settings.titleId,
        AuthTicket: kongregate.services.getGameAuthToken(),
        KongregateId : kongregate.services.getUserId(),
        CreateAccount: true
      };

      console.log('logging in');
      // Invoke LoginWithKongregate API call and visualize both results (success or failure)
      PlayFabClientSDK.LoginWithKongregate(request,
      function(result){
        $('<div></div>').html('Authenticated via playfab').appendTo('#content')
        console.log("success");
      },
      function(err){
        $('<div></div>').html('Problem occurred: ' + PlayFab.GenerateErrorReport(err)).appendTo('#content')
        console.log("failure");
      });
    }

    // The entry point for Kongregate initialization
    kongregateAPI.loadAPI(function(){
      window.kongregate = kongregateAPI.getAPI();
      updateFields();
      kongregate.services.addEventListener('login', function(){
        updateFields();
      });
    });
  </script>
</body>
</html>
```

## 測試

還記得我們稍早請您儲存在安全且容易存取位置的 URL 嗎？現在請使用它來存取您的 **Application Upload** 頁面。

1. 選取 **index.html** 作為您的 **Game File**。
2. 設定畫面大小。
3. 務必接受所有必要的授權。
4. 選取 **Upload** 按鈕以上傳您的應用程式。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-app-upload-page.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=893af9198a1deef8b7cdb6bcd4534cc9" alt="Kongregate 應用程式上傳頁面" width="792" height="1120" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-app-upload-page.png" />

預覽載入後，請等候應用程式取得 **Kongregate User ID** 和 **Username**。

* 完成後，選取 **PlayFab Login With Kongregate** 按鈕。
* 稍待片刻後，您應該會收到 **Authenticated via PlayFab** 訊息。
* 此時，您已成功使用 PlayFab 和 Kongregate 登入！

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-html5/testing-playfab-login-with-kongregate.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=f0588d425c650246a5a9f8a041b3a078" alt="測試使用 Kongregate 進行 PlayFab 登入" width="905" height="467" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-html5/testing-playfab-login-with-kongregate.png" />


## 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)
- [使用 Facebook 和 HTML5 設定 PlayFab 驗證](/zh-TW/services/playfab/identity/player-identity/platform-specific-authentication/facebook-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)
