쿠...sal: [컴] facebook login 을 내 웹페이지에 설치하기

login with facebook login / 페북로그인 / 페북 로그인 / 페이스 북 로그인 사용하기 / facebook login integration

facebook login 관련 내용이 잘 정리되어 있다. : http://unikys.tistory.com/m/post/348

facebook 에서 제공하는 SDK 를 사용하지 않고 직접 만들기

Manually Build a Login Flow - Facebook Login

Local Test

facebook app 등록 및 app id 만들기

facebook 계정으로 로그인
Add a new app > create app id (아래 그림 참조)
처음에 인증을 위해, 폰번호나 신용카드를 등록하라고 할 수도 있다.
App Dashboard 로 가서 app id 복사하기

page code

ref. 3 의 Quick Start 에 있는 code 를 가져오고, app id 부분을 위에서 생성한 app id 를 넣고 저장하자. 여기서는 test.html 로 하겠다. 이 test.html 을 serve 해 줄 수 있는 server 를 하나 돌리자. 간단한 static file server 하나면 된다. 이것이 도움이 될 수도 있다.

그리고, 이제 이 test.html 을 web browser 에서 호출하자. domain 으로 호출하자. 내 경우에는 host 에 local.com 을 만들어 놨다.

local url 을 facebook app setting 에 등록하기

이 test.html 을 브라우저에서 열면 간단하게 버튼하나가 나와있다. 이 버튼을 눌러서 로그인을 할 수 있다.

그런데 이 login 이 가능하게 하려면 facebook app setting 에서 url 을 등록해 놔야 한다.

아래에 알맞은 답변이 나와있다.

How to Test Facebook Connect Locally - Stack Overflow

facebook App setting에서 localhost 와 관련된 url 을 추가해 놓으면 된다. 나의 경우에는 host 파일에 local.com 을 추가해 놓은 상태라, facebook 에 local.com 을 추가했다.(아래 그림 참조.)

Cookie 설정

참고로 아래의 url 에 대한 cookie (localStorage)설정이 가능해야 한다.

staticxx.facebook.com
www.facebook.com
connect.facebook.net

Access Token 관리

ref. 3 의 "Storing Access Tokens" 부분을 보면, facebook 의 내용에 접근하기 위해 사용되는 access token 은 facebook javascript SDK 에서 알아서 browser 의 localStorage 를 사용해서 저장하고, refresh 한다고 한다. 이 때 사용되는 token 은 2시간정도의 유효기간을 갖는 녀석이라고 한다.

signed_request

signed_request 가 가지고 있는 field 에 대한 설명 : Fields in signed_request, Facebook for developers
parsing signed_request code example :

javascript 버전: Decode Facebook signed_request with NodeJS · GitHub
python 버전 : Parsing signed_request parameter in Python based Facebook Canvas application · Sunil Arora
java 버전: Facebook cookie server side authentication

위 source code 에서 이야기하는 secret 변수는 아래 App secret 을 이야기한다.

info

response code 를 parsing 하면 아래같은 json 정보를 얻을 수 있다. field 에 대한 설명은 위의 Fields in signed_request, 를 참고하자.

{
 "algorithm":"HMAC-SHA256",
 "code":"...",
 "issued_at":1211,
 "user_id":"13161475859393"
}

app 의 server 쪽

browser 에서 code 를 받고난 후 해야할 작업은 아래 link 를 확인하자.

Manually Build a Login Flow - Facebook Login > Confirming Identity

server 에서 facebook server 로 아래와 같은 request 를 날린다. "code" 부분은 browser 에서 넘겨받아야 한다. 나머지 parameter 들은 server 에 처음부터 setting 해 놓으면 된다.

GET https://graph.facebook.com/v2.3/oauth/access_token?
    client_id={app-id}
   &amp;redirect_uri={redirect-uri}
   &amp;client_secret={app-secret}
   &amp;code={code-parameter}

자신의 login 시스템과 연동

자신의 login 시스템과 연동할 때 참고할 만한 자료 : Using with Existing Login Systems - Facebook Login

Reference

Facebook Apps Dashboard : All Apps - Facebook for Developers
JavaScript SDK - Web SDKs : 페이스북 login 을 Web 에서 사용할 때
Facebook Login for the Web Using the JavaScript SDK : 페이스북 로그인을 Web app 에서 사용할 때 overview, Login 과정에 대한 대략적인 설명

쿠...sal

[컴] facebook login 을 내 웹페이지에 설치하기