🎉 깃허브 OAuth 2.0 이식하기

노드JS로 간단한 서버를 만들고 거기에 OAuth 기능을 붙였다.

OAuth는 깃허브, 구글, 페이스북 등에서 발급하는 Access Token을 매개로 내 서비스가 깃허브 등에 접근해서 CRUD를 할 수 있는 기능이다.

Access Token을 매개로 사용하는 이유는 1) 사용자의 아이디와 비밀번호 데이터를 사용하는 것보다 안전하고, 2) 필요한 정보에만 접근할 수 있기 때문이다.

1. 역할 구분하기

---

✋ 내 서비스(= Client)

• OAuth 공식용어로는 Client라고 지칭한다.
• OAuth를 통해 구글 등으로부터 Access Token을 발급받을 수 있다.

🎅 사용자(= Resource Owner)

• OAuth 공식용어로는 Resource Owner라고 지칭한다.

🌈 깃허브, 구글 등(= Resource Server)

• OAuth 공식용어로는 Resource Server라고 지칭한다.
• 데이터를 가지고 있는 서버다.
• Access Token을 발급한다.

🔐 Authorization Server

• 인증 처리를 전담하는 서버다.
• OAuth 공식문서에서 Resource Server와 별개의 개념으로 설명하고 있다. 어쨌든 둘다 깃허브 서버다.

2. 등록(Register)

---

✋Client가 🌈Resource Server를 이용하기 위해서는 사전에 승인을 받아야 한다. 이것을 등록이라고 한다.
서비스(깃헙, 구글, ...)마다 등록방법이 다르다. 하지만 공통점은 아래 3가지 데이터를 받는다는 점이다.

• Client ID: ✋Client를 식별하는 식별자
• Client Secret: Client ID에 대한 비밀번호
• Authorized redirect URIs: 🌈리소스 서버가 ✋Client에 권한을 부여할 때 Authorization code를 전달해주는데, Authorized redirect URIs를 통해 전달해준다. 즉 코드를 전달받는 경로를 ✋Client가 지정해야 하는 것이다.

3. 🎅Resource Owner 승인

---

OAuth를 통해 🌈리소스 서버의 여러 기능 중 필요한 기능만 사용하게 할 수 있다. 이를 위해 사용자가 동의를 해야 한다. 동의는 깃허브 화면의 클릭으로 이루어진다.

'깃허브로 로그인하기' 버튼에 URL을 연결해주면 된다. 서버 API를 통해서 리디렉션하도록 했다. private API key를 리액트에 저장하면 보안에 취약하기 때문에 서버가 깃허브에 데이터를 보내도록 했다.

// express의 index.js
app.get("/api/users/github/start", (req, res) => {
    res.redirect(`https://github.com/login/oauth/authorize
	?client_id=${process.env.CLIENT_ID}
	&redirect_uri=${process.env.REDIRECT_URL}`);
});

// 리액트의 LoginPage.js
const goToLoginUrl = () => {
        window.location.href = "/api/users/github/start";
};

🎅리소스 오너가 🌈리소스 서버로 위 주소를 통해 접속하게 되면 🌈리소스 서버는 🎅리소스 오너가 현재 로그인되어 있는지 확인한다. 로그인이 안되어 있으면 로그인 화면을 보여준다.

로그인이 되었으면, 🌈리소스 서버는 URL로 받은 Client ID와 자신이 가지고 있는 Client ID를 비교해 같은지 확인한다.

그 다음 redirect_uri를 비교하고 다르면 여기서 작업이 끝난다. 같다면 🎅리소스 오너에게 scope에 대한 권한을 ✋Client에게 부여할 것인지 확인하는 화면을 보여준 후 🎅리소스 오너가 허용 버튼을 클릭하면 🌈리소스 서버는 해당 유저의 user id와 scope, Authorization code를 내부적으로 저장해 놓는다.

4. 🌈Resource Server 승인

---

🌈리소스 서버는 Client ID와 Authorized redirect URIs만 일치한다고 해서 Access Token을 바로 발급하지 않는다. 아직 Client Secret을 사용하지 않았다!

🌈리소스 서버는 우리가 약속한 Authorized redirect URIs에 Authorization code를 담아서 🎅리소스 오너에게 전송한다.

리디렉션 HTTP 메시지는 Location을 헤더로 한다. Location 헤더는 페이지를 리디렉션할 URL을 나타낸다. ✋Client의 웹 브라우저를 리디렉션설정한URL?code=어쏘라이제이션코드로 이동하라는 요청이다.

이 요청에 의해 이동이 되면 위 사진처럼 ✋Client는 🎅리소스 오너의 Authorization code를 갖게 된다.

★★★★★ 이제 이 Authorization code를 가지고 ✋Client는 🌈리소스 서버와 직접 통신한다.

먼저 서버단에서 Github로부터 Access Token을 발급받기 위한 API를 만들어야 한다.

• 생성한 API URL 뒤에 Authorization code를 담아서 서버단에 보내면, Back-End에서는 비동기 통신으로 Github에 Access Token 발급을 요청한다. Authorization code는 Front-End에서 읽어들인다.

• 이때 보내야 하는 정보(Client ID, Client Secret, Authorization code)는 비동기 통신 API URL에 담아서 보낸다. 헤더도 필수로 넣어야 한다.

// express의 index.js
app.get("/getAccessToken", async (req, res) => {
    const params = `?client_id=${process.env.CLIENT_ID}&client_secret=${process.env.CLIENT_SECRET}&code=${req.query.code}`;
    await axios
        .post(
            "https://github.com/login/oauth/access_token" + params,
            {},
            {
                headers: {
                    Accept: "application/json",
                },
            }
        )
        .then((fromGithub) => {
            res.status(200).json(fromGithub.data);
        });
});

// 리액트의 LoginPage.js
useEffect(() => {
  const queryString = window.location.search;
  const paramFromURL = new URLSearchParams(queryString);
  const codeFromParam = paramFromURL.get("code");

  // 로컬스토리지
  if (codeFromParam && localStorage.getItem("githubAccessToken") === null) {
    getAccessToken();
    async function getAccessToken() {
      await axios
        .get(
        `http://localhost:5000/getAccessToken?code=${codeFromParam}`,
        {}
      )
        .then((res) => {
        if (res) {
          window.localStorage.setItem(
            "githubAccessToken",
            JSON.stringify(res.data.access_token)
          );
          setRerender(!rerender);
        }
      });
    }
  }
}, []);

🌈리소스 서버(Github)는 URL로 전송받은 Authorization code 및 Client Secret 등이 가지고 있는 데이터와 모두 일치하는지 확인한다.

5. 액세스 토큰 발급

---

모두 일치한다면 🌈리소스 서버와 ✋Client는 Authorization code를 지운다(또 다시 인증하지 못하도록 삭제).

이제 🌈리소스 서버는 Access Token을 발급하고 ✋Client에게 보내준다. ✋Client는 토큰을 저장소에 보관해놓고 활용할 수 있게 된다.