> ## 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 と Unity を使用した PlayFab 認証のセットアップ

> Kongregate アプリのアップロードとプレイヤー サインイン コードをカバーする、WebGL を使用して Unity の PlayFab タイトルに Kongregate 認証を追加する手順ガイド。

このチュートリアルでは、Kongregate と Unity を使用して PlayFab でプレイヤーを認証するために必要な最小限のセットアップを紹介します。

## 要件

* 登録済みの [Kongregate](https://www.kongregate.com/) アカウント。
* [Kongregate Developers Guide](https://www.kongregate.com/developer_center/docs/en/kongregate-api) に精通していること。
* 登録済みの PlayFab タイトル。
* タイトル用に PlayFab が構成された Unity プロジェクト。
* Unity WebGL サポートがインストールされていること。
* [ログインの基本とベスト プラクティス](/services/playfab/identity/player-identity/login/login-basics-best-practices) に精通していること。

## Kongregate アプリのセットアップ

Kongregate では、必要なアプリ情報にアクセスする前に、アプリのプレビュー バージョンをアップロードする必要があります。最初のステップは、以下の内容の **index.html** ファイルを準備することです。

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

[Kongregate Web サイト](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. 必ず **アプリケーション名** を入力します。
2. **ゲームの説明** を入力します。
3. **カテゴリ** を選択します。
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" />

**アプリケーション アップロード** ページに移動します。

まず — *そして最も重要なのは* — **Web アドレス バー** の URL を安全でアクセスしやすい場所に保存してください。*これにより、ページを閉じた後にアプリケーションへのアクセスを復元する時間を大幅に節約できます*。

1. 完了したら、準備した **index.html** ファイルを **ゲーム ファイル** として選択します。
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" />

**API 情報** ページが開いたら、**API Key** を見つけ、後で使用できるように簡単にアクセスできる安全な場所に保管してください。

<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 Key" 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" />

この時点でエラー メッセージが表示されなければ、Kongregate アプリケーションとの PlayFab タイトル統合が適切に構成されています。

## Unity プロジェクトのセットアップ

この Unity セットアップ チェックリストを使用してください:

* \[オプション] [PlayFab Editor Extensions](https://aka.ms/playfabunityextension) をインストールします。
  * `PlayFabSharedSettings` Scriptable Object で `TitleId` をセットアップします。
* Unity 5.6+ の場合、[Kongregate Preloader WebGL Template](https://github.com/kongregate/webgl-preloader) をダウンロードし、`Assets/WebGLTemplates` フォルダー **(2)** 内に配置します。
* Unity \< 5.6 の場合、[Kongregate Preloader WebGL Template 5.5 and below](https://github.com/kongregate/webgl-preloader/tree/unity-5.5-and-below) をダウンロードし、`Assets/WebGLTemplates` フォルダー **(2)** 内に配置します。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-assets-webgltemplates-folder.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=39cc86d08fbb657aeda84d76445ebfdc" alt="Unity Assets/WebGL Templates フォルダー" width="319" height="307" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-assets-webgltemplates-folder.png" />

次に、作業シーンを作成しましょう。

1. テスト目的で、いくつかのテキスト ラベルを持つ画面スケーリング キャンバスを使用します。

<Note>
  デバッグ メッセージを表示するために *1 つの* テキスト ラベルのみが必要です。
</Note>

2. 空の **GameObject** を作成し、名前を **Kongregate** に変更します。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-boot-scene.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=e347519d8ee348c2ab91d4d8de0df7df" alt="Unity BootScene" width="337" height="300" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-boot-scene.png" />

この `GameObject` には、デバッグ メッセージ用に配線されたテキスト ラベルを持つ `KongregateHandler` コンポーネントが含まれます。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-kongregate-handler.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=a9ff459d8fc93be7aa71875a18ef1497" alt="Unity GameObject Kongregate Handler" width="433" height="310" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-kongregate-handler.png" />

`KongregateHandler` コンポーネントのコードを以下に示します。

```csharp theme={null}
// We are specifically interested in importing PlayFab related namespaces
using PlayFab;
using PlayFab.ClientModels;
using UnityEngine;
using UnityEngine.UI;

public class KongregateHandler : MonoBehaviour
{
  
    // Standard unity callback, executed once for the script to start
    public void Start()
    {
        // Utility: show feedback
        SetMessage("Loading kongregate api...");

        /*
         * Important: execute Javascript in the external context to initialize
         * Kongregate API, Unity Support and set up callback GameObject and Method.
         * In this case, callback is set to a GameObject called Kongregate and a
         * method called OnKongregateAPILoaded, which we define later in this class.
         * Once Kongregate API is initialized, Unity will locate this object by name
         * ("Kongregate") and execute a method "OnKongregateAPILoaded" passing in user
         * info string as an argument.
         */
        Application.ExternalEval(
          "if(typeof(kongregateUnitySupport) != 'undefined'){" +
          " kongregateUnitySupport.initAPI('Kongregate', 'OnKongregateAPILoaded');" +
          "} else {" +
          " console.error('No unity support!');" +
          "};"
        );
    }

    /*
     * Executed once Kongregate API is ready. This method is invoked by KongregateAPI
     * and receives a structured text with multiple pieces of data you must parse manually.
     * The userInfo string parameter has the following structure: 'user_identifier|user_name|auth_token'
     */
    public void OnKongregateAPILoaded(string userInfo)
    {
        SetMessage("Received user info! Logging though playfab...");

        // We split userInfo string using '|' character to acquire auth token and Kongregate ID.
        var userInfoArray = userInfo.Split('|');
        var authTicket = userInfoArray[2];
        var kongregateId = userInfoArray[0];

        LogToBrowser("Auth Token: " + authTicket);
        LogToBrowser("Kongregate Id: " + kongregateId);

        /*
         * We then execute PlayFab API call called LoginWithKongregate.
         * LoginWithKongregate requires KongregateID and AuthTicket.
         * We also pass CreateAccount flag, to automatically create player account.
         */
        PlayFabClientAPI.LoginWithKongregate(new LoginWithKongregateRequest
        {
            KongregateId = kongregateId,
            AuthTicket = authTicket,
            CreateAccount = true
        }, OnLoggedIn, OnFailed);
    }

    /*
     * The rest of the code serves as a utility to process results, log debug statements
     * and display them using Text message label.
     */

    private void OnLoggedIn(LoginResult obj)
    {
        SetMessage("Logged in through PlayFab!");
    }
    private void OnFailed(PlayFabError error)
    {
        SetMessage("Failed to login in with PlayFab: " + error.GenerateErrorReport());
    }

    private void SetMessage(string message)
    {
        InfoLabel.text = message;
    }

    private void LogToBrowser(string message)
    {
        Application.ExternalEval(string.Format("console.log('{0}')", message));
    }

    public Text InfoLabel;
}
```

## テスト

統合を真にテストできる唯一の方法は、プロトタイプを Kongregate にアップロードすることです。

1. **Build** ウィンドウを開き、メニューから **WebGL** が選択されていることを確認します。
2. 次に、ボタンを選択して **Player Settings** を開きます。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/kongregate-build-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=b7c6c11c30498759dcbb81505e6de17e" alt="Kongregate Build 設定" width="628" height="605" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/kongregate-build-settings.png" />

**Player Settings** 画面内で、**Settings for WebGL** ビルドを見つけます:

1. サイズが正しく設定されていることを確認します。
2. 次に **Kongregate Preloader Template** を選択します。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/kongregate-webgl-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=d317f83e3db4d3b5c5d6921721e56e08" alt="Kongregate WebGL 設定" width="424" height="421" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/kongregate-webgl-settings.png" />

アプリケーションをビルドし、**Build** フォルダーを開きます。

* **index.html** と (Unity のバージョンによって) その他のファイルが多数存在します。
* 以下の例のように、**index.html** を除くすべてのファイルを zip アーカイブ内に配置します。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-build-folder.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=d632515d669b433a5afbcc1f19db6ddd" alt="Unity ビルド フォルダー" width="795" height="155" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/unity-build-folder.png" />

以前保存した URL を使用して **アプリケーション アップロード** ページにアクセスします。

1. **index.html** を **ゲーム ファイル** として選択します。
2. 次に、zip アーカイブを **追加ファイル** として選択します。
   * ライセンスを承諾してアップロードします。

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/kongregate-app-upload-page-add-files.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=a48c5ef005ca1aa2f674842d7cdb9fa5" alt="Kongregate アプリケーション アップロード ページ - ファイル追加" width="679" height="345" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/kongregate-unity/kongregate-app-upload-page-add-files.png" />

プレビューが開いたら、メッセージが変わるにつれてゲームがライブで表示されるはずです。

完了時に、PlayFab を通じてログインが成功したことがメッセージで示されるはずです。

この時点で、PlayFab と Kongregate を正常に統合できました。


## Related topics

- [プラットフォーム固有の認証](/ja-jp/services/playfab/identity/player-identity/platform-specific-authentication/index.md)
- [Kongregate と HTML5 を使用した PlayFab 認証のセットアップ](/ja-jp/services/playfab/identity/player-identity/platform-specific-authentication/kongregate-html5.md)
- [Steam と Unity を使用した PlayFab 認証のセットアップ](/ja-jp/services/playfab/identity/player-identity/platform-specific-authentication/steam-unity.md)
- [Facebook と Unity を使用した PlayFab 認証のセットアップ](/ja-jp/services/playfab/identity/player-identity/platform-specific-authentication/facebook-unity.md)
- [Google と HTML5 を使用した PlayFab 認証のセットアップ](/ja-jp/services/playfab/identity/player-identity/platform-specific-authentication/google-html5.md)
