OAuth Github 로그아웃 404 에러처리

 

깃헙 소셜로그인을 구현한 후, 로그아웃처리를 하려고하는데 난관에 부딪혔다.

다른 소셜로그인들도 그러하듯, 서비스상으로만 로그아웃처리를 하면 

이미 깃헙에서 발급한 토큰의 유효기간이 만료되지않아 로그인을 눌렀을때

다시 사용자의 인증수락을 받지않고 그냥 로그인이 바로 되버리는 현상이 있기에

깃헙쪽으로 보내준 토큰을 만료처리해주세요 ! 라는 요청을 보내야했다.

 

이에대해 설명하고있는

깃헙에서 제공한 공식문서의 Code samples를 보며

정성껏 한자한자 코드를 작성하여 요청을 보내보았지만

돌아오는건 404 오류 뿐 ... 😂

 

 

아래는 깃헙 공식문서글 .. 

https://docs.github.com/en/rest/apps/oauth-applications#delete-an-app-authorization

OAuth Apps - GitHub Docs

 

 

아래는 내가 쓴 코드 .. 

// 아래는 cURL방법으로 구현한 코드이고, 
await axios.delete('https://api.github.com/applications/{클라이언트ID값}/grant',
    {data : {access_token:{access_token값}}},
    {headers: {Accept: "application/vnd.github.v3+json"}})


// 아래는 JavaScript 방법으로 구현한 코드이다
const octokit = new Octokit({
    auth: 'personal-access-token123'
})

 await octokit.request(`DELETE /applications/{클라이언트ID값}/grant`, {
    client_id: {클라이언트ID값},
    access_token: {access_token값}
 })

 

 

야속한 404 코드 .. 

아무리 구글링을 해보아도 나와 같은 문제를 만난 사람들은 없는걸까

깃헙 로그인에 대한 글들은 많아도 로그아웃을 구현하며 오류를 만난 사람들의 블로그글은 찾아보기 힘들었다.

stack overflow에 팀원분이 질문을 올려보아도 속시원한 답변이 달리지않았고 .. 

그러던 중 주변 분께서 주신 도움으로 찾게된 해결방법😭

 

 

해답은 바로 공식문서 안에 있었다 ............ 

바로 Basic Authentication !!

기본인증도 함께 보내야했던것 ..... 

  auth: {
    username: {client_id},
    password: {client_secret}
  },

바로 요렇게 ... !!!

 

 

하지만 또 이것을 헤더안에 넣느냐 바깥에 넣느냐하는 문제로 

두번째 난관에 봉착 

해답은 다음 axios api에 잘 나와있었다.

https://github.com/axios/axios#request-config

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

  axios#delete(url[, config])
  
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
  // Please note that only HTTP Basic auth is configurable through this parameter.
  // For Bearer tokens and such, use `Authorization` custom headers instead.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

바로 이부분 !! ㅠㅇㅠ

 

 

그리하여 완성된 어여쁜 코드

await axios.delete(`https://api.github.com/applications/${client_id}/grant`,
    {
        headers: {
            Accept: "application/vnd.github.v3+json"
        },
        auth: {
            username: {client_id},
            password: {client_secret}
        },
        data: {
            access_token
        }
    }
)

오류가 깔끔하게 해결되었다ㅠㅠb

감동 ........ 

 

 

아 그리고 중간에 좀 헤맸던 부분중 어떤게 있었냐면

axios를 보낼때 post요청을 자주 쓰게되면서

axios.post(url[, data[, config]])

요렇게 첫번째 인자로는 url을, 두번째 인자로는 무조건 body로 들어가는 data가 들어가야한다고 생각했었는데

delete를 보낼때 처럼 url 다음으로 config가 올 경우에는 ( axios.delete(url[, config]) )

순서상관없이 객체안에 키 이름으로 값을 전달해야한다는 사실을 알게되었다 ...... 😳

이미 알고있는 분들 입장에선 너무나 당연한 상식이었을텐데

이것을 이제야 알게된 나로서는 소중하고 귀중한 깨달음이 아닐수 없었ㄷ ㅏ ㅠㅇㅠ !!!!

 

 

 

해결 후 시원해진 맘을 뒤로한채 다시한번 드는 생각은

공식문서 정말 더욱 꼼꼼히 들여다보는 습관갖기 + 제대로 api를 볼 줄 아는 눈 기르기 

중요중요 별표 다섯개라는 점❗️