자바스크립트 앱에 페이스북 로그인 구현하는 방법
자바스크립트 앱에 페이스북 로그인 추가하기
소개
이 섹션에서는 Back4App을 통해 자바스크립트용 페이스북 API를 사용하는 방법을 안내합니다.
이 튜토리얼에서는 페이스북 SDK를 Parse 대시보드에 연결하는 방법과 페이스북 로그인, 가입, 로그아웃, 연결 및 연결 해제 기능을 구현하는 방법을 배울 것입니다.
아래에 언급된 단계를 따르면 다음과 같은 시스템을 구축할 수 있습니다: Back4App 자바스크립트 예제 페이스북 로그인 앱.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
- Back4App에 연결된 기본 JavaScript 앱.
- 앱을 위한 도메인.
- 버전 2.6.5 이상인 Parse 서버.
- 참고: Parse Facebook SDK는 2.6.5 이상의 Parse 서버에서만 작동하며, 이 튜토리얼에서 사용할 것입니다. 따라서, 더 낮은 버전의 Parse를 사용하고 있다면 업그레이드를 고려하세요.
1 - Facebook 설정
JavaScript용 Facebook SDK를 사용하려면 다음 단계를 따라야 합니다:
- 당신의 Facebook 앱을 설정하세요.
5. 그런 다음, 당신의 Facebook 앱에서 찾을 수 있는 Facebook 앱 ID를 추가하세요. 대시보드로 가세요. 6. 이 지침을 따라 Facebook JavaScript SDK를 애플리케이션에 로드하세요. 7. FB.init() 호출을 Parse.FacebookUtils.init() 호출로 교체하세요. 예를 들어, Facebook JavaScript SDK를 비동기적으로 로드하면, 당신의 fbAsyncInit 함수는 다음과 같이 보일 것입니다:
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,을 사용하면 서버 측에서 문제를 해결할 수 있습니다.
Facebook 로그인 버튼을 HTML과 CSS로 쉽게 디자인하려면 이 구현을 참조하세요: Facebook 로그인 버튼.
로그인 구현을 시작하려면 onClick 이벤트를 할당하여 Facebook 로그인 버튼에 다음 logIn 함수를 호출합니다. 이 함수를 만들기 위해 아래의 단계를 따르세요:
- Facebook과 함께 Parse로 로그인하려면 Parse.FacebookUtils.logIn을 사용하세요. 이 함수는 Facebook의 권한을 인수로 받습니다. 이 예제에서는 이러한 권한이 공개 프로필과 이메일에 해당합니다.
참고: Facebook 로그인 권한 참조를 참조하여 자세한 내용을 확인하세요.
2. 사용자가 이미 데이터베이스에 있는지 확인합니다. 만약 있다면, 다른 페이지로 리디렉션합니다. 3. FB.api를 호출하여 새로운 사용자에 대한 정보를 가져옵니다. 이 예제에서는 사용자의 ID, 이름, 이메일 및 권한에 접근할 수 있습니다.
참고: 이 기능에 대해 더 알고 싶다면 여기를 클릭하세요.
4. 사용자의 속성, 사용자 이름 및 이메일을 설정하고 데이터베이스에 저장합니다. 5. 페이지를 리디렉션합니다.
다음은 logIn() 코드입니다:
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에 로그인되어 있고 로그아웃하려는 경우에만 이 버튼을 사용해야 합니다.
Facebook 버튼에 대한 공식 Facebook 참조를 보려면 여기를 클릭하세요.
다음은 Facebook SDK를 사용하여 이 버튼을 구현하는 방법입니다:
1 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
2 data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
3 onlogin="logOutWithFacebook()"></div>참고: 이 요소에는 onlogin이라는 콜백이 있으며, 사용자가 로그아웃할 때 우리 함수 logOutWithFacebook을 호출합니다. 맞습니다: onlogin 이벤트는 로그아웃 시 발생합니다.
이 logOutWithFacebook 함수는 사용자를 현재 Parse 세션에서 로그아웃시키고 아래와 같이 다른 페이지로 리디렉션합니다:
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 열에서 확인할 수 있습니다:
열의 데이터를 사용하여 연결 및 연결 해제 기능을 검증할 수 있습니다.
4.1 단계 - 링크
현재 사용자가 다시 링크되기 전에 링크되어 있는지 확인하는 링크 기능입니다. 꽤 간단하며 Parse.FacebookUtils SDK를 사용합니다. 아래와 같이:
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를 호출하면 됩니다. 아래와 같이:
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 }"authData" 열로 가서 authData가 함수 호출 후 비어 있는지 확인하세요.
완료되었습니다!
이 시점에서, 당신은 Facebook 로그인 및 로그아웃 기능을 앱과 함께 구성하고 사용하는 방법뿐만 아니라, Back4App 및 Parse와 함께 사용하는 방법도 배웠습니다.
이제 당신은 Parse Facebook SDK의 사용을 마스터했으며, 마음대로 사용할 수 있습니다.
J에서 Parse SDK에 대해 더 알아보세요.JavaScript SDK API 참조 및 Parse 오픈 소스 문서 JavaScript SDK.