Github Oauth 사용하기

깃허브 로그인을 만들기 위해서는 3 단계를 거쳐야한다.
그래서 글을 단계별로 나누었다.
자세한 방법은 Github Docs 에서 확인할 수 있다.

Github Oauth 사용방법

1. 사용자의 GitHub ID 요청

사용자를 github으로 보내 로그인하게하면 깃허브에서 비밀번호,보안, 이메일 인증 등을처리해준다.

2. 사용자를 GitHub가 다시 본래의 사이트로 돌려보내기(redirect)

로그인이 승인되면 유저는 다시 깃헙에서 토큰을 받아서 웹사이트로 돌아온다.
그 토큰을 이용하여 유저의 정보에 접근할 수 있다.

3.3. 액세스 토큰을 사용하여 API에 접근하기

우선 github application이 있어야한다.

깃허브에 로그인해서 오른쪽 상단의 본인의 계정의 이미지를 누르면 setting이 있을것이다.
세팅을 누르면 아래의 이미지처럼뜨는데 맨아래로내려보면 Developer setting이 있다.

 

눌러보면 3가지 목록이 뜨는데 OAuth Apps를 클릭한다.

 

그러면 새로운 OAuth application을 등록하는 페이지가 뜬다.

(아래부터 이미지 편집해서 다시 올리기)

Application name: 어플리케이션 이름 적기
Homepage URL: 메인이되는 페이지 적기
Application description: 적든지 말든지
Authorization  callback URL: 깃허브에서 승인받고 돌아갈 url적기

 

위의 사항을 적고 Resister application을 누르면 등록된다.

 

 

하지만 막상 들어가보면 에러가 난다.

왜냐하면 파라미터르 설정하지 않아서이다.

 

파라미터에는 client_id가 있는데 아까 만든 oauth application에서 할당한 client_id를 지정한 url에 붙여넣는다.

 

그러면 된다.

 

여기까지가 1번이다.
현재는 퍼블릭데이터만 받아올수있는데 더많은 데이터를 받고싶다면 scope를 사용하면 된다.

a(href="https://github.com/login/oauth/authorize?client_id=내가받은clientId&scope=")

scope는 유저에게서 얼마나 많은 정보를 읽어내고 어떤 정보를 가져올지 정할 수 있다.

내게 필요한것은 user의 정보중 email이 필요하다.

a(href="https://github.com/login/oauth/authorize?client_id=내가받은clientId&scope=user:email")

API 문서를 보면 url을 적는 여러가지 방법이있다.

근데 저렇게 적으면 url이 너무 길고 로그인이나 회원가입에서도 사용해야해서 한군데에 모아두기로 했다.

 

export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: "9fd1df29f2963f8e5b9c",
    allow_signup: false,
    scope: "read:user user:email ",
  }; //scope spacebar caution
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};

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

리다이렉트 url을 설정해주고 해결