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

15 분

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