JavaScript
자바스크립트 앱에 페이스북 로그인 구현하는 방법

15min
자바스크립트 앱에 페이스북 로그인 추가하기
소개
이 섹션에서는 Back4App을 통해 자바스크립트용 페이스북 API를 사용하는 방법을 안내합니다.
이 튜토리얼에서는 페이스북 SDK를 Parse 대시보드에 연결하는 방법과 페이스북 로그인, 가입, 로그아웃, 연결 및 연결 해제 기능을 구현하는 방법을 배울 것입니다.
아래에 언급된 단계를 따르면 다음과 같은 시스템을 구축할 수 있습니다: Back4App 자바스크립트 예제 페이스북 로그인 앱.
언제든지 이 튜토리얼로 구축된 전체 안드로이드 프로젝트에 접근할 수 있습니다. 
GitHub 저장소.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4App에 연결된 기본 JavaScript 앱.
참고: 우리의 JavaScript Install Parse SDK 튜토리얼에서 생성된 앱을 사용하거나 Back4App에 연결된 다른 앱을 사용할 수 있습니다.
앱을 위한 도메인.
참고: Facebook 로그인 API를 사용하려면 도메인이 필요합니다. 웹 호스팅에 대해 더 알고 싶다면 Back4App 웹 호스팅 튜토리얼을 확인하세요.
버전 2.6.5 이상인 Parse 서버.
참고: Parse Facebook SDK는 2.6.5 이상의 Parse 서버에서만 작동하며, 이 튜토리얼에서 사용할 것입니다. 따라서, 더 낮은 버전의 Parse를 사용하고 있다면 업그레이드를 고려하세요.
- Facebook 설정
JavaScript용 Facebook SDK를 사용하려면 다음 단계를 따라야 합니다:
다음으로 가세요 Facebook 개발자 웹사이트, 계정을 만들고 앱을 만드세요.
당신의 Facebook 앱을 설정하세요.
왼쪽 메뉴에 있는 Facebook 로그인 > 빠른 시작을 클릭하여 Facebook 로그인을 활성화한 후, Facebook 빠른 시작 문서를 따라 활성화를 진행하세요.
Back4app과 당신의 Facebook 앱을 연결하려면, Back4App 계정에 로그인하고, 서버 설정에서 앱의 설정을 클릭하세요. 다음과 같이 보여야 합니다:
﻿
그런 다음, 당신의 Facebook 앱에서 찾을 수 있는 Facebook 앱 ID를 추가하세요. 대시보드로 가세요.
이 지침을 따라 Facebook JavaScript SDK를 애플리케이션에 로드하세요.
FB.init() 호출을 Parse.FacebookUtils.init() 호출로 교체하세요. 예를 들어,
 Facebook JavaScript SDK를 비동기적으로 로드하면, 당신의 fbAsyncInit 함수는 다음과 같이 보일 것입니다:
init.js
 // Initialize Parse
 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys
 Parse.serverURL = "https://parseapi.back4app.com/";
4
 // Load the Facebook API asynchronous when the window starts loading
 window.fbAsyncInit = function() {
     Parse.FacebookUtils.init({ // this line replaces FB.init({
         appId      : '{facebook-app-id}', // Facebook App ID
         cookie     : true,  // enable cookies to allow Parse to access the session
        xfbml      : true,  // initialize Facebook social plugins on the page
        version    : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard.
    });
13
    // Put here code to run after the Facebook SDK is loaded.
};
16
// Include the Facebook 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'));
 // Initialize Parse
 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys
 Parse.serverURL = "https://parseapi.back4app.com/";
