Facebook과 HTML5를 사용하여 PlayFab 인증 설정하기

이 튜토리얼은 Facebook과 HTML5/JavaScript를 사용한 PlayFab 인증을 안내하도록 설계되었습니다.

요구 사항

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

이 활동에 필요한 요구 사항이 있는지 확실하지 않은 경우 테스트용 HTTP 서버 실행하기 튜토리얼을 참조하세요.

서버 및 도메인

PlayFab 인증 설정 요구 사항의 일부로, 따라 진행할 유효한 도메인이 있는 서버가 있어야 합니다. 등록된 도메인과 원격 웹 서버가 아직 없다면 유효한 도메인 이름으로 로컬 웹 서버를 실행하기 위해 테스트용 HTTP 서버 실행하기 튜토리얼을 따르세요. 이 가이드 전반에 걸쳐 도메인이 ['http://playfab.example'](http://playfab.example)이라고 가정합니다.

Facebook 애플리케이션 등록

Facebook Developer Portal로 이동하여 시작하세요.

My Apps 버튼을 선택합니다.

Create App을 선택하여 새 앱을 생성합니다.

새 애플리케이션 팝업이 열립니다.

Add an app name 아래의 필드에 애플리케이션 이름을 입력합니다.
App contact email 아래의 필드에 연락처 이메일 주소를 입력합니다.
Create app 버튼을 선택하여 저장합니다.

아래에 제공된 예시와 같이 자신만의 고유한 애플리케이션 이름과 이메일을 사용하세요.

Settings 탭으로 이동합니다.
Basic 하위 탭을 선택합니다.
App ID를 찾습니다.

App ID를 안전한 곳에 복사하세요. 나중에 Facebook SDK를 설정하는 데 사용합니다.

화면 왼쪽의 메뉴로 이동하여 Products 항목을 선택합니다.
Facebook Login 영역에서 Configure를 찾고 드롭다운 메뉴에서 Settings를 선택합니다.

페이지는 아래와 같은 예시를 표시하도록 열립니다.

Client OAuth와 Web OAuth가 모두 켜져 있는지(Yes로 표시됨) 확인합니다.
Valid OAuth redirect URIs를 자신의 인증 페이지 URI로 설정합니다.

이 경우 playfab.example이 됩니다.

Client OAuth Settings 화면에서:

Login with the JavaScript SDK가 켜져 있는지(Yes로 표시됨) 확인합니다.
Valid OAuth redirect URIs를 자신의 인증 페이지 URI로 설정합니다.

이 경우 playfab.example이 됩니다.

Save Changes를 선택하여 커밋합니다.

Application Manager 페이지에서:

메뉴에서 **Settings/Basic (1)**을 엽니다.
Add Platform (2) 버튼을 선택합니다.

화면에 팝업이 나타납니다.

Website icon을 선택합니다.
그런 다음 Next를 선택합니다.

Website 구성 패널이 이제 나타나야 합니다.

Site URL 필드에 자신의 인증 페이지 URL을 입력합니다(이 경우 playfab.example).
Save changes를 선택하여 커밋합니다.

테스트

다음 HTML 파일을 사용하여 Facebook을 통한 PlayFab 인증을 테스트합니다.

YOUR-APPLICATION-ID와 YOUR-PLAYFAB-TITLE을 자신의 값으로 교체하세요.

<!DOCTYPE html>
<html>
<head>
   <script>
        // This function will be called when Facebook SDK is loaded
        window.fbAsyncInit = function() {

            // Make sure to use your own App ID for the configuration
            FB.init({
                appId      : 'YOUR-APPLICATION-ID',
                xfbml      : true,
                version    : 'v2.9'
            });

            // Record PageView event for analytics
            FB.AppEvents.logPageView();
        };

        // Facebook SDK loader. Creates a script entry to load the SDK
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Facebook Auth Example</p>
    <button onclick="loginWithFacebook()">Log In with Facebook</button>
    <script>
        // This method is invoked when you press the button
        function loginWithFacebook() {
            logLine("Logging in via Facebook...");

            // Standard practice: make call to FB.login.
            // This will show Facebook popup window. To prevent browsers from locking it,
            // always make sure to call it from Button click event
            FB.login(function(response){
                if(!response.authResponse){
                    logLine("Problem authenticating via Facebook!");
                } else {
                    loginWithPlayfab(response.authResponse.accessToken);
                }
            });
        }

        function loginWithPlayfab(accessToken){

            logLine("Logging in via PlayFab...");

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

Facebook 애플리케이션 구성 중에 설정한 도메인(이 경우 playfab.example)을 사용하여 서버에서 다음 파일을 요청합니다.

Facebook Auth Example 페이지가 열리면 Log In with Facebook 버튼을 선택합니다.
팝업 창의 Facebook 지시 사항을 따릅니다.

출력을 확인합니다. PlayFab 세션 티켓을 얻게 됩니다. 이 시점에서 HTML5와 JavaScript를 사용하여 PlayFab와 Facebook 인증을 성공적으로 구성했습니다.

​요구 사항

​서버 및 도메인

​Facebook 애플리케이션 등록

​테스트

요구 사항

서버 및 도메인

Facebook 애플리케이션 등록

테스트