Facebook 계정을 이용해서 회원가입 및 로그인

Facebook 계정을 이용해서 회원가입 및 로그인

Facebook은 2015년 기준 세계에서 가장 많이 이용되는 SNS입니다(출처: CIO). 그만큼 많은 사람들이 이미 계정을 가지고 있다는 뜻이죠. 게다가 많은 스마트폰은 이미 SNS가 로그인 되어있는 상태입니다. 그렇기 때문에 Facebook으로 로그인 할 수 있도록 한다면 사용자 확보가 더욱 쉬워질 것입니다.

이번 섹션에서는 Facebook을 이용해서 회원가입 하는 방법과 로그인 처리하는 방법을 알아봅니다.

Facebook에서의 사전 준비

Facebook 개발자 사이트를 통해 App을 생성해야합니다.

먼저 Facebook 개발자 사이트(http://developers.facebook.com)에 가입합니다. 개발자 가입 단계는 간단히 개인정보취급방침에 동의하면 완료됩니다.

가입을 완료하면 새 App을 생성합니다. 개발자 가입이 완료되면 바로 새 App 생성 페이지로 이동됩니다. 만약 이동되지 않으면 우측 상단의 내 앱 메뉴에서 새 앱 추가를 클릭하면 새 App을 추가할 수 있습니다.

App 생성이 완료되면 SDK 설정과 App 설정이 진행됩니다. 화면의 지침에 따라 설정을 진행합니다.

표시되는 SDK 코드(그림1, 그림2)를 Firebase Hosting에 반영해야합니다.

index.html 파일의 <body> 태그 아래에 SDK 코드를 삽입하고 다시 배포합니다. 배포 방법은 이전 강의에서 확인할 수 있습니다.

배포한 주소를 index.html까지 입력한 후 다음을 누르면 테스트 할 수 있는 코드가 출력됩니다(그림4).

해당 코드를 index.html 파일 </body> 이전에 삽입하고 다시 배포하면 페이지에 그림5와 같이 좋아요 버튼이 출력되는걸 볼 수 있습니다.

테스트가 완료되면 개발자 사이트 메인페이지에서 우측 상단의 내 앱을 누르고 새로 생성한 App의 이름을 클릭합니다.

화면의 표시되는 앱 ID와 앱 시크릿 코드를 메모합니다. 앱 시크릿 코드는 보기 버튼을 누르면 볼 수 있습니다.

앱 시크릿 코드는 App을 제어하는데 매우 중요한 코드이기 때문에 다른 사람에게 절대 알려주지 않아야 합니다.

Firebase에서의 사전 준비

Facebook에서의 사전 준비 단계가 많던 것에 반해 Firebase에서 할 작업은 매우 간단합니다.

먼저 Firebase Console의 좌측 메뉴에서 Auth를 선택하고 로그인 방법을 누릅니다.

Facebook을 선택하면 표시되는 화면에 이전에 메모한 앱 ID와 앱 시크릿 코드를 입력합니다.

이 때, 화면에 보이는 리디렉션 URI를 복사하고 저장을 눌러 설정을 저장합니다.

이제 다시 Facebook 개발자 사이트의 App 설정으로 이동해서, 좌측 메뉴의 Facebook 로그인을 선택합니다.

유효한 OAuth 리디렉션 URI에 복사한 URI를 붙여넣고 변경 내용 저장을 클릭합니다.

사전 준비가 모두 완료되었습니다.

코드 수정

기존 ex2의 코드를 복사헤서 ex3에 붙여넣습니다.

각 코드의 Google이라 적힌 부분을 Facebook으로 바꿉니다.

ex3/index.html

<!doctype html>
<html>
    <head>
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
        <script src="../firebase/init.js"></script>
        <script src="js/index.js"></script>
        <style>
            #authorized > div:nth-child(1) { font-size: 50px; }
            #authorized img#photo { height: 50px; border-radius: 25px; vertical-align: middle; }
        </style>
    </head>
    <body>
        <div id="signIn">
            <button onclick="signIn()">Sign In With Facebook(Popup)</button>
            <button onclick="signInWithRedirect()">Sign In With Facebook(Redirect)</button>
        </div>
        <div id="authorized">
            <div>Hello, <img id="photo" src="" /><span id="displayName"></span></div>
            <div>
                Email: <span id="email"></span><br />
                RefreshToken: <span id="refreshToken"></span><br />
                uid: <span id="uid"></span>
            </div>
            <div><button onclick="signOut()">Sign Out</button></div>
        </div>
        <div id="error">
            An error occurred: <span id="errmsg"></span><br />
            <button onclick="back();">Back</button>
        </div>
    </body>
</html>

ex3/js/index.js

$(document).ready(function() {
    $("#authorized").hide();
    $("#error").hide();
    
    firebase.auth().getRedirectResult()
        .then(signInSucceed)
        .catch(signInError);
});

function signIn() {
    var provider = new firebase.auth.FacebookAuthProvider();
    
    firebase.auth().signInWithPopup(provider)
            .then(signInSucceed)
            .catch(signInError);
}

function signInSucceed(result) {
    if (result.credential) {
        facebookAccountToken = result.credential.accessToken;
        user = result.user;

        $("#photo").attr("src", user.photoURL);
        $("#displayName").html(user.displayName);
        $("#email").html(user.email);
        $("#refreshToken").html(user.refreshToken);
        $("#uid").html(user.uid);

        $("#authorized").show();
        $("#signIn").hide();
    }
}

function signInError(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    var email = error.email;
    var credential = error.credential;

    var errmsg = errorCode + " " + errorMessage;

    if(typeof(email) != 'undefined') {
        errmsg += "<br />";
        errmsg += "Cannot sign in with your facebook account: " + email;
    }

    if(typeof(credential) != 'undefined') {
        errmsg += "<br />";
        errmsg += credential;
    }

    lastWork = "signIn";
    $("#error #errmsg").html(errmsg);
    $("#error").show();
    $("#signIn").hide();
    return;
}

function signInWithRedirect() {
    var provider = new firebase.auth.FacebookAuthProvider();
    
    firebase.auth().signInWithRedirect(provider);
}

function back() {
    $("#" + lastWork).show();
    $("#error").hide();
}

실행하면 아래와 같이 Facebook으로 로그인 할 수 있는 버튼을 볼 수 있습니다.