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

자바스크립트 앱에 페이스북 로그인 추가하기 소개 이 섹션에서는 back4app을 통해 자바스크립트용 페이스북 api를 사용하는 방법을 안내합니다 이 튜토리얼에서는 페이스북 sdk를 parse 대시보드에 연결하는 방법과 페이스북 로그인 로그인 , 가입 가입 , 로그아웃 로그아웃 , 연결 연결 및 연결 해제 연결 해제 기능을 구현하는 방법을 배울 것입니다 아래에 언급된 단계를 따르면 다음과 같은 시스템을 구축할 수 있습니다 back4app 자바스크립트 예제 페이스북 로그인 앱 언제든지 이 튜토리얼로 구축된 전체 안드로이드 프로젝트에 접근할 수 있습니다 unhandled content type github 저장소 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에 연결된 기본 javascript 앱 참고 우리의 javascript install parse sdk 튜토리얼 에서 생성된 앱을 사용하거나 back4app에 연결된 다른 앱을 사용할 수 있습니다 앱을 위한 도메인 참고 facebook 로그인 api를 사용하려면 도메인이 필요합니다 웹 호스팅에 대해 더 알고 싶다면 back4app 웹 호스팅 튜토리얼 을 확인하세요 버전 2 6 5 이상인 parse 서버 참고 parse facebook sdk는 2 6 5 이상의 parse 서버에서만 작동하며, 이 튜토리얼에서 사용할 것입니다 따라서, 더 낮은 버전의 parse를 사용하고 있다면 업그레이드를 고려하세요 1 facebook 설정 javascript용 facebook sdk를 사용하려면 다음 단계를 따라야 합니다 다음으로 가세요 facebook 개발자 웹사이트 , 계정을 만들고 앱을 만드세요 당신의 facebook 앱을 설정하세요 왼쪽 메뉴에 있는 facebook 로그인 > 빠른 시작을 클릭하여 facebook 로그인을 활성화한 후, facebook 빠른 시작 문서 를 따라 활성화를 진행하세요 back4app과 당신의 facebook 앱을 연결하려면, back4app 계정에 로그인하고, 서버 설정 서버 설정 에서 앱의 설정 설정 을 클릭하세요 다음과 같이 보여야 합니다 5\ 그런 다음, 당신의 facebook 앱에서 찾을 수 있는 facebook 앱 id를 추가하세요 대시보드 로 가세요 6\ 이 지침 을 따라 facebook javascript sdk를 애플리케이션에 로드하세요 7\ fb init() fb init() 호출을 parse facebookutils init() parse facebookutils init() 호출로 교체하세요 예를 들어, facebook javascript sdk를 비동기적으로 로드하면, 당신의 fbasyncinit fbasyncinit 함수는 다음과 같이 보일 것입니다 init js 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 대시보드 에 저장되지 않기 때문입니다 그러나 parse sdk for facebook ,을 사용하면 서버 측에서 문제를 해결할 수 있습니다 facebook 로그인 버튼을 html과 css로 쉽게 디자인하려면 이 구현을 참조하세요 facebook 로그인 버튼 로그인 구현을 시작하려면 onclick onclick 이벤트를 할당하여 facebook 로그인 로그인 버튼에 다음 login 함수를 호출합니다 이 함수를 만들기 위해 아래의 단계를 따르세요 facebook과 함께 parse로 로그인하려면 parse facebookutils login parse facebookutils login 을 사용하세요 이 함수는 facebook의 권한을 인수로 받습니다 이 예제에서는 이러한 권한이 공개 프로필과 이메일에 해당합니다 참고 facebook 로그인 권한 참조 를 참조하여 자세한 내용을 확인하세요 2\ 사용자가 이미 데이터베이스에 있는지 확인합니다 만약 있다면, 다른 페이지로 리디렉션합니다 3\ fb api fb api 를 호출하여 새로운 사용자에 대한 정보를 가져옵니다 이 예제에서는 사용자의 id, 이름, 이메일 및 권한에 접근할 수 있습니다 참고 이 기능에 대해 더 알고 싶다면 여기를 클릭하세요 4\ 사용자의 속성, 사용자 이름 및 이메일을 설정하고 데이터베이스에 저장합니다 5\ 페이지를 리디렉션합니다 다음은 login() 코드입니다 login js 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를 사용하여 이 버튼을 구현하는 방법입니다 logout html 1 참고 이 요소에는 onlogin onlogin 이라는 콜백이 있으며, 사용자가 로그아웃할 때 우리 함수 logoutwithfacebook logoutwithfacebook 을 호출합니다 맞습니다 onlogin onlogin 이벤트는 로그아웃 시 발생합니다 이 logoutwithfacebook logoutwithfacebook 함수는 사용자를 현재 parse 세션에서 로그아웃시키고 아래와 같이 다른 페이지로 리디렉션합니다 logout js 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 parse user 를 그의 facebook 계정에 연결하는 행위이며, 연결 해제 는 이 연결을 제거하는 것을 의미합니다 이 연결은 parse 대시보드 parse 대시보드 에서 authdata authdata 열에서 확인할 수 있습니다 열의 데이터를 사용하여 연결 연결 및 연결 해제 연결 해제 기능을 검증할 수 있습니다 4 1 단계 링크 현재 사용자가 다시 링크되기 전에 링크되어 있는지 확인하는 링크 링크 기능입니다 꽤 간단하며 parse facebookutils parse facebookutils sdk를 사용합니다 아래와 같이 link js 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 parse facebookutils unlink 를 호출하면 됩니다 아래와 같이 unlink js 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 authdata 가 함수 호출 후 비어 있는지 확인하세요 완료되었습니다! 이 시점에서, 당신은 facebook 로그인 로그인 및 로그아웃 로그아웃 기능을 앱과 함께 구성하고 사용하는 방법뿐만 아니라, back4app 및 parse와 함께 사용하는 방법도 배웠습니다 이제 당신은 parse facebook sdk parse facebook sdk 의 사용을 마스터했으며, 마음대로 사용할 수 있습니다 j에서 parse sdk에 대해 더 알아보세요 javascript sdk api 참조 및 parse 오픈 소스 문서 javascript sdk