3. 페이스북 로그인 OAuth 기능 구현 - 2 (SDK not used)

1. Redirect 된 Uri 분석

 이전에 로그인이 성공된 후 가져오는 uri를 분석하면 다음과 같다.

https://localhost:8000/fb-low.html?
      #access_token=XXX
      &data_access_expiration_time=1571557491
      &expires_in=4509
      &reauthorize_required_in=7776000
      &state=1234

* expires_in : access token의 수명시간

* state : Resource Owner가 요청할 때 넘겨준 값으로 넘겨준 값과 Resource Server의 응답 state 값의 일치 여부로 정상적인 작동인지 판단.

 

2. 페이스북 API 서버에서 사용자의 이름 불러오기

1) URI에서 access_token 추출

location.href.match('access_token=([^&]*)')[1];

2) Facebook Graph API Explorer를 통해 실험

3) 하단의 코드 받기 -> cURL의 주소를 복사

4) Ajax를 통해 해당 주소에 요청

fetch({uri})
      .then(function(raw) {
      console.log(raw);
      })
      .then(function(result) {
      console.log(result);
      })

 

지금까지의 방법은 sdk를 사용하지 않고 동작원리를 보기 위해 하나씩 구현하였다. 하지만 이러한 방법을 실제 서비스에서 사용한다면 access_token 노출 등의 보안상 큰 이유가 있다. 때문에 facebook과 같은 회사에서 제공하는 sdk를 사용하면 이 과정을 함축시켜 빠르고 안전하게 사용 가능하다.