프로젝트를 할때, 테스트 케이스도 전부 다 통과를 하는데?!?!? 막상 `npm run start`를 해보면 서버와 클라이언트가 뭔 원수를 졌는지 `cannot GET/` 이런것만 띄워두거나 자꾸 콘솔창에서 `undefined` 만을 돌려주고 있는 야속한 상황이 생길 때가 있다.
이번 스프린트에서는 클라이언트에서 서버로 요청을 보낸 후 서버에서 github OAuth인증을 받아 accessToken을 github에서 받은 후 다시 클라이언트로 보내주는 과정을 구현했다.
여러가지 난관이 있었지만 궁극적으로 블로그에 기록할만큼의 힘듦을 선사한 오류를 기록해두고자 한다.
우선 간략하게 소셜로그인에 사용되는 OAuth인증을 살펴보면 다음과 같다.
이중에서도 4)단계와 5)단계를 진행하는 과정을 조금 더 자세히 보면,
axios.post('https://github.com/login/oauth/access_token', dataGroup,
{
//반드시!!!!!json 타입으로 받아오겠다고 적어둬야함, 안그러면 키 값을 읽어낼수가 없음...
headers: { 'Accept': 'application/json' }
})
.then((result) => {
console.log(result.data)
res.status(202).send({ accessToken: result.data.access_token })
})Headers 안넣어서 json으로 변경이 안되었을 때, 요청 성공 시 응답 받은 값(res.data)을 확인해보면 ,
이렇게 나오는 이유는!
문자열로 인식되어서 키값으로 access_token을 가져오지 못함
data에 빈객체만이 돌려주고 있을 뿐...
그래서 header 설정을 반드시 해줘서 보내줘야 한다.
{
//반드시!!!!!json 타입으로 받아오겠다고 적어둬야함,
//안그러면 키 값을 읽어낼수가 없음...
headers: { 'Accept': 'application/json' }
}주석에도 반드시!!라고 적어둔것처럼 정말 중요해서 다시한번 코드로 남겨둔다. 이걸 안 적어두니까 json타입으로 받아오질 못해서 객체의 키값(예시: result.data.data.accessToken)으로 accessToken을 받아올 수 없는 것이기 때문이다.
원하는 데이터 값을 받아오고 싶다면 api문서를 잘 읽고 요구사항이 뭔지를 제대로 본 후에 요청을 보내도록 하자.
물론 깃헙 accessToken을 받아오는 과정을 설명하는 문서(https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps#2-users-are-redirected-back-to-your-site-by-github)에서는 headers에 대한 언급이 없다. parameters를 설명을 봐도 body에 담아줘야할 필수 요소들만 써져 있을 뿐이다..
혹여나 github 로그인을 소셜로그인으로 달았다가 accessToken이 없는 경우에 마주했다면 반드시 headers를 제대로 보내주고 있는지를 확인해볼 필요가 있다.
