[JavaScript, Node.js] 유튜브 클론 정리 7장 (9) - Github Login2

머리글

깃허브 로그인 파트를 계속 진행해 보자.

Github Login

저번 시간에 유저가 다시 리다이렉트 할 수 있게끔 만들었다.

그 이후에 진행을 알아보자.

우리는 유저의 리다이렉트와 함께 깃허브를 통해 토큰을 받았다.
이 토큰을 Access 토큰으로 변경해 주는 작업이 필요하다.

컨트롤러를 수정해서 작업을 해보자.

export const finishGithubLogin = async (req, res) => {
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  const data = await fetch(finalUrl, {
    method: "POST",
    headers: {
      Accept: "application/json",
    },
  });
  const json = await data.json();
  console.log(json);
};

우선 기본적인 Url을 바탕으로 config 설정을 해주었다.

이 때, 클라이언트 ID와 Secret은 환경변수에 넣어주어 중복과 노출을 방지했다.
그리고 code의 경우 req.query.code를 통해 받아주었다.

그리고 url 형식을 만들어주어 해당 주소로 무언가 정보를 보내야 한다.
POST 형식으로 fetch 해주었다.
headers에 Accept 형식을 넣어주어 json 형식의 응답을 요청했다.
이 요청이 없으면 text 형식으로 return 해준다.

이렇게 해서 요청을 보내보면 오류가 뜬다.
Node.js에서는 기본적으로 fetch를 지원하지 않기 때문인데 이를 해결해 보자.

node-fetch

우리는 fetch가 되지 않는 문제를 해결하기 위해 패키지를 설치해야 한다.

npm i node-fetch

이제 정상적으로 fetch를 진행할 수 있다.

이제 우리는 엑세스 된 토큰을 가지고 API에 접근을 해야 한다.
json에 access_token이 있으므로 이걸 사용해 보자.

...
  const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();
  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userRequest = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userRequest);
  } else {
    return res.redirect("/login");
  }

json에 토큰이 존재하는 경우 api에 대해 접근을 할 예정이고
그렇지 않다면 다시 로그인 페이지로 돌려보낸다.

이제 로그인을 진행해 보면 깃허브 프로필 정보를 가져올 수 있다.

마무리

이번 시간에는 fetch를 통해 API에 접근하는 방법을 알아보았다.

다음 시간에는 Private 한 상태의 정보에 접근하는 방법과 이를 활용하여 계정을 생성하는 방법을 알아보자.