4
 // Load the Facebook API asynchronous when the window starts loading
 window.fbAsyncInit = function() {
     Parse.FacebookUtils.init({ // this line replaces FB.init({
         appId      : '{facebook-app-id}', // Facebook App ID
         cookie     : true,  // enable cookies to allow Parse to access the session
        xfbml      : true,  // initialize Facebook social plugins on the page
        version    : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard.
    });
13
    // Put here code to run after the Facebook SDK is loaded.
};
16
// Include the Facebook 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'));
﻿
- 로그인
Facebook으로 로그인하는 함수를 만들어 사용자를 Parse 데이터베이스에 저장하세요.
안타깝게도 Facebook에서 제공하는 로그인 버튼을 사용할 수 없습니다. 왜냐하면 그것으로 로그인하면 새로운 사용자가 Parse 대시보드에 저장되지 않기 때문입니다. 그러나 Parse SDK for Facebook,을 사용하면 서버 측에서 문제를 해결할 수 있습니다.
Facebook 로그인 버튼을 HTML과 CSS로 쉽게 디자인하려면 이 구현을 참조하세요: Facebook 로그인 버튼.
로그인 구현을 시작하려면 onClick 이벤트를 할당하여 Facebook 로그인 버튼에 다음 logIn 함수를 호출합니다. 이 함수를 만들기 위해 아래의 단계를 따르세요:
Facebook과 함께 Parse로 로그인하려면 Parse.FacebookUtils.logIn을 사용하세요. 이 함수는 Facebook의 권한을 인수로 받습니다. 이 예제에서는 이러한 권한이 공개 프로필과 이메일에 해당합니다.
참고: Facebook 로그인 권한 참조를 참조하여 자세한 내용을 확인하세요.
사용자가 이미 데이터베이스에 있는지 확인합니다. 만약 있다면, 다른 페이지로 리디렉션합니다.
FB.api를 호출하여 새로운 사용자에 대한 정보를 가져옵니다. 이 예제에서는 사용자의 ID, 이름, 이메일 및 권한에 접근할 수 있습니다.
참고: 이 기능에 대해 더 알고 싶다면 여기를 클릭하세요.
사용자의 속성, 사용자 이름 및 이메일을 설정하고 데이터베이스에 저장합니다.
페이지를 리디렉션합니다.
다음은 logIn()  코드입니다:
login.js
 function logIn() {
     Parse.FacebookUtils.logIn("public_profile,email", {
         success: function(user) {
             if (!user.existed()) {
                 FB.api('/me?fields=id,name,email,permissions', function (response) {
                     user.set('username', response.name);
                     user.set('email', response.email);
8
                     user.save(null, {
                        success: function(user) {
                            alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email'));

                            // You should redirect the user to another page after a successful login.
                            window.location.replace('http://js-fb-login.back4app.io/logout.html');
                        },
                        error: function(user, error) {
                            alert('Failed to save user to database with error: ' + error.message);
                        }
                    });
                });
            } else {
                alert("User logged in through Facebook!");
                // You should redirect the user to another page after a successful login.
                window.location.replace('http://js-fb-login.back4app.io/logout.html');
            }
        },
        error: function(user, error) {
            console.log("User cancelled the Facebook login or did not fully authorize.");
        }
    });
}
 function logIn() {
     Parse.FacebookUtils.logIn("public_profile,email", {
         success: function(user) {
             if (!user.existed()) {
                 FB.api('/me?fields=id,name,email,permissions', function (response) {
                     user.set('username', response.name);
                     user.set('email', response.email);
8
                     user.save(null, {
                        success: function(user) {
                            alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email'));

                            // You should redirect the user to another page after a successful login.
                            window.location.replace('http://js-fb-login.back4app.io/logout.html');
                        },
                        error: function(user, error) {
                            alert('Failed to save user to database with error: ' + error.message);
                        }
                    });
                });
            } else {
                alert("User logged in through Facebook!");
                // You should redirect the user to another page after a successful login.
                window.location.replace('http://js-fb-login.back4app.io/logout.html');
            }
        },
        error: function(user, error) {
            console.log("User cancelled the Facebook login or did not fully authorize.");
        }
    });
}
﻿
- 로그아웃
로그아웃 기능은 로그인 기능보다 훨씬 간단합니다. 이번에는 Facebook에서 제공하는 버튼을 사용할 수 있습니다. 그러나 이 버튼은 로그아웃 용도로만 사용되며, 로그인하려면 Parse의 기능을 사용해야 합니다. 따라서 사용자가 이미 Facebook에 로그인되어 있고 로그아웃하려는 경우에만 이 버튼을 사용해야 합니다.
Facebook 버튼에 대한 공식 Facebook 참조를 보려면 여기를 클릭하세요.
다음은 Facebook SDK를 사용하여 이 버튼을 구현하는 방법입니다:
logout.html
 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
      data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
      onlogin="logOutWithFacebook()"></div>
 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
      data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
      onlogin="logOutWithFacebook()"></div>
