다음을 통해 공유

Twitch 및 HTML5를 사용한 PlayFab 인증 설정

  • 아티클

이 자습서는 Twitch 및 HTML5/JavaScript를 사용한 PlayFab 인증의 프로세스를 안내하기 위한 것입니다.

요구 사항

시작하기 전에 다음 사항이 갖추어져 있는지 확인하세요.

참고 항목

유효한 도메인 이름을 가진 서버를 설정하는 방법에 대한 정보는 테스트용 HTTP 서버 실행 자습서를 참조하세요.

서버 및 도메인

이 자습서에서는 지침을 따르기 위해 웹 서버가 필요합니다. 등록된 원격 웹 서버가 아직 없는 경우 로컬 웹 서버를 실행하는 방법에 대한 테스트용 HTTP 서버 실행 자습서를 따르세요.

참고 항목

이 자습서 전체에서는 도메인이 [http://localhost/](http://localhost/)라고 가정합니다.

Twitch 애플리케이션 등록

먼저 Twitch 웹 사이트로 이동하여 로그인되어 있는지 확인합니다.

  1. 계정 드롭다운으로 이동합니다.
  2. 제공된 메뉴에서 설정을 선택합니다.

Twitch 계정 설정

아래와 같이 설정 페이지에서 연결을 선택합니다.

Twitch 설정 연결

아래와 같이 페이지 맨 아래에서 애플리케이션 등록 단추를 선택합니다.

Twitch 애플리케이션 등록 페이지 열기

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

  1. 애플리케이션의 이름을 입력합니다.
  2. 리디렉션 URL을 입력합니다.
  3. 애플리케이션 범주를 입력합니다.
  4. 그런 다음 Twitch 약관에 동의하고 등록 단추를 선택합니다.

Twitch 애플리케이션 등록

Important

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

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

참고 항목

이 클라이언트 ID는 나중에 PlayFab 타이틀을 구성할 때 사용되므로 안전하고 쉽게 액세스할 수 있는 장소에 보관하세요.

Twitch 애플리케이션 관리

PlayFab 타이틀 구성

Twitch 클라이언트 ID를 얻은 후에 PlayFab 타이틀에 대한 Twitch 추가 기능을 사용하도록 설정하고 구성할 수 있습니다.

  1. PlayFab 타이틀 화면에서 메뉴로 이동하여 추가 기능 항목을 선택합니다.
  2. 그런 다음 Twitch 아이콘 링크를 선택합니다.

게임 관리자 추가 콘텐츠 탭

Twitch 페이지에서:

  • Twitch 추가 기능의 설정 페이지가 열립니다.
  • Twitch 클라이언트 ID를 입력합니다.
  • Twitch 설치 단추를 선택합니다.

게임 관리자 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>

  1. 이 경우에는 Twitch 애플리케이션 구성 중 설정한 도메인(<http://localhost>)을 사용하여 서버에서 다음 파일을 요청 합니다.

  2. 페이지가 열리면 Twitch SDK가 초기화되었음을 나타내는 메시지가 나타날 때까지 기다립니다.

  3. 그런 다음 Login with Twitch(Twitch로 로그인) 단추를 선택합니다.

  4. 팝업 창에서 Twitch 지침을 따르고 출력을 확인합니다.

Important

페이지에 도달 할 때 Twitch 인증 세션이 ‘이미’ 진행 중인 경우 다른 예기치 못한 순서로 콜백이 시작될 수 있습니다. 이 경우에는 아래에 표시된 스크린샷에 표시됩니다. 그러나 Twitch로 로그인한 이후에만 PlayFab을 통해 로그인해야 합니다. 이는 토큰이 수신되었거나 로컬 저장소에서 복원되었음을 나타내며, Twitch SDK가 PlayFab에 로그인하기를 기다릴 필요가 없습니다.

Twitch 인증 예제

PlayFab에서 SessionTicket을 취득할 수 있다면 Twitch 인증이 PlayFab 앱과 성공적으로 통합된 것입니다.