Untitled

1. Github에 내 앱 등록(Register a new OAuth application)

• Github → settings → Developer settings → OAuth Apps → new OAuth App

1. Application Name : 내 앱 이름
2. Homepage URL : 내 앱 주소 (ex. http://localhost:3000)
   • Hompage URL과 callback URL은 배포 전에는 localhost 로 사용하다가 배포 시에 배포 주소로 변경해주면 됨.
3. Application description : 내 앱 설명
4. Authorization callback URL : OAuth 인증 과정이 끝난 후 redirect 될 주소 (ex.http://localhost:3000/callback)
   • React Components 로 구현 중이라면 로그인을 처리할 Components 를 연결한 Route path를 적으면 됨

• 위의 정보를 입력해 App을 생성하면 Client ID와 Client Secret 을 발급 받는다. 복사해서 확인하기 쉬운 곳에 옮겨두는 걸 추천

2. Github Login 시키기

Identifying and authorizing users for GitHub Apps - GitHub Docs

this.GITHUB_LOGIN_URL = '<https://github.com/login/oauth/authorize?client_id=ee33270fac53d2e7b61c>'

• 위의 깃헙 공식 API를 참고하여 쿼리스트링을 만들고 해당 URL에 GET 요청을 보내면 유저가 자신이 가진 깃헙 계정에 로그인하게 된다.

/* <https://github.com/login/oauth/authorize?client_id=본인의clientid&선택사항&redirect_uri=본인의redircet주소> */

import React from 'react';
import styled from 'styled-components';

const LoginBtn = () => {
  const loginUri = `https://github.com/login/oauth/authorize?client_id=본인의cliendid&scope=repo:status read:repo_hook user:email&redirect_uri=http://localhost:3000/callback`;

  return (
    <>
      <GithubBtn href={loginUri}></GithubBtn>
    </>
  );
};

const GithubBtn = styled.a`
//생략
`;

export default LoginBtn;

• 로그인 하기 버튼을 누르면 해당 URL로 GET 요청을 보내면 된다!

3. AutorizationCode & access token 발급

• 유저가 로그인을 정상적으로 하면 깃헙 내 앱 등록 시 설정해둔 callback url로 redirect 되고 일시적으로 사용 할 수 있는 Autorization Code 가 url의 code 파라미터로 주어진다.

  ex) <http://localhost:3000/callback?code=5e52fb85d6a1ed46a51f>

• 이 autorization code 로 다시 OAuth App에 요청해서 access token을 받을 수 있지만 access token은 보안 유지가 필요하기 때문에 클라이언트에서 직접 OAuth App에 요청하기보다 해당 코드를 서버로 보내주고 서버에서 access token 요청을 하는게 적절하다.