Battle.net で PlayFab 認証をセットアップする

このチュートリアルでは、Battle.net と HTML5/JavaScript を使用して PlayFab 認証をセットアップするプロセスを説明します。

要件

必要なもの:

テスト用の Battle.net アカウント。
登録済みの PlayFab タイトル。
ログインの基本とベストプラクティスに精通していること。
静的 HTML ファイルとして機能する、有効なドメイン名を持つサーバー。セットアップ方法については、テスト用の HTTP サーバーの実行チュートリアルを参照してください。

サーバーとドメイン

このガイドに従うには、有効なドメインを持つサーバーが必要です。登録済みドメインとリモート Web サーバーがまだない場合は、テスト用の HTTP サーバーの実行チュートリアルに従って、有効なドメイン名でローカル Web サーバーを実行する方法を確認してください。このガイド全体を通じて、ドメインは http://playfab.example であると想定しています。

Battle.net タイトルクライアント ID を取得する

まず、Battle.net に移動し、Battle.net 開発者アカウントを作成します。アカウントを作成したら、タイトルを作成してクライアント ID を割り当てる必要があります。

Battle.net アドオンをインストールする

タイトルの PlayFab Game Manager ページに移動します。

メニューの Add-ons に移動します。
Battle.net アドオン のアイコン/リンクを見つけて開きます。

Install Battle.net を選択します。

Client ID for Game Client を入力します。
必要に応じて Client ID for Game Server も入力します。
次に Save settings ボタンを選択します。

アドオンページで Battle.net がアクティブとして表示されます。

アクセストークンを使用したテスト

この例では、従来のアクセストークン方式を使用して LoginWithBattleNet API をテストする方法を示します。以下に提供されている HTML コードをテスト用に使用してください。

YOUR_CLIENT_ID、YOUR_PLAYFAB_TITLE_ID、YOUR_BNET_TITLE_NAME、および YOUR_CLIENT_SECRET は必ずご自身の値に置き換えてください。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h2>Battle.net SSO Token Demo (Manual Flow)</h2>
    <ol>
        <li>
            <button onclick="openBattleNetLogin()">Log in to Battle.net</button>
        </li>
        <li>
            After login, copy the <b>ST</b> value from the URL (e.g. <code>ST=US-xxxx-xxxx) and paste it here:
            

            <input type="text" id="ssoToken" size="80" placeholder="Paste SSO token (ST=...)" />
        </li>
        <li>
            Click "Exchange SSO Token for id_token"

            <button onclick="exchangeSSOToken()">Exchange SSO Token for id_token</button>
            

            <label>id_token:</label>

            <input type="text" id="idToken" size="80" placeholder="id_token will appear here" />
        </li>
        <li>
            Click "Login to PlayFab" to complete the flow

            <button onclick="loginWithPlayFab()">Login to PlayFab</button>
        </li>
    </ol>
    

    <div id="log"></div>
    <script>
        // Demo configuration variables
        const BNET_TITLE_NAME = 'YOUR_BNET_TITLE_NAME';
        const PLAYFAB_TITLE_ID = 'YOUR_PLAYFAB_TITLE_ID';
        const CLIENT_ID = 'YOUR_CLIENT_ID';
        const CLIENT_SECRET = 'YOUR_CLIENT_SECRET';

        function openBattleNetLogin() {
            const url = `http://account.battle.net/login/en/?app=${encodeURIComponent(BNET_TITLE_NAME)}`;
            window.open(url, '_blank');
        }

        function exchangeSSOToken() {
            const ssoToken = document.getElementById('ssoToken').value.trim();
            if (!ssoToken) {
                logLine("Please enter the SSO token.");
                return;
            }
            logLine("Exchanging SSO token for id_token...");
            // Prepare the request for the token exchange
            const params = new URLSearchParams();
            params.append('scope', 'account.basic openid');
            params.append('grant_type', 'urn:ietf:params:oauth:grant-type:token-exchange');
            params.append('subject_token', ssoToken);
            params.append('subject_token_type', 'urn:blizzard:params:oauth:token-type:sso');
            params.append('requested_token_type', 'urn:ietf:params:oauth:token-type:jwt');

            // Basic Auth header
            const authHeader = 'Basic ' + btoa(CLIENT_ID + ':' + CLIENT_SECRET);

            fetch('https://oauth.battle.net/token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': authHeader
                },
                body: params
            })
            .then(res => res.json())
            .then(data => {
                if (data.id_token) {
                    document.getElementById('idToken').value = data.id_token;
                    logLine("id_token received.");
                } else {
                    logLine("Error: " + JSON.stringify(data));
                }
            })
            .catch(err => logLine("Error: " + err));
        }

        function loginWithPlayFab() {
            const idToken = document.getElementById('idToken').value.trim();
            if (!idToken) {
                logLine("Please exchange for an id_token first.");
                return;
            }
            logLine("Logging in to PlayFab...");
            axios.post(
                `https://${PLAYFAB_TITLE_ID}.playfabapi.com/Client/LoginWithBattleNet`,
                {
                    TitleId: PLAYFAB_TITLE_ID,
                    IdentityToken: idToken,
                    CreateAccount: true
                },
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
            )
            .then(response => logLine("Response: " + JSON.stringify(response.data)))
            .catch(error => logLine("Error: " + JSON.stringify(error.response ? error.response.data : error)));
        }

        function logLine(message) {
            const logDiv = document.getElementById('log');
            logDiv.innerHTML += message + "
";
        }
    </script>
</body>
</html></code>

Web サーバーを使用して HTML ページを開くことを忘れないでください。また、指定した URL を使用してこのページにアクセスするようにしてください。

ページが開いたら、Log in to Battle.net を選択します。
サインイン後、URL から ST 値をコピーし (例: ST=US-xxxx-xxxx)、ダイアログボックスに入力します。
Exchange SSO Token for id_token を選択し、値をダイアログボックスにコピーします。
Login to PlayFab を選択して、サインインフローを完了します。
完了すると、スクリプトが PlayFab 側で認証を試み、結果を表示します。

XBOX Services

PlayFab

PlayFab で Sign In with Battle.net をセットアップする

Battle.net で PlayFab 認証をセットアップする

要件

サーバーとドメイン

Battle.net タイトルクライアント ID を取得する

Battle.net アドオンをインストールする

アクセストークンを使用したテスト

​Battle.net で PlayFab 認証をセットアップする

​要件

​サーバーとドメイン

​Battle.net タイトル クライアント ID を取得する

​Battle.net アドオンをインストールする

​アクセス トークンを使用したテスト

Battle.net で PlayFab 認証をセットアップする

要件

サーバーとドメイン

Battle.net タイトルクライアント ID を取得する

Battle.net アドオンをインストールする

アクセストークンを使用したテスト