다음을 통해 공유


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

이 자습서는 Facebook 및 HTML5를 사용한 PlayFab 인증의 프로세스를 안내합니다.

요구 사항

참고 항목

이 활동에 필요한 요건을 보유하고 있는지 잘 모르겠는 경우 테스트용 HTTP 서버 실행 자습서를 참조하세요.

서버 및 도메인

PlayFab 인증을 설정하기 위한 요구 사항의 일부로, 따를 유효한 도메인이 있는 서버가 있어야 합니다. 등록된 도메인과 원격 웹 서버가 아직 없는 경우 유효한 도메인 이름을 가진 로컬 웹 서버를 실행하려면 테스트용 HTTP 서버 실행 자습서를 따르세요.

이 가이드 전체에서 도메인이 ['http://playfab.example'](http://playfab.example)이라고 가정합니다.

Facebook 애플리케이션 등록

Facebook 개발자 포털로 이동하여 시작합니다.

  1. 내 앱 단추를 선택합니다.

Facebook 새 앱 추가

  1. 새 앱을 만들려면 앱 만들기를 선택합니다.

Facebook에서 새 앱 만들기

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

  1. 애플리케이션 이름을 앱 이름 추가 아래 필드에 입력합니다.
  2. 연락을 받을 메일 주소를 앱 연락처 메일 아래 필드에 입력합니다.
  3. 저장하려면 앱 만들기 단추를 선택합니다.

참고 항목

아래 예시와 같이 고유한 앱 이름 및 메일을 입력했는지 확인합니다.

Facebook 새 앱 ID

  1. 설정 탭으로 이동합니다.
  2. 기본 하위 탭을 선택합니다.
  3. 앱 ID를 찾으세요.

참고 항목

앱 ID를 안전한 장소에 복사해 둡니다. 나중에 Facebook SDK 설정에 사용합니다.

Facebook 앱 ID 저장

  1. 화면 왼쪽 메뉴로 이동하여 제품 항목을 선택합니다.
  2. Facebook 로그인 영역에서 구성을 찾아 드롭다운 메뉴에서 설정을 선택합니다.

Facebook 로그인 시작

페이지가 열리면서 아래 예시가 보입니다.

  1. 클라이언트 OAuth웹 OAuth 모두 켜져 있는지(라고 표시) 확인합니다.
  2. Valid OAuth redirect URIs(유효한 OAuth 리디렉션 URI)를 자신의 인증 페이지 URI로 설정합니다.

참고 항목

이 경우 playfab.example입니다.

Facebook 로그인 제품 설정

Client OAuth Settings(클라이언트 OAuth 설정) 화면:

  1. JavaScript SDK 로그인이 켜져 있는지 확인합니다( 표시됨).
  2. Valid OAuth redirect URIs(유효한 OAuth 리디렉션 URI)를 자신의 인증 페이지 URI로 설정합니다.

참고 항목

이 경우 playfab.example입니다. 3. 변경 내용 저장을 선택하여 커밋합니다.

Facebook의 OAuth 리디렉션 URI 설정

Application Manager(애플리케이션 관리자) 페이지:

  • 메뉴에서 설정/기본(1)을 엽니다.
  • 플랫폼 추가(2) 단추를 선택합니다.

Facebook 애플리케이션 관리자 플랫폼 추가

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

  1. 웹 사이트 아이콘을 선택합니다.
  2. 그런 후 다음을 선택합니다.

Facebook의 플랫폼 웹 사이트 옵션 선택

웹 사이트 구성 패널이 나타납니다.

  1. 사이트 URL 필드에 인증 페이지 URL을 입력합니다(이 경우 playfab.example).
  2. 변경 내용 저장을 선택하여 커밋합니다.

Facebook 웹 사이트 구성 패널

테스트

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

참고 항목

YOUR-APPLICATION-IDYOUR-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)을 이용하여 서버에서 다음 파일을 요청합니다.

  1. Facebook 인증 예제 페이지가 열리면 Facebook으로 로그인 단추를 선택합니다.
  2. 팝업 창의 Facebook 지침을 따릅니다.

출력을 봅니다.

Facebook 인증 예제

PlayFab 세션 티켓을 받게 됩니다. HTML5 및 JavaScript를 사용한 PlayFab 및 Facebook 인증을 성공적으로 구성했습니다.