--- title: 자바스크립트 앱에 페이스북 로그인 구현하는 방법 slug: docs-kr/javascript/javascript-facebook-login description: 페이스북 SDK 및 Parse 대시보드로 JS 앱에 로그인, 가입, 로그아웃 구현. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-05T13:48:15.845Z --- # 자바스크립트 앱에 페이스북 로그인 추가하기 ## 소개 이 섹션에서는 Back4App을 통해 자바스크립트용 페이스북 API를 사용하는 방법을 안내합니다. 이 튜토리얼에서는 페이스북 SDK를 Parse 대시보드에 연결하는 방법과 페이스북 `로그인`, `가입`, `로그아웃`, `연결` 및 `연결 해제` 기능을 구현하는 방법을 배울 것입니다. 아래에 언급된 단계를 따르면 다음과 같은 시스템을 구축할 수 있습니다: [Back4App 자바스크립트 예제 페이스북 로그인 앱](http://js-fb-login.back4app.io/). :::hint{type="info"} 언제든지 이 튜토리얼로 구축된 전체 안드로이드 프로젝트에 접근할 수 있습니다. **[GitHub 저장소](https://github.com/back4app/javascript-facebook-login).** ::: ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - Back4App에 연결된 기본 JavaScript 앱. - **참고: **우리의 [JavaScript Install Parse SDK 튜토리얼](https://www.back4app.com/docs/javascript/parse-javascript-sdk)에서 생성된 앱을 사용하거나 Back4App에 연결된 다른 앱을 사용할 수 있습니다. - 앱을 위한 도메인. - **참고: **Facebook 로그인 API를 사용하려면 도메인이 필요합니다. 웹 호스팅에 대해 더 알고 싶다면 [Back4App 웹 호스팅 튜토리얼](https://help.back4app.com/hc/en-us/articles/360002120991-How-can-I-use-Back4App-webhosting)을 확인하세요. - 버전 2.6.5 이상인 Parse 서버. - **참고: **Parse Facebook SDK는 2.6.5 이상의 Parse 서버에서만 작동하며, 이 튜토리얼에서 사용할 것입니다. 따라서, 더 낮은 버전의 Parse를 사용하고 있다면 업그레이드를 고려하세요. ::: ## 1 - Facebook 설정 JavaScript용 Facebook SDK를 사용하려면 다음 단계를 따라야 합니다: 1. 다음으로 가세요 [Facebook 개발자 웹사이트](https://developers.facebook.com/), 계정을 만들고 앱을 만드세요. 2. 당신의 Facebook 앱을 설정하세요. 3. 왼쪽 메뉴에 있는 Facebook 로그인 > 빠른 시작을 클릭하여 Facebook 로그인을 활성화한 후, [Facebook 빠른 시작 문서](https://developers.facebook.com/docs/facebook-login/web)를 따라 활성화를 진행하세요. 4. Back4app과 당신의 Facebook 앱을 연결하려면, [Back4App ](https://www.back4app.com/)계정에 로그인하고, `서버 설정`에서 앱의 `설정`을 클릭하세요. 다음과 같이 보여야 합니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ixUc4J1oLUcmumlAis20W_image.png) 5\. 그런 다음, 당신의 Facebook 앱에서 찾을 수 있는 Facebook 앱 ID를 추가하세요. [대시보드](https://www.facebook.com/login.php?next=https%3A%2F%2Fdevelopers.facebook.com%2Fapps)로 가세요. 6\. [이 지침](https://developers.facebook.com/docs/javascript/quickstart/)을 따라 Facebook JavaScript SDK를 애플리케이션에 로드하세요. 7\. `FB.init()` 호출을 `Parse.FacebookUtils.init()` 호출로 교체하세요. 예를 들어, Facebook JavaScript SDK를 비동기적으로 로드하면, 당신의 `fbAsyncInit` 함수는 다음과 같이 보일 것입니다: :::CodeblockTabs init.js ```javascript 1 // Initialize Parse 2 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys 3 Parse.serverURL = "https://parseapi.back4app.com/"; 4 5 // Load the Facebook API asynchronous when the window starts loading 6 window.fbAsyncInit = function() { 7 Parse.FacebookUtils.init({ // this line replaces FB.init({ 8 appId : '{facebook-app-id}', // Facebook App ID 9 cookie : true, // enable cookies to allow Parse to access the session 10 xfbml : true, // initialize Facebook social plugins on the page 11 version : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard. 12 }); 13 14 // Put here code to run after the Facebook SDK is loaded. 15 }; 16 17 // Include the Facebook SDK 18 (function(d, s, id){ 19 var js, fjs = d.getElementsByTagName(s)[0]; 20 if (d.getElementById(id)) {return;} 21 js = d.createElement(s); js.id = id; 22 js.src = "//connect.facebook.net/en_US/sdk.js"; 23 fjs.parentNode.insertBefore(js, fjs); 24 }(document, 'script', 'facebook-jssdk')); ``` ::: ## 2 - 로그인 Facebook으로 *로그인*하는 함수를 만들어 사용자를 Parse 데이터베이스에 저장하세요. 안타깝게도 Facebook에서 제공하는 로그인 버튼을 사용할 수 없습니다. 왜냐하면 그것으로 로그인하면 새로운 사용자가 `Parse 대시보드`에 저장되지 않기 때문입니다. 그러나 [Parse SDK for Facebook](http://docs.parseplatform.org/js/guide/#facebook-users),을 사용하면 서버 측에서 문제를 해결할 수 있습니다. :::hint{type="info"} Facebook 로그인 버튼을 HTML과 CSS로 쉽게 디자인하려면 이 구현을 참조하세요: [Facebook 로그인 버튼](https://codepen.io/davidelrizzo/pen/vEYvyv). ::: 로그인 구현을 시작하려면 `onClick` 이벤트를 할당하여 Facebook `로그인` 버튼에 다음 logIn 함수를 호출합니다. 이 함수를 만들기 위해 아래의 단계를 따르세요: 1. Facebook과 함께 Parse로 로그인하려면 `Parse.FacebookUtils.logIn`을 사용하세요. 이 함수는 Facebook의 권한을 인수로 받습니다. 이 예제에서는 이러한 권한이 공개 프로필과 이메일에 해당합니다. :::hint{type="info"} 참고: [Facebook 로그인 권한 참조](https://developers.facebook.com/docs/permissions)를 참조하여 자세한 내용을 확인하세요. ::: 2\. 사용자가 이미 데이터베이스에 있는지 확인합니다. 만약 있다면, 다른 페이지로 리디렉션합니다. 3\. `FB.api`를 호출하여 새로운 사용자에 대한 정보를 가져옵니다. 이 예제에서는 사용자의 ID, 이름, 이메일 및 권한에 접근할 수 있습니다. :::hint{type="info"} **참고**: 이 기능에 대해 더 알고 싶다면 [여기를 클릭하세요](https://developers.facebook.com/docs/javascript/reference/FB.api). ::: 4\. 사용자의 속성, 사용자 이름 및 이메일을 설정하고 데이터베이스에 저장합니다. 5\. 페이지를 리디렉션합니다. 다음은 *logIn() * 코드입니다: :::CodeblockTabs login.js ```javascript 1 function logIn() { 2 Parse.FacebookUtils.logIn("public_profile,email", { 3 success: function(user) { 4 if (!user.existed()) { 5 FB.api('/me?fields=id,name,email,permissions', function (response) { 6 user.set('username', response.name); 7 user.set('email', response.email); 8 9 user.save(null, { 10 success: function(user) { 11 alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email')); 12 13 // You should redirect the user to another page after a successful login. 14 window.location.replace('http://js-fb-login.back4app.io/logout.html'); 15 }, 16 error: function(user, error) { 17 alert('Failed to save user to database with error: ' + error.message); 18 } 19 }); 20 }); 21 } else { 22 alert("User logged in through Facebook!"); 23 // You should redirect the user to another page after a successful login. 24 window.location.replace('http://js-fb-login.back4app.io/logout.html'); 25 } 26 }, 27 error: function(user, error) { 28 console.log("User cancelled the Facebook login or did not fully authorize."); 29 } 30 }); 31 } ``` ::: ## 3 - 로그아웃 로그아웃 기능은 로그인 기능보다 훨씬 간단합니다. 이번에는 Facebook에서 제공하는 버튼을 사용할 수 있습니다. 그러나 이 버튼은 로그아웃 용도로만 사용되며, 로그인하려면 Parse의 기능을 사용해야 합니다. 따라서 사용자가 이미 Facebook에 로그인되어 있고 로그아웃하려는 경우에만 이 버튼을 사용해야 합니다. :::hint{type="info"} Facebook 버튼에 대한 공식 Facebook 참조를 보려면 [여기](https://developers.facebook.com/docs/facebook-login/web/login-button)를 클릭하세요. ::: 다음은 Facebook SDK를 사용하여 이 버튼을 구현하는 방법입니다: :::CodeblockTabs logout.html ```html 1
``` ::: :::hint{type="info"} **참고**: 이 요소에는 `onlogin`이라는 콜백이 있으며, 사용자가 로그아웃할 때 우리 함수 `logOutWithFacebook`을 호출합니다. 맞습니다: `onlogin` 이벤트는 로그아웃 시 발생합니다. ::: 이 `logOutWithFacebook` 함수는 사용자를 현재 Parse 세션에서 로그아웃시키고 아래와 같이 다른 페이지로 리디렉션합니다: :::CodeblockTabs logout.js ```javascript 1 function logOutWithFacebook() { // The callback function 2 Parse.User.logOut(); // Delete the current session for the user 3 alert('User logged out of Facebook!'); 4 window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage 5 } ``` ::: ## 4 - 연결 및 연결 해제 Parse Facebook에서 사용할 수 있는 마지막 기능은 `연결` 및 `연결 해제` 기능입니다. 연결은 기존의 `Parse.User`를 그의 Facebook 계정에 연결하는 행위이며, **연결 해제**는 이 연결을 제거하는 것을 의미합니다. 이 연결은 `Parse 대시보드`에서 `authData` 열에서 확인할 수 있습니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/uZ1mtNyTrWfLZTcBs0mon_image.png) 열의 데이터를 사용하여 `연결` 및 `연결 해제` 기능을 검증할 수 있습니다. ### 4.1 단계 - 링크 현재 사용자가 다시 링크되기 전에 링크되어 있는지 확인하는 `링크` 기능입니다. 꽤 간단하며 `Parse.FacebookUtils` SDK를 사용합니다. 아래와 같이: :::CodeblockTabs link.js ```javascript 1 function link() { 2 var user = Parse.User.current(); 3 if (!Parse.FacebookUtils.isLinked(user)) { 4 Parse.FacebookUtils.link(user, null, { 5 success: function(user) { 6 alert("Woohoo, user logged in with Facebook!"); 7 }, 8 error: function(user, error) { 9 alert("User cancelled the Facebook login or did not fully authorize."); 10 } 11 }); 12 } 13 else { 14 alert("Can't link user to facebook because he is already linked"); 15 } 16 } ``` ::: ### 4.2 단계 - 언링크 현재 Parse 사용자에서 `언링크` 기능을 호출하려면, `Parse.FacebookUtils.unlink`를 호출하면 됩니다. 아래와 같이: :::CodeblockTabs unlink.js ```javascript 1 function unlink() { 2 var user = Parse.User.current(); 3 Parse.FacebookUtils.unlink(user, { 4 success: function(user) { 5 alert("The user is no longer associated with their Facebook account."); 6 } 7 }); 8 } ``` ::: :::hint{type="info"} "authData" 열로 가서 `authData`가 함수 호출 후 비어 있는지 확인하세요. ::: ## 완료되었습니다! 이 시점에서, 당신은 Facebook `로그인` 및 `로그아웃` 기능을 앱과 함께 구성하고 사용하는 방법뿐만 아니라, Back4App 및 Parse와 함께 사용하는 방법도 배웠습니다. 이제 당신은 `Parse Facebook SDK`의 사용을 마스터했으며, 마음대로 사용할 수 있습니다. :::hint{type="success"} J에서 Parse SDK에 대해 더 알아보세요.[JavaScript SDK API 참조](https://parseplatform.org/Parse-SDK-JS/api/4.3.1/) 및 [Parse 오픈 소스 문서 JavaScript SDK](https://docs.parseplatform.org/js/guide/#facebook-users). :::