JSP로 페이스북과 연동하기!

한동안 과제철에 선거철에 이 일 저 일하느라 블로그를 신경쓰지 못했습니다. 오늘 내용은 JSP를 이용해 페이스북을 연동하는 방법에 대한것입니다. 원래는 학교 과제로 만들게 된 것인데, 생각보다 어렵지도 않고 재미도 있더라구요. 

준비물은 다음과 같습니다.

* 멀쩡한 톰캣 서버

* JSP를 할줄 아는 프로그래머

* 페이스북 앱 ID

* Facebook4J

앞의 두개는 알아서 준비하시구요, 여기서는 아래꺼에 대해서 설명해드립니다.

https://developers.facebook.com/apps

여기에 들어가면 페이스북 앱을 만들수가 있습니다.

[새 앱 만들기]를 누르면 위와 같은 대화상자가 나오는데, 여기서 앱 이름과 카테고리를 설정하시면 됩니다. 네임스페이스는 필수는 아니니 생략해도 됩니다.

하면 짜잔! 위와 같이 앱이 만들어졌어요. 여기서 App ID와 App Secret은 나중에 페이스북을 연동하는게 꼭 필요하니 잘 봐두시구요.

[샌드박스 모드]라는게 있습니다. 이게 활성화되면 오직 관리자와 테스터만이 이 앱을 사용할 수가 있어요. 나중에 앱을 여럿이 쓰게하고 싶을때는 이걸 비활성화해주셔야합니다. 

우리는 웹을 연동할거니깐 Website with Facebook Login을 누르면 

