Home » Blog » [Facebook API] 웹에서 페이스북 로그인 연동하기.

[Facebook API] 웹에서 페이스북 로그인 연동하기.

원문보기

 

홈페이지에서 페이스북을 연동하려면

먼저 페북 앱을 등록 해주어야 합니다.

페이스북 개발자 홈페이지에서

상단의 앱 카테고리를 클릭하여

앱을 등록해 주고, 진행합니다.

http://developers.facebook.com/?ref=pf

다른 것은 필요없이 빨간색 네모로 체크된 부분만 입력해주면 됩니다.

사이트 URL 같은 경우 IP와 도메인 모두 가능하니 자유롭게 사용하시면 됩니다.

이제 앱등록이 완료 됬다고 가정하고

다음으로는 페북 로그인 버튼이 들어가는 페이지를 만들어 보겠습니다.

여기서는 PHP 파일로 다루지만 다른 언어로 얼마든지 가능합니다.

예를 들어 아래 파일 login.php를 보여드리면,

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=euc-kr”>
  5. <title>Login page</title>
  6. <script type=“text/javascript” src=“js/jquery-1.7.1.min.js” charset=“utf-8”></script>
  7. <script type=“text/javascript”>
  8. //페이스북 SDK 초기화 
  9. window.fbAsyncInit = function() {
  10.     FB.init({appId: ‘사용자 앱ID’, status: true, cookie: true,xfbml: true});
  11. };
  13. (function(d){
  14.    var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
  15.    if (d.getElementById(id)) {return;}
  16.    js = d.createElement(‘script’); js.id = id; js.async = true;
  17.    js.src = “//connect.facebook.net/en_US/all.js”;
  18.    ref.parentNode.insertBefore(js, ref);
  19.  }(document));
  21. function facebooklogin() {
  22.     //페이스북 로그인 버튼을 눌렀을 때의 루틴.
  23.         FB.login(function(response) {
  24.             var fbname;
  25.             var accessToken = response.authResponse.accessToken;
  26.         }, {scope: ‘publish_stream,user_likes’});
  27. }
  28. </script>
  29. </head>
  31. —
  32. <div onclick=“facebooklogin()” style=“cursor: pointer;”>
  33.     <img src=“./res/fbloginbutton.jpg”>
  34. </div>
  36. —

Div는 <body> </body> 테그 안에 넣어줍니다.

Div 안의 이미지는 페이스북 로그인 아이콘을 적당히 오려서 만들어주시면 됩니다^^!

(경로 수정은 센스^^;)

이러고 페이지를 페북 앱에 등록한 URL에 똑같이 업데이트 해주고 돌리면 완료!

로그인 함수 뒷부분의 scope는 로그인을 하면서 사용자에게 어떠한 권한을 허락받을지를 설정합니다

예를 들어 페북 타임라인에 글올리기, 좋아요 하기 등등의 권한이 있는데 자세한 것은 페북 개발자 페이지를 참조하시길^^!

아, 또한 웹에서 페북으로 로그인한 사용자의 게시글이나 댓글을 관리하려면,

별도의 ID가 필요한데

위의 페북 login 함수내에서 다른 페북 API 함수를 통해

페북에서 사용자를 구분하는 ID와 사용자 이름, 사용자의 사진까지 얻을 수 있습니다.

얻어오는 방법은

view plaincopy to clipboardprint?
  1. FB.login(function(response) {
  2.     var fbname;
  3.     var accessToken = response.authResponse.accessToken;
  4.     FB.api(‘/me’, function(user) {
  5.                 fbname = user.name;
  6.         userid = user.id;
  7.     });
  8. }, {scope: ‘publish_stream,user_likes’});

 

+++추가 포스팅

여기까지 하면 끝이냐! 아쉽지만 아닙니다.

위에 까지 내용은 단순히 JavaScript를 통해 페이스북 계정의 정보를 얻어온 것이고,

이를 내 사이트에서 활용할라면 각 계정을 식별할수 있는 정보들을 DB에 저장해야 겠죠?

view plaincopy to clipboardprint?
  1. function facebooklogin() {
  2.     //페이스북 로그인 버튼을 눌렀을 때의 루틴.
  3.         FB.login(function(response) {
  4.             var fbname;
  5.             var accessToken = response.authResponse.accessToken;
  6.             FB.api(‘/me’, function(user) {
  7.                 fbname = user.name;
  8.                 //response.authResponse.userID
  9.                 $.post(“./php/fbloginprocess.php”, { “userid”: user.id, “username”: fbname, “fbaccesstoken”:accessToken},
  10.                 function (responsephp) {
  11.                     //댓글을 처리한 다음 해당 웹페이지를 갱신 시키기 위해 호출.
  12.                     location.replace(‘./index.php’);
  13.                 });
  14.             });
  15.         }, {scope: ‘publish_stream,user_likes’});
  16. }

