티스토리 뷰

코니79 IT 정보

페이스북 로그인 연동하기

코니79 코니와함께 2018.01.17 00:17

웹페이지에 페이스북 연동하기 

우선 페이스북 개발자 페이지(https://developers.facebook.com)에 가입하고 앱을 생성한다. 
앱 생성할때 앱검수 항목에 앱을 공개하시겠어요? 항목을 예로 설정해주어야 개발 모드에서 실제 테스트 할수 있는 상태가 된다. 
이렇게 앱이 등록되고 난 뒤 실제 사용하게 될 값은 앱 ID 이다. 

개발자 페이지(https://developers.facebook.com/docs/facebook-login/web/)에서 
앱을 등록 후에 아래 예제 소스 코드를 참고해서 페이스북 연동 작업을 한다. 
이때 앞에서 발행된 앱 ID를 사용하면 된다. 

페이스북에 로그인 되지 않았을 때 사용자의 페이스북 로그인을 시키는 방법 중에 자바 스크립트를 활용한 
FB.login()에 대해서 알아보겠다. 
아래 facebooklogin() 를 통해서 로그인 창의 호출이 가능하다. 

그리고 페이스북으로 받은 값을 디비에 그대로 저장하는건 URL로 받는 값의 조작이 얼마든지 가능하여 바람직 하지 않고 
페이스북 결과를 받는 페이지(callback.aspx)에서 토큰에 대하여 한번 검증을 해준다. 


토큰의 검증 방법은 
https://graph.facebook.com/me?access_token=USER_ACCESS_TOKEN 
또는 
https://graph.facebook.com/v2.8(버전에 맞게 적어준다)/me?access_token=USER_ACCESS_TOKEN 
와 같이 서버에서 호출하게 되면 해당 토큰의 유저 ID 값이 리턴되는데 
이 값을 페이스북에서 전달받은 유저 ID와 비교해 준 후에 검증해 준다. 

아래는 facebooklogin() 에 대한 소스이다. 

function facebooklogin() {  
//페이스북 로그인 버튼을 눌렀을 때 호출 
FB.login(function(response) { 
var accessToken = response.authResponse.accessToken; //토큰 
//사용자 정보 조회 
FB.api('/me?fields=name,email', function(user) { 
//user은 사용자 정보가 담겨진 객체 
//callback.aspx 로 user로 받은 사용자 정보를 전달해서 회원가입 및 로그인, 그리고 토큰값에 대한 검증을 한다. 
$.post("/callback.aspx", { "userid": user.id, "email":user.email, "username": user.name, "fbaccesstoken":accessToken},  
function (responsephp) {  
if(responsephp=="N"){ 
location.replace('실패 URL'); 
}else{ 
location.replace('성공 URL');            

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

참고 링크 1 : http://unikys.tistory.com/348

댓글
댓글쓰기 폼
광고위치
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
67,742
Today
216
Yesterday
244
링크
«   2018/09   »
            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            
글 보관함