JSP - 페이스북 연동

인터넷 서핑 해도 뭔가 어려운 말만 늘어지게 쓰는 페이스북 API (영어를 못해서일수도 있지만) 에 대해

간단하게 정리를 해놓는게 낫다고 판단, 몇자 끄적입니다.

뭐 기본 원리도 알고 차근차근 하고 넘어가는게 좋지만... 여차하면 급한대로 만들고 차근차근 개인시간 있을때 공부 하는것도 좋을듯 해요

-script 연동

<script language="javascript" src="http://connect.facebook.net/ko_KR/all.js"></script>

이거 하나면 FB API  기능을 다 ~ 쓸수 있습니다. 참 쉽죠?

-기본 세팅 >> 자신이 사용할려는 스크립트의 전역 영역이나 따로 사용하는 페이지의 스크립트에 넣으시면 됩니다 

<script type="text/javascript>

 

window.fbAsyncInit = function() {   //페이지 로딩시 기본적으로 fb 세팅을 하는겁니다

  FB.init({   //기본 init 

   appId  : '/*사용하는 페북 앱의 id값 넣는곳... 이건 다른곳 찾아봐도 자세하게 나옵니다.*/', 

   status : true, // check login status

   cookie : true, // enable cookies to allow the server to access the session

   xfbml  : true, // parse XFBML

   oauth  : true // enable OAuth 2.0   기본세팅입니다. 그냥 따라 쓰면 됩니다. 

  <!-- API가 번전업이 됬다는 소리입니다. 꼭 넣어 주세요 -->

 });

 };

 

 (function(d){

    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

    js = d.createElement('script'); js.id = id; js.async = true;

    js.src = "//connect.facebook.net/en_US/all.js";

    d.getElementsByTagName('head')[0].appendChild(js);

  }(document));   //기본적으로 페이스북과 연동하는 세팅 입니다. 같이 써주면 됩니다.

 

</script>

이걸로 기본 세팅은 끝! 입니다

(여기서 </script> 했다고 정말로 스크립트 닫은후에 따로 스크립트를 열어서 작업 하시는분은 없으리라 믿습니다...)

이제 facebook login 를 눌렀을때 하는 로그인 연동을 먼저 해봅시다.

그냥 버튼이 하나 있다고 생각하고 그 버튼을 onclick 이벤트를 줘봅시다 

<input type="button" value="페이스북로그인!" onclick="loginFB()" />

이런형식으로요~ (뭐 디자인이 나와있거나 하면 맞춰서 <a>에 스크립트를 추가하시던지 하시면 됩니다~)

페이스북에 연동을 체크 하는부분은 FB.login 을 사용하시면 됩니다

function loginFB(){

 

 

FB.login(function(response) {

if (response.authResponse) {

     // callback 영역입니다. 자신의 브라우저가 페북에 연동되면 여기로직을 처리 하게 되죠

} else {

     //오류가 났거나 연동이 실패 했을때 처리 하는부분..... 

       }

     }

 , {scope: "user_about_me,publish_stream,read_friendlists,offline_access,email,user_birthday"} 

);

}

scope=허용받는 권한 영역입니다, 이부분이 좀 중요하다고 볼수 있는데요. 처음의 자기 앱에 허용을 했을때 허용받은 권한만큼 보여줄수 있습니다. 

기본적으로 사용할수 있는건 face api 에 나와 있으니 참조 하시면 되구요....일단! 주로 사용하는것들은 써두는게 좋죠!

user_about_me : 사용자의 본인 정보에 대해서 가져 올수 있습니다. 근데 못가져오는게 많아요... 바로 email 과 생년 월일 입니다, 그래서 이 정보도 가져올려면 따로 권한을 얻어서 써야 합니다.

publish_stream : 기본적인 대신 쓰기 권한을 받습니다. 이거 없으면 뭐.. 포스팅을 못하니 정말 중요한거죠

read_friendlists : 친구 목록 가져오기 입니다. 자신의 사이트를 사용자의 친구들에게 홍보하기 용으로 쓰이죠... 기본적으로 sns연동은 광고도 필요하기 때문에 친구 목록을 가져와서 초대 기능을 만드는게 정석이죠

email : 사용자의 이메일을 가져옵니다.

user_birthday : 사용자의 생일 정보를 가져옵니다

기본적으로 페북과 연동해서 쓸때 중요하게 쓰이는게 access_token 입니다. 이 토큰키를 가지고 있어야 기본적인 로직을 사용할수 있습니다!

기본적인 사용법이라면 전역에 변수를 하나 선언해놓고 FB.login 해서 정상적으로 인증을 받았을때 저장을 해놓는것이죠

var FBtoken = "";

function loginFB(){

 

FB.login(function(response) {

if (response.authResponse) {

   FBtoken =  response.authResponse.accessToken;

} else {    

       }

     }

 , {scope: "user_about_me,publish_stream,read_friendlists,offline_access,email,user_birthday"} 

);

}

 

