느린 개발자

GitHub 개발자 애플리케이션 등록

Github developers  해당 주소로 이동하여 깃허브(GitHub) 앱을 생성합니다. 이번 포스팅에서는 프론트에서 GitHub 로그인 버튼을 생성해 서버로 인가코드를 보내주는 방법에 대해서 알아보겠습니다. 

• Homepage URL : 프론트 도메인 주소를 입력합니다.
• Authorization callback URL : 인가코드를 받을 콜백(redirect) URL을 입력합니다.

Github OAuth application

 

---

GitHub OAuth Client Key (클라이언트 키)

• Client ID
• Client secrets 발급(Generate a new client secret 버튼) 
  • 서버(백엔드)에서 Client ID와  인가코드와 Client secrets 키로 AccessToken을 발급받습니다.

Client ID와 Client secrets Key를 꼭 기록해 두세요! 프론트에서는 Client ID만 사용합니다.

 

---

구현

위에 발급받은 Client ID와 설정한 redirectURI를 깃허브 auth api 주소에 담아서 요청합니다.

const GithubButton  = (props) => {
    const clientId = 'clientId';
    const redirectUrl = 'http://localhost:3000'
    const githubURL = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUrl}`
    const handleLogin = ()=>{
        window.location.href = githubURL
    }
    return (
        <div >
            <button onClick={handleLogin}>
                깃허브 로그인
            </button>
        </div>
    );
};

export default GithubButton

 

깃허브 로그인 버튼을 클릭하면 아래(이미지) 화면처럼 보이는데, 아까 만들어둔 GitHub APP 서비스에 로그인하는 것을 허용할 것인지에 대한 화면입니다.

깃허브 로그인 허용

 

 

---

인가코드

인가코드는 redirectURI로 설정해 둔 곳으로 이동되며 뒤에? code=로 인가코드가 붙어서 나옵니다. 이것을 서버(백엔드로) 보내서 백엔드는 인가코드를 사용하여 accessToken을 발급받아 Github 유저 정보를 받아올 수 있게 됩니다.

 

 

---

여기까지 프론트에서 할 일은 끝났습니다. 이제 발급받은 인가코드와 Client ID , Client secrets로 서버에서 accessToken을 발급받고 사용자 정보를 조회하여 로그인 완료를 하면 됩니다. 추후 Express에서 해당 인가코드로 유저 정보를 조회하는 방법을 알아보도록 하겠습니다. 그러면 읽어주셔서 감사하고 틀린 부분이 있으면 댓글 부탁드립니다.