FACEBOOK SDK - 로그인, 정보 가져오기 SCRIPT
1. 페이스북 개발자 권한 등록
해당 URL로 접속하셔서 페이스북 로그인을 하게 되면 나오는 페이지입니다.
내앱을 선택하시고, 새로운 앱 추가를 해서 메뉴를 따라갑니다.
2. 앱 이름 설정
표시될 어플리케이션 이름을 입력해주세요.
3. 앱 플랫폼 추가
만들기를 누르시면 해당 어플리케이션 대시보드가 나옵니다. 설정>기본설정에 들어가시면 해당 앱의 설정을 볼 수 있는데
플랫폼을 추가해야 합니다. 플랫폼추가를 누르시면 다양한 플랫폼이 나오는데 본 글에서는 웹사이트 예제를 해보는 걸로,
웹사이트 플랫폼을 선택합니다.
4. URL 연결
플랫폼을 선택하시면 대시보드에 웹사이트 URL을 입력하는 부분이 추가가 됩니다.
여기서 연결을 원하시는 URL을 입력하시면 됩니다. 여기서 연결된 URL 이외의 사이트에서는 페이스북 SDK가 호출이 안되고, 당연히 이용도 안됩니다.
입력 후 저장을 눌러주세요.
그리고 대시보드에 앱 ID를 복사 하세요.
http://localhost/blog
5. 스크립트 코드 작성
해당 코드는 로그인과 더불어, 로그인한 사용자의 정보를 가져오는 스크립트 코드입니다.
페이스북 개발 도큐먼트롤 보시면 기본으로 페이스북에서 제공하는 버튼이 존재하지만,
저는 커스터마이징이 된 버튼이 필요해서 만들어 봅니다.
위에서 저장하신 앱 ID를 코드에 보이시는 APPID부분에 대체 해주시면 됩니다.
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 | <!DOCTYPE> <html> <head> <title>Start up - FACEBOOK</title> <meta charset="utf-8"> <script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> (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/ko_KR/sdk.js#xfbml=1&version=v2.8&appId=APPID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); window.fbAsyncInit = function() { FB.init({ appId : '{APPID}', cookie : true, xfbml : true, version : 'v2.8' }); FB.getLoginStatus(function(response) { console.log('statusChangeCallback'); console.log(response); if (response.status === 'connected') { $("#result").append("status : connected"); } else { $("#result").append(response); } }); }; function fbLoginAction() { FB.login(function(response) { var fbname; var accessToken = response.authResponse.accessToken; FB.api('/me?fields=id,name,age_range,birthday,gender,email', function(response) { var fb_data = jQuery.parseJSON(JSON.stringify(response)); var data = "<br/>fb_id : "+fb_data.id; data += "<br/>email : "+fb_data.email; data += "<br/>name : "+fb_data.name; $("#result").append(data); }); }, {scope: 'public_profile, email'}); } </script> </head> <body> <a href="javascript:void(0);" onclick="fbLoginAction();">FACEBOOK LOGIN</a> <p id="result"></p> </body> </html> | cs |
5. 결과
결과에 보이는 fb_id는 사용자 고유 아이디값이므로 페이스북 회원가입 기능을 염두해 두실때 아이디값으로 쓰시면 됩니다.
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| [최종] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, 순서변경, POST업로드 (6) | 2020.09.26 |
|---|---|
| jquery ajax (0) | 2020.09.21 |
| 드랍다운 메뉴 (0) | 2017.09.30 |
| 슬라이드 메뉴, 슬라이딩 메뉴 (0) | 2017.09.30 |
| 이미지 반복 롤링 배너 (7) | 2017.09.24 |