﻿
참고: 이 요소에는 onlogin이라는 콜백이 있으며, 사용자가 로그아웃할 때 우리 함수 logOutWithFacebook을 호출합니다. 맞습니다: onlogin 이벤트는 로그아웃 시 발생합니다.
이 logOutWithFacebook 함수는 사용자를 현재 Parse 세션에서 로그아웃시키고 아래와 같이 다른 페이지로 리디렉션합니다:
logout.js
 function logOutWithFacebook() { // The callback function
     Parse.User.logOut(); // Delete the current session for the user
     alert('User logged out of Facebook!');
     window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage
 }
 function logOutWithFacebook() { // The callback function
     Parse.User.logOut(); // Delete the current session for the user
     alert('User logged out of Facebook!');
     window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage
 }
﻿
- 연결 및 연결 해제
Parse Facebook에서 사용할 수 있는 마지막 기능은 연결 및 연결 해제 기능입니다.
연결은 기존의 Parse.User를 그의 Facebook 계정에 연결하는 행위이며, 연결 해제는 이 연결을 제거하는 것을 의미합니다. 이 연결은 Parse 대시보드에서 authData 열에서 확인할 수 있습니다:
﻿
열의 데이터를 사용하여 연결 및 연결 해제 기능을 검증할 수 있습니다.
1 단계 - 링크
현재 사용자가 다시 링크되기 전에 링크되어 있는지 확인하는 링크 기능입니다. 꽤 간단하며 Parse.FacebookUtils SDK를 사용합니다. 아래와 같이:
link.js
 function link() {
     var user = Parse.User.current();
     if (!Parse.FacebookUtils.isLinked(user)) {
         Parse.FacebookUtils.link(user, null, {
             success: function(user) {
                 alert("Woohoo, user logged in with Facebook!");
             },
             error: function(user, error) {
                 alert("User cancelled the Facebook login or did not fully authorize.");
            }
        });
    }
    else {
        alert("Can't link user to facebook because he is already linked");
    }
}
 function link() {
     var user = Parse.User.current();
     if (!Parse.FacebookUtils.isLinked(user)) {
         Parse.FacebookUtils.link(user, null, {
             success: function(user) {
                 alert("Woohoo, user logged in with Facebook!");
             },
             error: function(user, error) {
                 alert("User cancelled the Facebook login or did not fully authorize.");
            }
        });
    }
    else {
        alert("Can't link user to facebook because he is already linked");
    }
}
﻿
2 단계 - 언링크
현재 Parse 사용자에서 언링크 기능을 호출하려면, Parse.FacebookUtils.unlink를 호출하면 됩니다. 아래와 같이:
unlink.js
 function unlink() {
     var user = Parse.User.current();
     Parse.FacebookUtils.unlink(user, {
         success: function(user) {
             alert("The user is no longer associated with their Facebook account.");
         }
     });
 }
 function unlink() {
     var user = Parse.User.current();
     Parse.FacebookUtils.unlink(user, {
         success: function(user) {
             alert("The user is no longer associated with their Facebook account.");
         }
     });
 }
﻿
"authData" 열로 가서 authData가 함수 호출 후 비어 있는지 확인하세요.
완료되었습니다!
이 시점에서, 당신은 Facebook 로그인 및 로그아웃 기능을 앱과 함께 구성하고 사용하는 방법뿐만 아니라, Back4App 및 Parse와 함께 사용하는 방법도 배웠습니다.
이제 당신은 Parse Facebook SDK의 사용을 마스터했으며, 마음대로 사용할 수 있습니다.
J에서 Parse SDK에 대해 더 알아보세요.JavaScript SDK API 참조 및 Parse 오픈 소스 문서 JavaScript SDK.
JavaScript를 통한 Parse 앱 사용자 등록 및 로그인 구현
자바스크립트 프로젝트용 트위터 로그인 설정 가이드
자바스크립트 앱에 페이스북 로그인 구현하는 방법

자바스크립트 앱에 페이스북 로그인 추가하기

소개

전제 조건

1 - Facebook 설정

2 - 로그인

3 - 로그아웃

4 - 연결 및 연결 해제

4.1 단계 - 링크

4.2 단계 - 언링크

완료되었습니다!