이렇게 저장을 해놓으면 됩니다! 또 다른 방식이라면 (FB.api 기능을 사용할때 미리 한번 인증 해놓으면 브라우저가 자동 저장을 해놓기 때문에 이방식으로 쓰는게 더 편할수도 있습니다) 아예 로그인 여부 변수를 선언 해놓고 처리를 하는 방식입니다. FB API 는 로그인여부를 확인할때 브라우저에 페북 로그인이 되어 있고 해당앱에 대해 권한을 승인을 한 경우라면 빠르게 인식해 주기 때문에 사용하기 편합니다 (페북에서 다른 앱을 사용할때 전에 이미 사용을 했던거라면 승인창이 아니라 작은 팝업창이 살짝 떴다가 사라지는걸 볼수 있는데 이게 바로 그 기능입니다.)

var fabceloginChk = 0;

function loginFB(){

if(fabceloginChk == 0){

 

FB.login(function(response) {

if (response.authResponse) {

 fabceloginChk  = 1;

} else {   

alert('로그인에 실패했습니다!!!');

fabceloginChk  = 0;

       }

     }

 , {scope: "user_about_me,publish_stream,read_friendlists,offline_access,email,user_birthday"} 

);

}

}

이렇게 전역적으로 체크값을 지정해주고 사용하면 한번 login 인증을 받고 무난하게 사용 할수 있습니다

연동 로그인에 대해서는 이정도면 무난하고 그다음 필요한건

회원정보 가져오기

친구목록 가져오기

담벼락에 글남기기

정도 되겠네요

회원인증이 정상적으로 되었으면 

FB.api 로 쉽고 빠르게 해당하는 로직을 처리 할수 있습니다

*해당하는 function 은 임의로 쓴거니 사용하실때는 맞춰서 쓰시면 됩니다

회원정보 가져오기

function getMyProfile(){

FB.api('/me',function(user){

var myName= user.name ;

          var myEmail = user.email;

                  var myId = user.id;

 });

FB.api('/me/picture?type=large',function(data){

var myImg = data.data.url;

});

 

 

}

/me 는 개인정보

/me/picture 는 개인사진 정보를 가져오게 됩니다. (type=large 일경우엔 큰사진, default 로는 작은 이미지를 가져옵니다)

친구목록 가져오기

*친구목록은 FB.api 의 기능중에 fql.query 로 직접 필요한 컬럼을 가져오는 쿼리를 넣으시면 됩니다. 기본적으로 from where 절까지는 기본적인 DBMS 쿼리지만 뒤에 사용하는 방식은 약간 다릅니다.. 다른조건을 채워볼려고 이것저것 넣어봤는데.. 잘 안되드라구요... 킁! 기본적인 정보를 가져오는 fql.query 경우에는 facebook developer 를 참조 하시면 됩니다~ 라지만 뭐 일단은 기본적인걸로 썼습니다

function getMyFBfriends(){

FB.api(

{

   method: 'fql.query'

 , query: 'SELECT uid, name, email, birthday, pic_square, online_presence  FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me())' 

}

  ,function(response) {

      for(var i=0; i < response.length; i++){

     //솰랴솰랴~ 리스트 작업~

     //위의 쿼리의 컬럼에 맞춰서 response[i].name 이렇게 가져와서 디자인에 맞게 꾸미면 됩니다~   

}

}

 

}

초대 메세지 날리기

*는 위의 친구목록 가져온다음에 친구이름에 <a href="javascript:invite(response[i].uid)"> 이렇게 친구의 고유 id번호로 초대 문구를 만들어서 보내는 작업을 하시면 됩니다

function inviteFB(fbId){

   var body = "당신을 초대 합니다!!!"; //초대문구. 잘 꾸며봅시다~

   var invDesc = "이 사이트는 당신에게 좋은 정보를 가지고 있을수도 있어요"; //간단한 설명 정도 되겠습니다~

   var path = '/'+fbId+'/feed';  

//FB.api 의 경로를 써줍니다 feed 경우엔 담벼락에 남기는 기능입니다 /me/feed 는 자신의 담벼락 /고유페북아이디/feed 경우엔 해당 사람의 담벼락에 글을 남기는 기능입니다.사진을 보내는 기능은 photos 가 있는데 이건 약간 다르게 해줘야 합니다. 초대 경우엔 담벼락으로 링크 공유만 해주면 되니 충분히 쓸수 있어요~

  var imgUrl = "같이 첨부해서 보내고 싶은 이미지"; //링크공유에 쓰는 이미지 입니다. 뭐 적당한 사이즈가 좋습니다

  var link = "http://www.whosclip.com"; //자신이 초대하고자 하는 사이트의 주소입니다. 전 여길 초대 하고 있어요 후훗...

//이런 형식으로 잘 맞춰서 집어 넣으면 끝!

 FB.api(path, 'Post', { 'link' :link , 'picture' : imgUrl   'caption' : body , 'description' : invDesc }, function(response) {

alert('초대 문구 발송 완료~');

}

});

}

간단하게 만들어 보면 어렵지 않을꺼에요~

시연 스샷이 있으면 좀더 편하겠지만... 

http://www.whosclip.com 에 있는 페이스북 관련 기본기능은 이것을 사용했습니다.

뭐 좀더 좋은 기능이나 유용한 팁이 있으면 피드백 주시면 감사하겠습니다 꾸벅꾸벅(__)