OAuth scope로 인한 Create a repository webhook error - 특정 repository에 webhook 생성 오류

문제 상황

특정 repo에 webhook 생성요청을하면 create가 안되고 error 발생

 

 

 

 

해결 전

createWebhook 

: repo주인 이름, repo명, token을 넣어  webhook 생성 POST 요청 함수

🔗 Github Docs - Create a repository webhook 참고

const createWebhook = (owner: string, repo: string, token: string) => {

  return axiosApi(
    { url: `/repos/${owner}/${repo}/hooks`, method: 'POST', data: postData },
    token
  );
};

 

 

사용자는 을 하는 과정에서 오류가 발생한 것!!

Github아이디로 로그인 > 본인 repo중 일부를 선택 > 선택한 repo에 webhook 생성 요청 

error response는 422로 뜨고 도대체 뭐가 문제인지 모르겠을 시점..

 

 

 

저의 코워커 라쿤이 Postman으로 요청 시엔 잘 되는 webhook 생성 요청이 도대체 왜 안되는지 모르겠다고 고민하더니,

token에 문제가 있는거같다고 알려주심 ..ㅠㅠ

 

 

 

 

 

 

 

해결 방법

token의 scope를 확인하고 hooks권한이 있는 token을 넣자!

원래는 개발단계에서 .env 에 Github token을 넣어서 사용하고 있었는데

로그인 페이지를 만든 후에는 사용자가 로그인을 한 후에 받은 access token을 넣어주는 방식으로 변경했었다.

 

로그인은 firebase Login으로 하고 있었는데 

무심코 지나갔었던 token scope 선택사항을 무시한것!

 

1. token scope확인

요청할 때 넣는 token scope를 확인

curl -H "Authorization: token 본인의토큰" https://api.github.com/user/유저이름 -I

 

안되던 token을 넣었을땐 scope가 user:email이라고만 나오지만 

변경 후에는 다양한 scope가 추가된 것을 확인할 수 있다.

 

 

2. 로그인 로직 부분에 addScope 추가 (Firebase Login 기준)

 

scope 설정 전

 const handleClickLogInButton = () =>
    signInWithRedirect(
      auth,
      new GithubAuthProvider(),
      browserPopupRedirectResolver
    );

 

scope 설정 후

function Login(): JSX.Element {
  const handleClickLogInButton = () => {
    const provider = new GithubAuthProvider();
    provider.addScope('public_repo');
    signInWithRedirect(auth, provider, browserPopupRedirectResolver);
  };

 

 

 

 

결과

 

제한된 scope	scope 설정 후

 

 

 

이렇게 설정한 후에 로그인 하면 초기 로그인 시부터  달라진 모습을 확인할 수 있는데,

 역시나  해당 token을 가지고 hook 생성이 잘 됨을 확인할 수 있다.

 

 

 

 

 

 

🔗 참고

OAuth scopes

Authorizing OAuth Apps - GitHub Docs

 

 

이 글은 라쿤과 그의 위대한 끈기에게 바칩니다.🦝