이렇게 뜨는데요, 여기서 사용할 URL을 입력해야합니다. 가지고 있는 서버와 도메인이 있다면 그걸 입력하면 되고, 만약 그런게 없어서 집 컴퓨터로 연동하고 싶다면 집 컴퓨터 IP주소를 입력하셔도 됩니다. (톰캣을 설치했다면 http://~~~.~~.~~.~~~:8080/ 처럼 되겠지요?)

이렇게하면 페이스북 앱은 다 만들어진겁니다.

이제 할일은 facebook4j라는 라이브러리를 받는겁니다. 원래 페이스북은 Graph API라고하는 웹 API를 제공하는데요, 이걸 그대로 JSP에서 사용하기엔 조금 귀찮으니깐 앞선 개발자 분들이 친히 좋은 wrapper를 만들어놓으셨어요.

http://facebook4j.org/en/index.html

다운로드는 위에서 하시면 됩니다.

이제 본격적으로 개발을 시작할 수 있겠군요.

웹페이지에서 페이스북을 연동하기 위해서는 다음과 같은 절차가 필요합니다.

1. 페이지에서 페이스북에게 인증을 요청합니다. (이때 인증된 결과를 돌려받을 페이지를 넘겨주죠)

2. 페이스북에서 인증을 할 수 있는 페이지 주소를 제공합니다. (유저가 아이디와 비밀번호를 입력할 수 있는 페이지가 나타납니다.)

3. 유저가 페이스북에 로그인을 성공하면 1번에서 결과를 돌려받기로 했던 페이지로 인증 결과와 OAuthAccessToken을 넘겨줍니다.

(아래의 코드는 https://github.com/roundrop/facebook4j-oauth-example 의 코드를 참조하였습니다. 페이스북을 연동해서 포스팅을 하는 간단한 예제입니다.)

자 먼저 1번 역할을 하는 SignInServlet입니다.

import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import facebook4j.Facebook; import facebook4j.FacebookFactory; public class SignInServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Facebook facebook = new FacebookFactory().getInstance(); // facebook 인스턴스를 생성합니다. facebook.setOAuthAppId("AppID안알랴줌ㅋ", "AppSecret 안알랴줌ㅋ"); facebook.setOAuthPermissions("email, publish_actions, publish_stream, user_likes, friends_likes, read_stream"); // 권한 요청 request.getSession().setAttribute("facebook", facebook); // 세션에 현재 facebook 인스턴스를 등록ㅋ StringBuffer callbackURL = request.getRequestURL(); int index = callbackURL.lastIndexOf("/"); callbackURL.replace(index, callbackURL.length(), "").append("/callback"); // 콜백주소를 만들었어요. http://적절한주소/callback입니다 response.sendRedirect(facebook.getOAuthAuthorizationURL(callbackURL.toString())); // 인증을 요청하고 얻어온 주소로 리다이렉트합니다 } }

페북 연동으로 원하는 일을 잘 하려면 적절한 Permission이 필요한데요, 대표적인것들은 다음과 같습니다

email : 이메일 주소를 알아내는 권한

publish_stream : 담벼락에 게시물을 올릴 수 있는 권한

user_likes : 해당 유저가 좋아하는 페이지를 열람할 수 있는 권한

friends_likes : 해당 유저의 친구가 좋아하는 페이지를 열람할 수 있는 권한

read_stream : 유저 담벼락의 게시물들을 읽을수 있는 권한

자 이제 /callback에 연결된 CallbackServlet을 봅시다

import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import facebook4j.Facebook; import facebook4j.FacebookException; public class CallbackServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Facebook facebook = (Facebook) request.getSession().getAttribute("facebook"); // facebook 인스턴스를 가져오고 String oauthCode = request.getParameter("code"); // GET 메소드의 code로 넘어온 인증코드를 받구요 try { facebook.getOAuthAccessToken(oauthCode); // 이 인증코드를 이용해 Access Token을 얻어냅니다. } catch (FacebookException e) { response.getWriter().print(e); return; //throw new ServletException(e); } response.sendRedirect(request.getContextPath() "/"); // 처리가 끝나면 적절한 페이지로 리다이렉트! } }

짠, 이제 다른 페이지들에서는 Facebook facebook = (Facebook) request.getSession().getAttribute("facebook"); 로 facebook 인스턴스를 얻어와서 작업을 하면 됩니다. 인증이 다 끝난 상황이니까요!

(로그아웃 처리는 간단하게 세션을 무효화시키면 됩니다. request.getSession().invalidate(); 를 호출하면 되겠죠)

유저의 게시물에 좋아요를 누른 사람을 세는 일을 해봅시다.

Reading reading = new Reading(); // 이따가 다시 설명할거임 HashMap<String, Integer> hm = new HashMap<String, Integer>(); // 해당 uid의 유저가 나에게 좋아요를 누른 수를 세기 위한 해시맵입니다. HashMap<String, String> nameMap = new HashMap<String, String>(); // 해당 uid 유저의 이름을 넣기 위한 해시맵입니다. for(Iterator<Post> i = facebook.getStatuses(reading.limit(1000)).iterator(); i.hasNext();) { // Facebook.getStatuses 함수는 해당 유저(혹은 다른 유저)의 최근 상태 메세지를 가져옵니다. // 인자로 얼마나 어떻게 가져올 것인지를 지정할 수 있어요. // limit(1000)개는 최대 1000개의 게시물을 가져오겠다는 뜻입니다. Post post = i.next(); for(Iterator<Like> j = post.getLikes().iterator(); j.hasNext();) { // Post.getLikes 함수는 해당 포스트에 좋아요를 누른 사람 목록을 가져옵니다. Like like = j.next(); if(hm.get(like.getId()) == null) { hm.put(like.getId(), 1); // Like.getId는 좋아요 누른 사람의 uid // Like.getName은 좋아요 누른 사람의 이름을 얻어옵니다. nameMap.put(like.getId(), like.getName()); } else { hm.put(like.getId(), hm.get(like.getId()) 1); } } } // 이 반복문이 모두 돌고난 다음에는 // hm에는 uid별 좋아요 누른 개수가 // nameMap에는 uid별 이름이 저장되어있겠죠!

자세한 내용은 Facebook4J API를 뒤져보면 되는데, 얘가 애초에 Facebook Graph API를 래핑한거라 자세한 정보는 없습니다. 자세한 내용은 Facebook Graph API를 뒤져보는게 빠를수 있습니다.

재밌는거 많이 많이 만들수 있을듯ㅋ