Twitch와 HTML5를 사용하여 PlayFab 인증 설정하기

이 튜토리얼은 Twitch와 HTML5/JavaScript를 사용한 PlayFab 인증 프로세스를 안내하도록 설계되었습니다.

요구 사항

시작하기 전에 다음이 필요합니다.

테스트용 Twitch 계정.
등록된 PlayFab 타이틀.
로그인 기본 사항 및 모범 사례에 대한 이해.
최소한 정적 HTML 파일을 제공할 유효한 도메인 이름을 가진 서버.

유효한 도메인 이름으로 서버를 설정하는 방법에 대한 정보는 테스트용 HTTP 서버 실행하기 튜토리얼을 참조하세요.

서버 및 도메인

이 튜토리얼을 따르려면 웹 서버가 필요합니다. 등록된 원격 웹 서버가 아직 없다면 로컬 웹 서버를 실행하는 방법에 대한 정보를 테스트용 HTTP 서버 실행하기 튜토리얼에서 확인하세요.

이 튜토리얼 전반에 걸쳐 도메인이 [http://localhost/](http://localhost/)이라고 가정합니다.

Twitch 애플리케이션 등록

Twitch 웹사이트로 이동하여 로그인되어 있는지 확인하는 것부터 시작합니다.

Account 드롭다운으로 이동합니다.
제공된 메뉴에서 Settings를 선택합니다.

Settings 페이지에서 아래와 같이 **Connections (1)**을 선택합니다.

페이지 하단에서 아래와 같이 Register your application (1) 버튼을 선택합니다.

새 앱을 구성할 수 있는 페이지가 열립니다.

애플리케이션의 Name을 입력합니다.
Redirect URL을 입력합니다.
Application Category를 입력합니다.
그런 다음 Twitch 약관에 동의하고 Register 버튼을 선택합니다.

로컬 웹 서버를 사용하여 테스트할 때 Twitch는 리디렉션 URL로 **<http://localhost>** 사용을 허용합니다. 선행 슬래시 **/**를 반드시 포함하세요. 선행 슬래시가 없으면 Twitch가 localhost URL을 인식하지 못합니다.

애플리케이션이 등록되면 페이지가 업데이트되고 애플리케이션의 Client ID가 표시됩니다.

이 Client ID는 나중에 PlayFab 타이틀을 구성하는 데 사용되므로 안전하고 쉽게 접근할 수 있는 곳에 보관하세요.

PlayFab 타이틀 구성

Twitch Client ID를 획득하면 PlayFab 타이틀에 대해 Twitch Add-on을 활성화하고 구성할 수 있습니다.

PlayFab 타이틀 화면에서 메뉴로 이동하여 Add-ons 항목을 선택합니다.
그런 다음 Twitch 아이콘 링크를 선택합니다.

Twitch 페이지에서:

Twitch Add-on에 대한 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만 나오는지 확인해야 합니다. 이는 토큰이 로컬 저장소에서 수신되거나 복원되었으며 Twitch SDK가 PlayFab에 로그인을 시작하기를 기다릴 필요가 없음을 나타냅니다.

PlayFab이 SessionTicket을 획득하면 PlayFab 앱과의 Twitch 인증 통합에 성공했습니다.

​요구 사항

​서버 및 도메인

​Twitch 애플리케이션 등록

​PlayFab 타이틀 구성

​테스트

요구 사항

서버 및 도메인

Twitch 애플리케이션 등록

PlayFab 타이틀 구성

테스트