written by http://whitememo.tistory.com/196
여기서는 JavaScript로 된 페이스북 API를 사용하여
사이트의 로그인을 페이스북 계정으로 할수 있도록
알아보겠습니다.
홈페이지에서 페이스북을 연동하려면
먼저 페북 앱을 등록 해주어야 합니다.
페이스북 개발자 홈페이지에서
상단의 앱 카테고리를 클릭하여
앱을 등록해 주고, 진행합니다.
http://developers.facebook.com/?ref=pf
다른 것은 필요없이 빨간색 네모로 체크된 부분만 입력해주면 됩니다.
사이트 URL 같은 경우 IP와 도메인 모두 가능하니 자유롭게 사용하시면 됩니다.
이제 앱등록이 완료 됬다고 가정하고
다음으로는 페북 로그인 버튼이 들어가는 페이지를 만들어 보겠습니다.
여기서는 PHP 파일로 다루지만 다른 언어로 얼마든지 가능합니다.
예를 들어 아래 파일 login.php를 보여드리면,
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
- <title>Login page</title>
- <script type="text/javascript" src="js/jquery-1.7.1.min.js" charset="utf-8"></script>
- <script type="text/javascript">
- window.fbAsyncInit = function() {
- FB.init({appId: '사용자 앱ID', status: true, cookie: true,xfbml: true});
- };
- (function(d){
- var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
- if (d.getElementById(id)) {return;}
- js = d.createElement('script'); js.id = id; js.async = true;
- js.src = "//connect.facebook.net/en_US/all.js";
- ref.parentNode.insertBefore(js, ref);
- }(document));
- function facebooklogin() {
- FB.login(function(response) {
- var fbname;
- var accessToken = response.authResponse.accessToken;
- }, {scope: 'publish_stream,user_likes'});
- }
- </script>
- </head>
- --
- <div onclick="facebooklogin()" style="cursor: pointer;">
- <img src="./res/fbloginbutton.jpg">
- </div>
- --
Div는 <body> </body> 테그 안에 넣어줍니다.
Div 안의 이미지는 페이스북 로그인 아이콘을 적당히 오려서 만들어주시면 됩니다^^!
(경로 수정은 센스^^;)
이러고 페이지를 페북 앱에 등록한 URL에 똑같이 업데이트 해주고 돌리면 완료!
로그인 함수 뒷부분의 scope는 로그인을 하면서 사용자에게 어떠한 권한을 허락받을지를 설정합니다
예를 들어 페북 타임라인에 글올리기, 좋아요 하기 등등의 권한이 있는데 자세한 것은 페북 개발자 페이지를 참조하시길^^!
아, 또한 웹에서 페북으로 로그인한 사용자의 게시글이나 댓글을 관리하려면,
별도의 ID가 필요한데
위의 페북 login 함수내에서 다른 페북 API 함수를 통해
페북에서 사용자를 구분하는 ID와 사용자 이름, 사용자의 사진까지 얻을 수 있습니다.
얻어오는 방법은
- FB.login(function(response) {
- var fbname;
- var accessToken = response.authResponse.accessToken;
- FB.api('/me', function(user) {
- fbname = user.name;
- userid = user.id;
- });
- }, {scope: 'publish_stream,user_likes'});
+++추가 포스팅
여기까지 하면 끝이냐! 아쉽지만 아닙니다.
위에 까지 내용은 단순히 JavaScript를 통해 페이스북 계정의 정보를 얻어온 것이고,
이를 내 사이트에서 활용할라면 각 계정을 식별할수 있는 정보들을 DB에 저장해야 겠죠?
- function facebooklogin() {
- FB.login(function(response) {
- var fbname;
- var accessToken = response.authResponse.accessToken;
- FB.api('/me', function(user) {
- fbname = user.name;
- $.post("./php/fbloginprocess.php", { "userid": user.id, "username": fbname, "fbaccesstoken":accessToken},
- function (responsephp) {
- location.replace('./index.php');
- });
- });
- }, {scope: 'publish_stream,user_likes'});
- }
따라서 위와 같이 로그인 과정이 이루어진 다음에 후속 과정을 위하여
JQuery라이브러리를 사용해 다음 과정을 php파일에서 이루어질 수 있게끔 합니다.
FaceBook로그인을 했다면
위와 같이, 페이스북에서 각 계정을 구분하는 id와 이름등을 가져올 수 있으므로
php파일에 넘길 때 이러한 정보들을 같이 넘겨
서버에 저장하게 합니다.
이제 서버에서 이러한 정보들을 저장하기 위해, php파일을 편집해보면,
- $fbuserid = $_POST[userid];
- $fbusername = $_POST[username];
- $fbaccess = $_POST[fbaccesstoken];
- echo $fbuserid;
- echo "\n";
- echo $fbusername;
- $db = new DBConnect();
- $query = "SELECT * FROM Phoneskin_user where email='".$fbuserid."'";
- $result = $db->executeQuery($query);
- $result_count = $result->num_rows;
- if($result_count<1) {
- $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)";
- $result2 = $db->executeQuery($query2);
- $query = "SELECT * FROM Phoneskin_user where email='".$fbuserid."'";
- $result = $db->executeQuery($query);
- }
- session_start();
- $row = mysqli_fetch_assoc($result);
- $_SESSION['num'] = $row['num'];
- $_SESSION['id'] = $row['email'];
- $_SESSION['name'] = $row['name'];
- $_SESSION['user_picture_path'] = $row['user_picture_path'];
- $_SESSION['facebook'] = true;
- $_SESSION['fbtoken'] = $fbaccess;
와 같이 편집하시면 됩니다. 위의 쿼리는 테이블 구조에 따라 적당히 바꾸어 주시면 됩니다.
또한 로그인 할 때 세션처리를 해주시면 다른 페이지에서의 다른 작업들을 좀더 편하게 할 수 있습니다.
그림 이제 php파일을 실행을 마치면 아까 자바스크립트에서
facebooklogin()함수에서 남았던 부분. 즉 location.replace('./index.php') 을 실행하게 되면서
다시 메인으로 돌아가게 되는데,
main.php에서는
- <?php
- session_start();
- ?>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
- <title>Phone Skin</title>
- <script>
- var fbacceesstoken = '<?php echo $_SESSION['fbtoken']?>';
- var currentusername = '<?php echo $_SESSION['name']?>';
- var userid = '<?php echo $_SESSION['id'] ?>';
- var userpicpath = '<?php echo $_SESSION['user_picture_path'] ?>';
- </script>
- </head>
위의 헤더등을 통해 index페이지에서 댓글이나
회원 관련 페이지의 이동등을 좀 더 쉽게 이용할 수 있습니다.
이 포스팅을 찾으시는 분이 많아 좀 더 실질적으로 도움이 되고자
포스팅을 오랜만에 수정해봤는데요.
시간이 나면 다른 페이스북 API도 다뤄보는 포스팅을 하도록 하겠습니다^^;
'Programing > JavaScript' 카테고리의 다른 글
| 2013.04.10 |
| 2013.04.08 |
| 2012.08.04 |
| 2012.07.19 |
| 2012.06.06 |
| 2012.01.26 |
// https://developers.facebook.com/docs/javascript/reference/FB.api/
// v2.4
FB.api('/me', { locale: 'en_US', fields: 'name, email' },
function(response) {
console.log(response.email);
}
);'모바일개발(Mobile Dev) > 서버개발' 카테고리의 다른 글
| PHP Arrays Handle (0) | 2016.01.22 |
|---|---|
| about password (0) | 2016.01.22 |
| PHP remember me script (0) | 2016.01.15 |
| facebook : 앱 구성에 허용되지 않는 URL (0) | 2016.01.13 |
| php random string function (0) | 2016.01.13 |
가입하는거어디들어가야하는지갈켜주셔야
아 홈페이지가 리뉴얼 되서 좀 바꿨네요.
https://developers.facebook.com/
또는 http://developers.facebook.com/
가셔서 로그인 하신 후에
상단 메뉴에 Apps 가셔서 새앱만들기를 하신후 진행하시면 됩니다~
response.authResponse.accessToken;
여기서 오류가 떨어지는 이유가 뭘까용??
스크립트 전에 페이스북 API 초기화 부분이 제대로 되었는지 확인해 보세요~
아래소스가 로긴 함수 전에 제대로 동작하는지 확인해보셔야 할듯!
08.//페이스북 SDK 초기화
09.window.fbAsyncInit = function() {
10. FB.init({appId: '사용자 앱ID', status: true, cookie: true,xfbml: true});
11.};
12.
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));
유용한 정보인것 같습니다. 이거 스크랩 할 수 있을까요? 아니면 메일으로라도 자료를 받을 수 있을까요? 혹시 몰라서 메일 주소 남깁니다. shgotjr@hanmail.net
스크랩 해가셔도 됩니다~ 안되면 다시 댓글 달아주시면 메일 드리겠습니다
안녕하세요. 궁금한 게 있습니다. 게임에 페이스북 아이디를 사용코자 하는데, 이 경우 페이스북에 비용을 지불해야 하나요? 페이스북 내 앱 만들어도 봤는데, 그때는 어짜피 페북 결제 시스템을 이용해야 하니까 수익 쉐어가 확실한데요. 단지 페이스북 아이디와 친구 정보만 사용할 것인데 비용이 드는 것인지 궁금합니다. 부디 지혜를 나눠주시길. 감사합니다.
https://developers.facebook.com/policy/Korean/
여기 보시면 페이스북 아이디로 로그인 하는 게임을 만드시는건 문제가 없지만, 그것이 친구리스트등의 사용자 연결 관계를 제외한인증이라는 문장이 눈에 걸리네요. 가장 확실한 방법은 직접 페이스북 개발센터에 문의해 보시는게 좋지 않을까 싶습니다^^!
좋은 정보 감사합니다. 저는 asp를 사용하는데 asp도 페이스북 로긴 연동이 가능한가요?
예 물론 가능합니다.
페이스북 API는 자바스크립트로도 제공되기 때문에
서버 스크립트 언어(asp/jsp/php)와는 상관없이 쓰실수 있습니다.
감사합니다!! 많이 도움되었습니다..
혹시 밑에 궁금증즘 풀어주실수있나요 ㅡㅡㅋ
1. php 파일안에 jsp, php, asp 중복사용 가능한가요?
2. 왜 자신의 홈페이지에서 사용자 정보를 사용하는데 DB에 따로 저장해야되나요? (불러오고 그냥 사용하면 안되나요?)
1. php 파일안에 jsp, php, asp 중복사용 가능한가요?
-> php 파일안에서 jsp / php / asp 중복사용이 가능한지는 잘모르겠지만...일단 굳이 그렇게 할 필요가 있나 싶습니다.
php/asp/jsp 중 어느 하나만 정해서 해도 서버단에서 할 수 있는 작업을 다 할수 있는데 굳이 섞어 쓸 필요는 없다고 생각합니다.
2. 왜 자신의 홈페이지에서 사용자 정보를 사용하는데 DB에 따로 저장해야되나요? (불러오고 그냥 사용하면 안되나요?)
-> 사용자 정보를 단순히 보여주기만 한다면 그래도 상관없겠지만,
사용자가 홈페이지에 댓글을 남긴다거나 사용자의 흔적을 남길때
사용자를 홈페이지와 연결시켜주는 연결고리가 필요합니다.
이 때 보통은 별도의 ID를 사용하지만,
페이스북 연동 같은 경우
사용자에게 별도의 회원가입이 필요치 않게
하려는 목적이 있는 만큼,
페이스북에서 로그인 할 때 쓰는 아이디로
홈페이지와의 연결고리를 만들어 두는 것입니다.
(홈페이지의 컨텐츠와 사용자를 연결시키기 위한 연결고리 용도로
DB에 페이스북 ID를 저장한다고 보시면 됩니다)
아...궁금증이 해결됫내요 ㅋㅋ 백광님 감사합니다~
페이스북 로그인 창에서 로그인을 안하고 로그인창을 닫을 시에 authResponse.accessToken null 이라고 에러가 뜨는데 어떻게 해결해야하나요?
음 function안에서 aceestoken을 핸들링 하기 전에
if문으로 response가 null인지를 먼저 확인하면 될 거 같은데
해보지 않아서 잘 모르겠네요
facebook 로그인을 웹페이지에 입혀 웹페이지에서 직접 로그인한것과 같은 활동을 할 수 있도록 하게끔 하고싶은데요.. 현재 올려주신 소스는 php인데요 jsp로 구현하고싶은데.. 제가 php를 잘 알지 못해 jsp로 바꾸는 작업이 힘드네요..ㅠㅠ 혹시 jsp로 짜신 소스는 있으신가 여쭤보고싶습니다. 좋은 글 올려주셔서 감사한데 무리한 질문드려 죄송합니다! 번창하세요!
안타깝게도 jsp로 된 소스는 따로 가지고 있지 않네요.
그렇지만 루틴을 이해하신다면 jsp로 바꾸시는데 조금 더 수월하게 작업 하실 수 있으리라 생각됩니다.
정말 좋은 정보 감사합니다. 궁금한게 있는데요.
A사이트의 회원이 로그인을 하면...
페이스북도 자동로그인이 되게 기능을 구현하려고 합니다. (javascript + php) <-- 이런 기능 구현 가능한가요?
페이스북 api를 이용해서 로그인 기능을 구현하고, 페북의 사용자정보를 A사이트의 DB(id,name, access_token,email 등등)에 저장하는것 까지는 구현을 하긴 했는데..
회원의 페이스북 비밀번호 없이... 어떻게 페이스북에 자동로그인을 시켜야 할지 모르겠고,
A사이트 회원이 페이스북 로그아웃을 하게 되면 access_token값도 끊어지고, access_tokne 값도 만료가 되면 끊어져 버리더라구요. access_token값도 페이스북 재로그인할때 재생성이 되어서 다시 받아와서 DB에 저장을 해주어야 하는것 같은데...
이런 작업을 직접 회원이 수동으로 페이스북 로그인을 해야만 해서 많이 불편할것 같아서요.
질문자께서는 A사이트의 아이디와 페스워드로
로그인을 했을때 페이스북의 로그인을 원하시는 것 같은데...
페이스북 API상에서는 그렇게 사용하는 것은 힘들지 않을까 싶네요.
제가 했던 방식대로
A사이트의 별도 ID를 생성하지 않고,
페이스북으로 최초 로그인시 그 페이스북 ID를
계정으로 분류하여 관리 하시는 편이
사용자 편의상 더 좋을거 같다는 생각이 듭니다.
이미 운영되는 사이트라 그러신 거라면
컬럼을 추가하셔서 페이스북 ID를 별도로 저장한다음
기존 ID와 같이 메칭 시키는 형태로 DB구조와
웹페이지들을 수정하시는 방법밖에는 떠오르지 않네요.
백광님 답변 감사합니다.
그럼 결국에는 A사이트에서 페이스북 api를 이용하려면 페북으로 사용자가 로그인을 하게 하는 수밖에 없는거네요?
페북 ID는 이미 DB에 저장을 해두었긴했는데.. 이 페북 ID만 가지고는 페이스북 로그인을 할수는 없으니... 페북의 사용자 정보를 A사이트의 DB에서 가지고 있다고 해도 자동로그인은 못하는거네요. 그쵸?
네 기본적으로는 그렇게 생각하고 있습니다.
안드로이드 앱 같은 경우는
페이스북 앱이 로그인 되어 있을 시
다른 앱에서 별도의 로그인 절차 없이
사용이 가능하더군요.(RunKeeper같은 앱을 사용해보면 아실듯)
그렇지만, 이것은 페이스북 앱에서 아마 토큰 관리를 해주기 때문에
가능한 것 같습니다.
웹에서는 별도로 페이스북과의 커넥션을 지속적으로
연결해 놓는게 불가하기 때문에,
(브라우저를 종료시키면 커넥션이 종료되므로)
아마 힘들지 않을까 싶습니다.
많은 도움이 되었습니다. 어느 블로그보다 가장 정리가 잘 되어있더라구요.
그런데 프로필이미지를 가지고 오고 싶은데 어떻게 가지고 와야 할지 모르겠습니다.
ㅠㅠ 도와주시면 감사하겠습니다.
감사합니다.
페북 프로필 이미지 같은 경우는,
https://graph.facebook.com/mike.shaver/picture
와 같이 얻어 오실수 있습니다. 가운데 mike.shaver만 그 사람아이디로 바꿔 주면 되죠.
웹페이지에서 쓰실라면 img 테그 안에
src 속성의 값을 저 경로로 해주시면 됩니다~
학원에서 게시판 만드는거 공부중이라 페북 연동에 대해서 알아보다 이렇게 들어오게 됬네요. 좋은정보 감사합니다. 그런데 질문드릴게 있는게 위 예제들 똑같이 만들었는데 db안에 값들이 안들어와요 ㅠㅠ table도 예제에 맞게끔 만들고 했는데 왜그럴까요
정확한건 디버깅을 해봐야 할수 있겠지만,
(echo나 alert창 띄워가면서...)
페북 로그인은 되는데 디비에 값이 안들어온다면,
php 파일의 오류가 있는 가능성이 높은 만큼,
echo 같은 것으로 디버깅하면서 잡아 내는 수 밖에
없을 거 같습니다.
저 소스에서 수정할 부분이 어디인지 잘 모르겠습니다.
알려주시면 안되나요 ㅜㅜ
시간이 얼마나 걸려도 상관이 없으시다면..
lkwook2골뱅이네이버 로 보내주시면 한번 보기는 하겠지만..
요즘 정신이 없어, 금방 해결해 드릴수 있을지 모르겠네요..
asp로 수정해보고싶은데.. 어떻게해야할지 잘모르겠네요 수정부분좀 알려주시면 감사하겠습니다 ㅠㅠ
저소스 그대로 하고 디비설계도 그대로 했는데 안되는데...ㅠ login.php 랑 사용자정보 저장하고 불러오는 fbloginprocess.php, main.php 이렇게 세개 그대로 만들었는데 뭐가 문젠지 잘 모르겠네요..혹시 알려주실수 있나요?