페이스북 로그인 연동하기 - web

여기서는 웹 서비스 개발시 로그인을 할 때 페이스북 로그인과의 연동을 어떻게 할 수 있는지를 알아보자.
(참조: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/)

1. 페이스북에서 app을 만들어서 App ID(=Client ID)와 App secret(=Client Secret)을 발급받는다.
2. Authorization을 위해 "https://graph.facebook.com/oauth/authorize" 로 redirect한다.
이 때 get을 사용하며 parameter로 아래의 값을 넣어준다.
client_id: 페이스북에 app을 만들면 생성되는 값
redirect_uri: 페이스북으부터 되돌아오기 위한 url 이자 두번째 단계를 실행하기 위한 url
scope: 사용자에게 요청할 퍼미션 리스트
response_type: response data를 어디에 넣을 것인지 선택
state: CSRF를 방지하기 위해 생성한 unique string. 다음번 access token 단계에서 여기에서 넣어준 state값과 같은 state가 넘어왔는지를 보고 제대로 된 단계를 진행하고 있는 것인지 확인한다.

예를 들면 아래와 같은 URL이 될 것이다.
https://graph.facebook.com/oauth/authorize?client_id=1234567890&redirect_uri=http://yoursite.com/authenticate/&scope=email&response_type=code&state=djkfgj3kfjg-23jfjgjg-32jfjgj4--djfjgkf

위의 예 URL에 한 내용은 아래와 같다.
client_id는 페이스북에서 app을 만들면 생성되는 값을 넣어주고 redirect_uri는 페이스북에서 authorize가 처리되고 나면 redirect줄 url을 넣어준 것이다. scope는 간단하게 email로 설정해 주었고 response_type은 url에 parameter로 넘어오도록 code로 해준 것이고 state는 UUID.randomUUID() 을 사용해서 random number를 만들어낸 것이다.

로컬에서의 테스트를 위해 redirect_uri에 localhost를 넣어주면 redirect관련 에러가 발생한다. 이 경우는 페이스북 앱의 설정(Settings)에서 App Domains에 localhost 를 넣어주고 Site URL에 사용할 주소를 넣어준다(내 경우는 다음과 같이 넣어주었다: http://localhost:9000).

3. 2에서 사용자가 정상적으로 access를 허락하면 페이스북에서는 내가 넣어준 redirect uri로 redirect시켜준다. 여기서 access token을 가져오기 위한 작업을 한다.(서버에서 바로 http로 페이스북 access token url에 접속한다.)
정상적이라면 redirect시 파라메터에 state와 code 값이 넘어온다. state값이 정상적인 값(2에서 넣어준 값)인지 확인한다.
이제 access token을 얻어오기 위해 "https://graph.facebook.com/oauth/access_token" 에 요청을 한다. 이때 넘겨주는 parameter는 다음과 같다.
client_id: 페이스북 앱 생성시 생성되는 값
redirect_uri: OAuth 프로세스를 시작한 request_uri
client_secret: 페이스북 앱 생성시 생성되는 값
code: redirect시 받은 값

위의 요청을 하면 accesss_token 과 expires를 response로 준다. 여기까지 에러 없이 진행되었으면 인증 완료된 것이다.

에러의 경우 error 파라메터로 에러를 넘겨주므로 이 파라메터가 있는지 항상 확인해야 한다.
"access_denied"와 "redirect_uri_mismatch"등의 에러 내용이 있다.

4. 이제 사용자 정보를 요청한다. url은 "https://graph.facebook.com/me" 이다.
요청할 때 parameter로 access_token과 fields를 넣어준다.
fields는 요청할 사용자 정보이다:(예: id,name,last_name,username,,email,)

페이스북 api를 참조하여 다른 url로 다른 정보를 추가로 요청할 수도 있다.