따라서 위와 같이 로그인 과정이 이루어진 다음에 후속 과정을 위하여

JQuery라이브러리를 사용해 다음 과정을 php파일에서 이루어질 수 있게끔 합니다.

FaceBook로그인을 했다면

위와 같이, 페이스북에서 각 계정을 구분하는 id와 이름등을 가져올 수 있으므로

php파일에 넘길 때 이러한 정보들을 같이 넘겨

서버에 저장하게 합니다.

이제 서버에서 이러한 정보들을 저장하기 위해, php파일을 편집해보면,

view plaincopy to clipboardprint?
  1. $fbuserid = $_POST[userid];
  2. $fbusername = $_POST[username];
  3. $fbaccess = $_POST[fbaccesstoken];
  6. echo $fbuserid;
  7. echo “\n”;
  8. echo $fbusername;
  10. $db = new DBConnect(); //DB쓰는 php문서는 위 2줄 쓰고 시작
  12. $query = “SELECT * FROM Phoneskin_user where email='”.$fbuserid.“‘”;
  13. $result = $db->executeQuery($query);
  15. $result_count = $result->num_rows;
  17. if($result_count<1) {
  18.     //facebook으로 로그인한 아이디가 DB에 없을 경우.
  19.     $query2 = “INSERT INTO `mysql`.`Phoneskin_user` (`num`, `email`, `passwd`, `name`, `facebook_token`, `address`, `phone_number`, `user_picture_path`, `intro`) VALUES (NULL, ‘”.$fbuserid.“‘, NULL, ‘”.iconv(“utf-8”,“euc-kr”, $fbusername).“‘, NULL, NULL, NULL, ‘http://graph.facebook.com/”.$fbuserid.“/picture’, NULL)”;
  20.     $result2 = $db->executeQuery($query2);
  22.     $query = “SELECT * FROM Phoneskin_user where email='”.$fbuserid.“‘”;
  23.     $result = $db->executeQuery($query);
  24. }
  25. session_start();
  27. $row = mysqli_fetch_assoc($result);
  28. $_SESSION[‘num’] = $row[‘num’];
  29. $_SESSION[‘id’] = $row[’email’];
  30. //$_SESSION[‘name’] = iconv(“euc-kr”,”utf-8″, $row[‘name’]);
  31. $_SESSION[‘name’] = $row[‘name’];
  32. $_SESSION[‘user_picture_path’] = $row[‘user_picture_path’];
  33. $_SESSION[‘facebook’] = true;
  34. $_SESSION[‘fbtoken’] = $fbaccess;
 

와 같이 편집하시면 됩니다. 위의 쿼리는 테이블 구조에 따라 적당히 바꾸어 주시면 됩니다.

또한 로그인 할 때 세션처리를 해주시면 다른 페이지에서의 다른 작업들을 좀더 편하게 할 수 있습니다.

그림 이제 php파일을 실행을 마치면 아까 자바스크립트에서

facebooklogin()함수에서 남았던 부분. 즉 location.replace(‘./index.php’) 을 실행하게 되면서

다시 메인으로 돌아가게 되는데,

main.php에서는

view plaincopy to clipboardprint?
  1. <?php
  2.     session_start();
  3. ?>
  5. <head>
  6. <meta http-equiv=“Content-Type” content=“text/html; charset=euc-kr”>
  7. <title>Phone Skin</title>
  8. <script>
  9.     var fbacceesstoken = ‘<?php echo $_SESSION[‘fbtoken‘]?>’;
  10.     var currentusername = ‘<?php echo $_SESSION[‘name‘]?>’;
  11.     var userid = ‘<?php echo $_SESSION[‘id‘] ?>’;
  12.     var userpicpath = ‘<?php echo $_SESSION[‘user_picture_path‘] ?>’;
  13. </script>
  14. </head>

위의 헤더등을 통해 index페이지에서 댓글이나

회원 관련 페이지의 이동등을 좀 더 쉽게 이용할 수 있습니다.

이 포스팅을 찾으시는 분이 많아 좀 더 실질적으로 도움이 되고자

포스팅을 오랜만에 수정해봤는데요.

시간이 나면 다른 페이스북 API도 다뤄보는 포스팅을 하도록 하겠습니다^^;

Blog, Tech