누구나 한번 쯤 웹 사이트에서 kakao로 로그인하기, google로 로그인하기 등등의 로그인 버튼을 본 적이 있을 것이다.

리그오브레전드 로그인 화면인데 페이스북, 구글, 애플 로고가 있다. 저것을 통해 로그인하는 것이 oauth를 이용한 방식이다 .

1. Oauth Token 얻어오기

우선 이렇게 Github Oauth 문서를 찾아보면 해당 주소로 GET 요청을 보내 인증을 하라고 한다. 설명에서 client_id가 필수 라고 강조되어있는 것을 확인할 수 있다.

function App() {
  const login = () => {
    window.location.href = `https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID_GITHUB}&
                            redirect_uri=${process.env.CALLBACK_GITHUB}`
  };

  return (
    <div className="App">
      <div onClick={login}>login</div>
    </div>
  );
}

그래서 로그인 버튼을 눌렀을 때 인증 주소에 쿼리로 client_id와 추가로 redirect_uri를 넣어 주었다.

이렇게 해주면 로그인 버튼을 눌렀을 때 우리가 흔히 봤었던 창이 나오게 된다! 이 창은 이용하고 있는 웹 사이트에 여러분의 정보 제공 동의 여부를 묻는 창이다. 여기서 동의를 눌러주면 웹 사이트에서 연동된 Oauth를 이용해 개인정보를 이용하게 된다.

성공적으로 인증이 끝나면 resource server에 입력해두었던 callback URL로 code라는 쿼리가 붙어서 이동하게 된다.
code는 access_token 발급을 위한 일회용 비밀번호 정도로 생각하면 된다.

이제 code로 access_token을 받아와보자

해당 주소로 body에 필수 정보를 담아 post요청을 보내면 토큰을 받을 수 있다.

app.get('/callback', async (req, res) => {

  const tokenConfig = {
    headers: {
      Accept: 'application/json',
    },
  };

  const result = await axios.post(
    'https://github.com/login/oauth/access_token',
    {
      client_id: `${process.env.CLIENT_ID_GITHUB}`,
      client_secret: `${process.env.CLIENT_SECRET_GITHUB}`,
      code: `${req.query.code}`,
    },
    tokenConfig,
  );
});

express로 callback API를 작성해주었는데 fetch와 비슷한 기능을 하는 axios를 사용해보았다. body에 client_id, client_secret, code를 담아서 요청을 보냈다. 참고로 Accept에application/json 옵션을 주면 json 형식으로 토큰을 받아올 수 있다.

그래서 result.data.access_token 이런 식으로 접근이 가능해진다!

2. Token으로 정보 받아오기

받아온 토큰을 헤더에 담아서 위의 주소로 GET요청을 보내면 API를 사용할 수 있다고 한다.

app.get('/callback', async (req, res) => {
 
  ...
  
  const authConfig = {
    headers: {
      Authorization: `token ${result.data.access_token}`,
    },
  };

  const user = await axios.get('https://api.github.com/user', authConfig);
  
  console.log(user.data);
  
  res.send('인증 성공');
  
});
  

그래서 토큰을 받아온 다음 위의 형식으로 요청을 하게되면 로그인 한 유저의 다양한 정보를 받아올 수 있다.

참고로 github는 scope를 따로 설정하지 않으면 public data에만 접근이 가능하다.