웹사이트에 facebook 로그인 적용하기

안녕하세요 박스여우입니다.

오늘은 Android도, IOS도 아닌 웹에 Facebook Login 기능을 적용해 보는 방법을 알아보도록 하겠습니다.

우선 facebook javascript SDK를 적용하기 위해서

https://developers.facebook.com/apps 요기로 가서 Facebook SDK 앱 코드를 생성해야 합니다.

facebook 아이디로 로그인 하고, 지금 가입하기를 눌러서 facebook 개발자 가입을 시작합시다!

지금 가입하기를 누르면 facebook의 개인정보 취급방침을 동의하는 창이 표시됩니다.

그럼 동의를 하고 가입을 하면 되겠죠?

가입에 성공했습니다!

드디어 앱을 등록할 수 있는 창이 나왔습니다!

그럼 이제 사용할 플랫폼을 골라봅시다. 이번에는 웹에 적용하기로 했으니 웹사이트를 선택해 봅시다.

이름을 입력하라고 하네요

여기서 이름은 웹사이트의 주소가 아니라 단순히 facebook sdk에 등록되는 이름입니다.

앱 이름을 입력했습니다!

Create New Facebook App ID를 눌러 최종적으로 SDK를 사용할 APP ID를 생성합시다!

끝인줄 알았죠? 하지만 아닙니다...

SDK 사용에 대한 소식이나 정보를 받을 메일을 입력하고 등록하고자 하는 앱의 카테고리를 선택해서 정보를 등록해야 합니다.

정말, 진짜 마지막으로! 로봇을 체크하기 위해 인증절차를 거쳐야 합니다.

끝입니다! Facebook API를 사용할 앱 코드를 발급받는 과정이 모두 끝났습니다.

하지만 앱 코드만 받았다고 로그인 기능이 구현되는건 아닌건 다들 아시겠죠? ㅋㅋ

코드를 발급받은 창에서 조금만 스크롤을 내리면

Setup the Facebook SDK for JavaScript 라는 타이틀로 코드가 제공되어있습니다.

하지만 단순히 Facebook에 해당 웹사이트를 인증받는 코드 밖에 없어서 

아래의 제가 제공해 드리는 코드를사용하시는 것이 좀 더 편하실 듯 합니다.

<script>
        function statusChangeCallback(response) {
            console.log('statusChangeCallback');
            console.log(response);
            if (response.status === 'connected') {
                alert('로그인 성공!');
            } else if (response.status === 'not_authorized') {
                alert('Please log ' + 'into this app.');
            } else {
                alert('Please log ' + 'into Facebook.');
            }
        }
 
        function checkLoginState() {
            FB.getLoginStatus(function(response) {
                statusChangeCallback(response);
            });
        }
 
        window.fbAsyncInit = function() {
            FB.init({
                appId : '등록된 AppID',
                xfbml : true,
                version : 'v2.6'
            });
 
            FB.getLoginStatus(function(response) {
                statusChangeCallback(response);
            });
 
        FB.Event.subscribe('auth.logout', function(response) {
                document.location.reload();
        });
 
        };
 
        (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>

facebook에 로그인 상태를 요청하는 checkLoginState() 메소드와

로그아웃 되었을 시 페이지가 새로고침 되도록 하였습니다. (31번줄)

위의 코드를 html의 body 태그 속에 넣어주시면 됩니다.

마지막으로! 아래 코드를 사용해 facebook 로그인 버튼을 생성하시면 됩니다.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>

참! 제가 설명한 과정을 제대로 따라오셨다면 Facebook 로그인 기능이 작동되지 않을 겁니다.

사이트 주소를 등록해야 하기 때문이죠.... (죄송)

위에서 코드를 발급받고 나서 스크롤을 조금만 내리면 사이트의 URL을 입력하는 곳이 있는데

그곳에 해당 SDK를 사용할 사이트의 주소를 입력해주어야 합니다.

진짜 끝!