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

머리글

이번 시간에는 깃허브 로그인을 구현해 보자.

Github Login

우선 흐름을 간단히 살펴보자.

우선 사용자를 깃허브(로그인하려 하는 사이트)로 보낸다.
그러면 사용자는 해당 사이트에 로그인을 한다.
우리의 사이트에 대한 정보 접근 권한을 승인하고 깃허브는 우리에게 사용자를 돌려보낸다.
이 단계에서 token을 같이 redirect 해준다.
이 token을 통해 사용자의 정보를 받아올 수 있다.

우선 기본적으로 설정을 진행해 보자.

깃허브의 세팅으로 들어가 준다.

그리고 목록의 Developer settings에 들어가 준다.

그리고 OAuth Apps를 클릭하자.

그리고 New OAuth App을 클릭하면 다음과 같이 뜬다.

이름은 아무거나 넣어주고,
URL은 'http://localhost:4000/'을 넣어주면 된다.
설명도 아무거나 넣어주고
callback URL에는 'http://localhost:4000/users/github/finish'을 넣어준다.
크게 상관은 없지만 callback 주소로 사용할 주소를 넣어주어야 한다.

그리고 app을 등록해 주면 등록 페이지가 뜬다.

이 페이지는 잠시 보류하고 우리의 페이지 로그인 화면으로 가서 인증을 위한 링크를 만들어주자.

...
br
        a(href="https://github.com/login/oauth/authorize?client_id=클라이언트 ID") Continue with Github →

앞의 앱 정보에서 client_id를 볼 수 있었는데 해당 아이디를 client_id 부분에 넣어주면 간단하게 인증창을 볼 수 있다.

우선 인증은 진행하지 않고 추가적인 작업이 필요하다.
URL부터 조금 정리해 주자.

a(href="/users/github/start") Continue with Github →

그리고 해당하는 라우터와 컨트롤러를 생성해 보자.

import {
  edit,
  remove,
  logout,
  see,
  startGithubLogin,
  finishGithubLogin,
} from "../controllers/userController";

...

userRouter.get("/github/start", startGithubLogin);
userRouter.get("/github/finish", finishGithubLogin);

 

export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: "클라이언트 아이디",
    allow_signup: false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};

export const finishGithubLogin = (req, res) => {};

우선 복잡했던 URL을 보기 좋게 정리해 주고,
Base Url과 config로 나누어 url과 설정을 분리해 주었다.

allow_signup의 경우 해당 링크를 타고 회원가입을 가능하게 하는지를 설정하는 부분이고,
scope의 경우 어떠한 정보를 제공받을지 추가로 설정하는 부분이다.
user의 이메일에 대한 읽기 권한을 요청한 상태이다.

그리고 이 설정을 `URLSerachParams()' 함수를 이용하여 Url에 적합한 형식으로 변경해서 최종 redirect 할 url을 만들었다.

마무리

이번 시간에는 깃허브 로그인을 위한 세팅을 알아보았다.

다음 시간에는 추가적으로 뒷부분에 대한 작업을 진행해 보자.