JS에서 Facebook 인증
이 튜토리얼은 Photon 사용자 정의 인증을 사용하여 Photon Cloud 애플리케이션에서 사용자를 Facebook 자격 증명으로 인증하는 방법을 안내합니다.
개요
Photon Cloud 사용자 정의 인증은 외부 서비스(인증 제공자, Authentication Provider)를 호출하여 사용자 인증을 확인하는 방식입니다.
인증 흐름의 개요는 일반 문서를 참고하세요.
인증하려는 서비스에 따라 여러 매개변수가 필요합니다.
이 매개변수에는 Photon Cloud 애플리케이션 설정에 지정하는 정적 매개변수와 Photon Cloud JavaScript Client API 호출 시 전달하는 동적 매개변수가 있습니다.
이 튜토리얼에서는 클라이언트 측에서 Facebook Login 플러그인을 사용하여 사용자의 Facebook 토큰을 가져오고, Photon 서버에서 Facebook 인증 제공자를 통해 토큰 유효성을 확인합니다.
Facebook 인증의 경우, 인증 제공자는 appid, secret, token 매개변수를 필요로 하며, Facebook에서 지정된 앱 ID에 대해 주어진 토큰이 유효한지 검사합니다.
구현 단계
기존 애플리케이션에서 사용자 정의 인증을 활성화하려면 몇 가지 간단한 단계가 필요합니다.
1. Facebook 앱 설정
Facebook 앱 설정에 대한 자세한 내용은 Facebook 문서를 참고하세요.
이 튜토리얼에서는 Facebook App ID와 App Secret이 필요합니다.
2. Photon Cloud 애플리케이션
Photon Cloud 관리 화면에서 애플리케이션의 상세 페이지로 이동합니다.
사용자 정의 인증 섹션을 확장하세요.
Facebook 인증을 위한 인증 URL은 Exit Games에서 설정합니다.
다음 두 매개변수를 설정합니다:
- appid = Facebook App ID
- secret = Facebook App Secret
설정을 저장하세요.
3. HTML5 / JavaScript 클라이언트
클라이언트는 Facebook 토큰을 전달해야 합니다.
HTML 문서 body 안에 Facebook 로그인 버튼 div를 추가하세요.
HTML
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" data-registration-url=""></div>
Facebook JavaScript SDK 로딩, Facebook 로그인 버튼 생성, Facebook 인증 상태 처리를 위한 코드를 추가합니다.
이 코드는 일반적으로 <body> 태그 바로 뒤에 배치하는 것이 좋습니다.
HTML
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.Event.subscribe('auth.authResponseChange', function (response) {
if (response.status === "connected") {
loadBalancingClient.setCustomAuthentication("token=" + response.authResponse.accessToken, 2);
loadBalancingClient.connect(true);
}
});
};
(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 = "https://connect.facebook.net/en_US/all.js#xfbml=1&appId=" + "<YOUR_APP_ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
위 코드는 Facebook JavaScript SDK를 비동기적으로 로드하고 Facebook 로그인 버튼을 생성합니다.
SDK 로딩이 완료되면 window.fbAsyncInit 함수가 호출됩니다.
이 함수는 Facebook의 auth.authResponseChange 이벤트에 핸들러를 등록하며, 사용자가 Facebook에 성공적으로 로그인하면 response.status = "connected" 이벤트가 발생합니다.
이때 사용자의 토큰이 핸들러로 전달됩니다.
핸들러는 클라이언트에 사용자 정의 인증 모드를 설정하고 인증 URL에 token 매개변수를 추가합니다.
그 후 마스터 서버와의 연결을 시작합니다.
4. 배포 및 실행
HTML5 / JavaScript 클라이언트 코드를 Facebook 앱 설정에 지정된 App Domains 중 하나에 배포해야 합니다.
이렇게 해야 Facebook 로그인 버튼이 올바르게 작동합니다.
사용자가 애플리케이션 페이지에 접속하면 Facebook 로그인 버튼을 누르고 Facebook 계정을 입력하여 Photon Cloud에 로그인할 수 있습니다.
이미 Facebook에 로그인된 경우, Photon Cloud에 즉시 로그인됩니다.