Battle.net을 사용하여 PlayFab 인증 설정하기

이 튜토리얼에서는 Battle.net과 HTML5/JavaScript를 사용하여 PlayFab 인증을 설정하는 프로세스를 안내합니다.

요구 사항

다음이 필요합니다.

테스트용 Battle.net 계정.
등록된 PlayFab 타이틀.
로그인 기본 사항 및 모범 사례에 대한 이해.
정적 HTML 파일 역할을 할 수 있는 유효한 도메인 이름을 가진 서버. 설정 방법에 대한 정보는 테스트용 HTTP 서버 실행하기 튜토리얼을 참조하세요.

서버 및 도메인

이 가이드를 따라가려면 유효한 도메인이 있는 서버가 필요합니다. 아직 등록된 도메인과 원격 웹 서버가 없다면 유효한 도메인 이름으로 로컬 웹 서버를 실행하는 방법에 대한 정보는 테스트용 HTTP 서버 실행하기 튜토리얼을 따르세요. 이 가이드 전반에 걸쳐 도메인이 http://playfab.example라고 가정합니다.

Battle.net 타이틀 Client ID 검색

먼저 Battle.net으로 이동하여 Battle.net 개발자 계정을 만듭니다. 계정이 만들어지면 타이틀을 생성하고 Client ID를 할당받아야 합니다.

Battle.net Add-on 설치

타이틀의 PlayFab Game Manager 페이지로 이동합니다.

메뉴에서 Add-ons로 이동합니다.
Battle.net Add-on 아이콘/링크를 찾아 엽니다.

Install Battle.net을 선택합니다.

Client ID for Game Client를 입력합니다.
선택적으로 Client ID for Game Server를 입력합니다.
그런 다음 Save settings 버튼을 선택합니다.

Battle.net이 Add-on 페이지에서 활성 상태로 표시됩니다.

액세스 토큰을 사용한 테스트

이 예제에서는 기존의 액세스 토큰 방식을 사용하여 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>

웹 서버를 사용하여 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용 Battle.net 로그인 설정하기

Battle.net을 사용하여 PlayFab 인증 설정하기

요구 사항

서버 및 도메인

Battle.net 타이틀 Client ID 검색

Battle.net Add-on 설치

액세스 토큰을 사용한 테스트

​Battle.net을 사용하여 PlayFab 인증 설정하기

​요구 사항

​서버 및 도메인

​Battle.net 타이틀 Client ID 검색

​Battle.net Add-on 설치

​액세스 토큰을 사용한 테스트

Battle.net을 사용하여 PlayFab 인증 설정하기

요구 사항

서버 및 도메인

Battle.net 타이틀 Client ID 검색

Battle.net Add-on 설치

액세스 토큰을 사용한 테스트