JavaScript SDK를 활용한 Facebook 로그인 및 게시물 포스팅 방법을 소개해드리겠습니다.
페이스북 계정만 있으면, 웹사이트에 10분만에 예제코드를 적용시킬 수 있습니다.
먼저 아래의 사이트로 접속합니다
https://developers.facebook.com
Facebook API를 이용하여 특정사이트나 앱에서 이용하기 위해서는 등록절차가 필요합니다.
새앱 추가 버튼을 통해 앱을 등록합니다.
등록절차를 마치면 앱이 생성됩니다.
앱을 선택하면 아래와 같이 대시보드에서 앱 ID와 앱 시크릿 코드를 확인할 수 있습니다.
앱 ID와 앱 시크릿 코드는 Facebook API를 이용하는데 필요한 정보로 활용됩니다.
기본설정에서 플랫폼 추가 버튼을 눌러줍니다.
원하는 플랫폼을 선택해줍니다.
반영할 사이트의 URL을 입력합니다.
기재된 주소와 일치하는 곳에서만 API 이용이 가능하기 때문에
반드시 확인하여야 합니다.
여기까지 기본적인 앱 등록절차가 완료되었습니다.
이제 예제코드와 함께 로그인과 포스팅 과정에 대해 설명드리겠습니다.
로그인 및 포스팅 소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div> <fb:login-button scope="public_profile,email,publish_actions"onlogin="checkLoginState();"> 로그인 </fb:login-button> </div> <div> <button id="posting" onclick="posting()">포스팅</button> </div> </body> <script> // Load the SDK asynchronously (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')); window.fbAsyncInit = function() { FB.init({ appId : 750595375079993, cookie : true, xfbml : true, version : 'v2.5' }); }; //로그인 여부를 확인합니다. function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } function statusChangeCallback(response) { console.log('response를 통해 다양한 정보를 확인할 수 있습니다.'); console.log(response); if (response.status === 'connected') { console.log('사용자가 Facebook에 로그인하고 앱에 로그인했습니다'); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); }); } else if (response.status === 'not_authorized') { console.log('사용자가 Facebook에 로그인했지만 앱에 로그인하지 않았습니다.'); } else { console.log('사용자가 Facebook에 로그인하지 않았으므로 앱에 로그인했는지 알 수 없습니다'); } } function posting() { FB.api( '/me/feed','post', {"message" : "안녕하세요?"}, function(response) { console.log('facebook-response:', response); if (response && !response.error) { alert("포스팅 성공!"); } else { console.log("포스팅 실패!"); } }); } </script> </body> </html> | cs |
실행화면 입니다.
로그인 버튼을 누르면 로그인창이 팝업됩니다.
로그인이 완료되면 앱에서 사용자의 담벼락에 포스팅할 수있는 권한을 요청하는 창이 팝업되는데,
이는 페이스북 로그인 버튼의 scope 속성에서 publish_actions이라는 값을 설정하면
사용자에게 포스팅 권한을 요청하게 됩니다.
텍스트 상자에 담벼락에 게시할 내용을 입력하고 포스팅 버튼을 클릭합니다.
포스팅 성공! 메세지와 함께 게시물 포스팅이 완료되었습니다.
콘솔 화면입니다.
마지막으로 페이스북 담벼락에 반영된 모습입니다.
게시된 시간 옆에 앱 이름이 기재되어 있는것을 확인할 수 있습니다.
예제를 통해 간단하게 페이스북 로그인과 게시물 포스팅까지 정리해보았습니다.
AccessToken이나 Permissions과 같은 개념들을 학습한다면
더욱더 많은 Facebook API 이용이 가능해집니다.
아래의 주소로 접속하면 각종 Facebook 레퍼런스들을 확인할 수 있습니다.
https://developers.facebook.com/docs/
'유용한 정보' 카테고리의 다른 글
| VPN과 OpenVPN 사용법 (0) | 2016.12.04 |
|---|---|
| Facebook Photo Upload - 페이스북 포토 업로드 (Multi Photo Upload) (0) | 2016.11.22 |
| 아이폰 성공의 바탕 iOS의 숨겨진 역사 (0) | 2016.04.04 |
| Google Analytics API 사용하기 - Javascript ver. (0) | 2016.03.18 |
| The State of Front-End Tooling – 2015 (0) | 2016.03.05 |