Twitch と HTML5 を使用した PlayFab 認証のセットアップ

このチュートリアルは、Twitch と HTML5/JavaScript を使用した PlayFab 認証のプロセスをガイドするように設計されています。

要件

開始する前に、次のものが必要です:

テスト用の Twitch アカウント。
登録済みの PlayFab タイトル。
ログインの基本とベストプラクティスに精通していること。
少なくとも、静的 HTML ファイルを提供するための有効なドメイン名を持つサーバー。

有効なドメイン名でサーバーをセットアップする方法については、テスト用の HTTP サーバーの実行チュートリアルを参照してください。

サーバーとドメイン

このチュートリアルの手順に従うには、Web サーバーが必要です。登録済みのリモート Web サーバーがまだない場合は、テスト用の HTTP サーバーの実行チュートリアルに従って、ローカル Web サーバーを実行してください。

このチュートリアル全体を通じて、ドメインは [http://localhost/](http://localhost/) であると想定します。

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

まず、Twitch Web サイトに移動し、ログインしていることを確認します。

Account ドロップダウンに移動します。
提供されたメニューから Settings を選択します。

Settings ページで、以下のように Connections (1) を選択します。ページの一番下で、以下のように Register your application (1) ボタンを選択します。新しいアプリを構成できるページが開きます。

アプリケーション の Name を入力します。
Redirect URL を入力します。
Application Category を入力します。
次に、Twitch の利用規約に同意し、Register ボタンを選択します。

ローカル Web サーバーを使用してテストする場合、Twitch では **<http://localhost>** をリダイレクト URL として使用できます。先頭のスラッシュ / を必ず含めてください。先頭のスラッシュがないと、Twitch は localhost URL を認識できません。

アプリケーションが登録されると、ページが更新され、アプリケーションの Client ID が表示されます。

この Client ID は、後で PlayFab タイトルを構成する際に使用するので、安全で簡単にアクセスできる場所に保管してください。

PlayFab タイトルの構成

Twitch Client ID を取得したら、PlayFab タイトルの Twitch アドオンを有効にして構成できます。

PlayFab タイトル 画面で、メニューに移動し Add-ons 項目を選択します。
次に Twitch アイコンリンクを選択します。

Twitch ページで:

Twitch アドオン の Settings ページが開きます。
Twitch Client ID を入力します。
Install Twitch ボタンを選択します。

アドオンがインストールされ、エラーが発生していないことを確認するため、少し時間を取ってください。これで PlayFab タイトルの構成は完了です。

テスト

以下の HTML ファイルを使用して、Twitch を使用した PlayFab 認証をテストします。 TWITCH_CLIENT_ID_GOES_HERE と PLAYFAB_TITLE_ID_GOES_HERE は必ずご自身の値に置き換えてください。

<!DOCTYPE html>
<html>
<head>
    <!-- Include JQuery - dependency of Twitch JS SDK -->
    <script src="//code.jquery.com/jquery.min.js"></script>
    <!-- Include Twitch SDK -->
    <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
    <!-- Include PlayFab SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Twitch Auth Example</p>
    <button onclick="login()">Login With Twitch</button>
    <script>
        // Establish Twitch Auth Callback (invoked when logged in with Twitch)
        Twitch.events.addListener('auth.login', function() {
            logLine("Logged in with Twitch!");
            // Invoke login with PlayFab code and pass the token
            loginWithPlayFab(Twitch.getToken());
        });

        // Run Twitch SDK initialization
        Twitch.init({clientId: 'TWITCH_CLIENT_ID_GOES_HERE'}, function(error, status) {
            logLine("Twitch SDK Initialized");
        });

        // This method is invoked when you press the button

        function login() {
            logLine("Logging in via Twitch...");
            Twitch.login({
                scope: ['user_read', 'channel_read']
            });
        }

        function loginWithPlayFab(accessToken){
            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithTwitch API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithTwitch({
                AccessToken: accessToken,
                TitleId: "PLAYFAB_TITLE_ID_GOES_HERE",
                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) {
        console.log(message);
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>

Twitch アプリケーションの構成時にセットアップしたドメイン (この場合は <http://localhost>) を使用して、サーバーから次のファイルを要求します。
ページが開いたら、Twitch SDK が初期化されたことを示すメッセージを待ちます。
次に Login with Twitch ボタンを選択します。
ポップアップウィンドウの Twitch の指示に従い、出力を確認します。

ページに到達した時点で すでに Twitch 認証セッションが実行中の場合、コールバックが異なる予期しない順序で発火する可能性があります。このケースは以下のスクリーンショットに示されています。ただし、Logged in with Twitch の後に Logging in via PlayFab のみが続くことを確認する必要があります。これは、トークンが受信されたか、ローカルストレージから復元されたことを示しており、PlayFab へのサインインを開始するために Twitch SDK を待つ必要はありません。

PlayFab が SessionTicket を取得できた場合、Twitch 認証と PlayFab アプリの統合が正常に完了しています。

​要件

​サーバーとドメイン

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

​PlayFab タイトルの構成

​テスト

要件

サーバーとドメイン

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

PlayFab タイトルの構成

テスト