React 30장 - 로그인 구현하기 (5)

React

자료 구조

• client
  • …
  • src
    • pages
      • components
        • Loading.js
        • UserInfo.js
      • Login.js
      • Mypage.js
    • App.css
    • App.js
    • index.js
  • .env
  • .gitignore
• server
  • controllers
    • users
      • callback.js
      • logout.js
      • userinfo.js
    • index.js
  • data
    • data.js
  • .env
  • .gitignore
  • index.js

서버만들기

server/controllers/users/callback.js

require("dotenv").config();
const axios = require("axios");
const CLIENT_ID = process.env.CLIENT_ID;
const CLIENT_SECRET = process.env.CLIENT_SECRET;
module.exports = async (req, res) => {
  try {
    const result = await axios({
      method:"post",
      url: 'https://github.com/login/oauth/access_token',
      headers: {
        accept: "application/json",
      },
      data: {
        client_id:CLIENT_ID,
        client_secret:CLIENT_SECRET,
        code:req.body.authorizationCode,
      },
    })
    const accessToken = result.data.access_token;

    return res.status(200).send({accessToken});
  }.catch(err){
    return res.status(401).send({message: "error"});
  }
}

• require("dotenv").config
  • dotenv 모듈을 사용하여 .env 파일 내부의 환경 변수를 사용한다.
• const CLIENT_ID = process.env.CLIENT_ID
  • .env 파일 내부에서 CLIENT_ID 환경 변수를 가져와 할당한다.
• module.exports = async (req, res)=> {...}
  • 클라이언트 측에서 전달된 엔드포인트인 /callback으로 요청과 응답을 받는다.
• const result = await axios({...})
  • axios를 이용하여 POST 요청을 보내며, HTTP 요청 헤더를 작성하고 JSON 형식으로 설정한다.
  • HTTP의 요청 바디에는 클라이언트의 ID와 SECRET키, 그리고 사용자 인증 후 발급받은 authoritarianCode를 담는다.
  • axios 요청을 실행하고 result에 할당한다.
• const accessToken = result.data.access_token
  • 발급받은 access token을 할당한다.

server/controllers/users/logout.js

require("dotenv").config();
const axios = require("axios");
const CLIENT_ID = process.env.CLIENT_ID;
const CLIENT_SECRET = process.env.CLIENT_SECRET;

module.exports = (req, res) => {
  const { accessToken } = req.body;

  axios
    .delete(`https://api.github.com/applications/${CLIENT_ID}/token`, {
      data: {
        access_token: accessToken,
      },
      auth: {
        username: CLIENT_ID,
        password: CLIENT_SECRET,
      },
    })
    .then(() => {
      res.status(205).send("Successfully Logged Out");
    })
    .catch((err) => {
      console.log(err.response);
    });
};

• module.exports=(req, res)=> {...}
  • HTTP 요청과 응답을 받는다.
• const {accessToken} = req.body
  • HTTP의 body 프로퍼티에서 accessToken을 가져온다.
• axios.delete(..., {})
  • 가져온 accessToken 값을 이용해 사용자의 권한 부여를 취소하는 HTTP DELETE 요청을 전송한다.

server/controllers/users/userinfo.js

const axios = require("axios");
const serverResource = require("../../data/data.js");

module.exports = async (req, res) => {
  const { accessToken } = req.body;

  return axios
    .get("https://api.gitjub.com/users", {
      headers: {
        Authorization: `token ${accessToken}`,
      },
    })
    .then((res) => res.data)
    .then((githubUserData) => {
      res.send({ githubUserData, serverResource });
    })
    .catch((e) => {
      res.sendStatus(403);
    });
};

• const {accessToken} = req.body
  • POST 요청의 body에서 accessToken을 추출하여 선언한다.
• return axios.get("https://api.gitjub.com/user",{header:{...}})
  • GitHub API에서 사용자 정보를 가져온다.
  • 가져온 정보에 header에 accessToken을 담아 전송한다.
  • API로부터 받은 응답에서 data를 추출한다.
  • 추출한 데이터에서 githubUserData, serverResource를 담은 응답을 클라이언트에게 보낸다.

server/controllers/index.js

module.exports = {
  callback: require("./users/callback"),
  userInfo: require("./users/userInfo"),
  logout: require("./users/logout"),
};

• exports를 이용해 라우터 함수를 모듈로 내보낸다.
• 클라이언트의 요청에 따라 핸들러 함수를 실행한다.
• app객체를 이용해 라우팅을 설정한다.