S3) Unit 7. [실습] Cookie로 로그인 기능 구현하기

📣  Cookie 사용해서 로그인 기능 구현하기

 

＞ Client 

𝟭. 테스트 케이스

Auth - Client
    ✓ 🧩 유저 정보가 충분하지 않은 상태에서 로그인 버튼을 누를 시 에러메시지가 나타나야 합니다. (361 ms)
    ✓ 🧩 로그인 버튼 클릭 시 성공적으로 로그인되어야 합니다. (204 ms)
    ✓ 🧩 로그아웃 버튼 클릭 시 성공적으로 로그아웃되어야 합니다. (144 ms)
    ✓ 🧩 존재하지 않는 유저의 정보로 로그인할 시 에러메시지가 나타나야 합니다. (66 ms)

 

𝟮. 파일 구조

src

ㄴ  pages

      ㄴ Login.js : 서버로 로그인 요청 보내기

      ㄴ MyPage.js : 서버로 로그아웃 요청 보내기

ㄴ  App.js : 초기화면 렌더링(Login 페이지인지 MyPage 인지)

 

𝟯. 코드 구현

📌 App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Mypage from './pages/Mypage';
import React, { useEffect, useState } from 'react';
import axios from 'axios';

// 모든 요청에 withCredentials가 true로 설정됩니다.
axios.defaults.withCredentials = true;

function App() {
  const [isLogin, setIsLogin] = useState(false);
  const [userInfo, setUserInfo] = useState(null);

  const authHandler = () => {
  // 서버의 userInfo에서 받아온 유저 정보가 있으면 
  // 새로 고침해도 로그인이 유지되도록 한다(로그인 유지 체크했을 때)
    /*
    TODO: 초기 화면 렌더링시, 서버에 유저 정보를 요청하여 Login 또는 Mypage가 렌더링되도록 구현합니다.
    return axios
      .get(유저의 정보를 담당하는 endpoint)
      .then((res) => {
        인증에 성공했다면 응답으로 받은 데이터가 Mypage에 렌더링되도록 State를 변경하세요.
      })
      .catch((err) => {
        인증에 실패했다면 그에 대한 에러 핸들링을 구현하세요. 
      });
    */
      return axios
      .get("http://localhost:4000/userinfo");
      // 서버의 userinfo로 유저 정보를 요청한다.
      .then((res) => {
      // 유저 정보를 잘 받아왔을 경우
        setIsLogin(true)
        // 로그인 성공 -> 새로고침해도 로그아웃 되지 않는다.
        setUserInfo(res.data)
        // 유저 정보 바꿔주기
      })
      .catch((err) => {
      // 유저 정보를 제대로 받아오지 못했을 경우
        console.log(err.response.data)
      });
  };

  useEffect(() => {
    // 컴포넌트 생성 시 아래 함수가 실행됩니다.
    authHandler();
  }, []);
  
  return(
    ...
    // 각각의 컴포넌트에 알맞은 props를 내려주어야 한다.
  );
}

 

📌 Login.js

import React, { useState } from 'react';
import axios from 'axios';

export default function Login({setUserInfo, setIsLogin}) {
  const [loginInfo, setLoginInfo] = useState({
  // input 창에 아이디, 비밀번호를 입력하면 업데이트 된다.
    userId: '',
    password: '',
  });
  const [checkedKeepLogin, setCheckedKeepLogin] = useState(false);
  // '로그인 유지하기' 체크 상태를 의미한다.
  const [errorMessage, setErrorMessage] = useState('');
  // 에러 발생 시 로그인 버튼 밑에 에러 메시지를 출력한다.
  const handleInputValue = (key) => (e) => {
  // key로 id와 password를 구분하고, input이 변할 때 마다 받아온다.
    setLoginInfo({ ...loginInfo, [key]: e.target.value });
  };
  const loginRequestHandler = () => {
    /*
    TODO: Login 컴포넌트가 가지고 있는 state를 이용해 로그인을 구현합니다.
    로그인에 필요한 유저정보가 충분히 제공되지 않았다면 에러메시지가 나타나도록 구현하세요.
    return axios
      .post(login을 담당하는 endpoint)
      .then((res) => {
        로그인에 성공했다면 응답으로 받은 데이터가 Mypage에 렌더링되도록 State를 변경하세요.
      })
      .catch((err) => {
        로그인에 실패했다면 그에 대한 에러 핸들링을 구현하세요. 
      });
    */
   if(!loginInfo.userId || !loginInfo.password){
   // 아이디나 패스워드 중 하나라도 입력되지 않았을 경우
    setErrorMessage('아이디와 비밀번호를 입력하세요.');
    // 요청 보낼 필요 없이 바로 리턴(에러니까)
    return;
   }
   return axios
          .post("http://localhost:4000/login", {loginInfo, checkedKeepLogin})
          // 로그인을 처리하는 엔드포인트를 보내준다.
          // 엔드포인트 다음 인자로 req.body를 보내준다 -> 서버의 login.js에 필요한 데이터를 실어주는 것
          .then((res) => {
          // 응답을 잘 받아왔을 때
            setUserInfo(res.data)
            setIsLogin(true)
            console.log(res.data);

            // 로그인을 성공했을 경우 에러메시지를 지워준다.
            setErrorMessage("")
          })
          .catch((err) => {
          // 응답을 제대로 받아오지 못했을 때
            console.log(err.response.data)
            setErrorMessage("로그인에 실패했습니다.")
          })
  };
  
  return (
    ...
  );
}

 

📌 MyPage.js

import axios from 'axios';
import React from 'react';

export default function Mypage({ userInfo, setIsLogin ,setUserInfo }) {
// 로그인이 성공했을 때 뜨는 페이지(로그아웃 버튼이 있다)
  const logoutHandler = () => {
  // 로그아웃 버튼을 눌렀을 때 작동할 함수
    /*
    TODO: Logout 버튼을 눌렀을 시 Login 페이지로 돌아갈 수 있도록 구현하세요. 
    return axios
      .post(logout을 담당하는 endpoint)
      .then((res) => {
        로그아웃에 성공했다면 App의 상태를 변경하세요.
      })
      .catch((err) => {
        로그아웃에 실패했다면 그에 대한 에러 핸들링을 구현하세요. 
      });
    */
   return axios
          .post("http://localhost:4000/logout")
          // 서버의 logout으로 요청을 보낼 수 있게 엔드포인트를 작성해준다.
          .then((res) => {
            setIsLogin(false);
            setUserInfo(null);
          })
          .catch((err) => {
            console.log(err);
          })
  };
  
  return(
    ...
  );
}

 

---

＞ Server

𝟭. 테스트 케이스

POST /login

 ✓ 🚩 db에 존재하는 유저가 아니라면, 상태 코드 401와 함께 Not Authorized라는 메세지가 응답에 포함되어야 합니다.
      ✓ 🚩 로그인에 성공했다면 /userinfo로 리다이렉트 되어야 합니다.
      ✓ 🚩 로그인 상태를 일시적으로 유지하는 요청이라면 Session Cookie를 보내야합니다.
POST /login 
      ✓ 🚩 로그인 상태를 유지하는 요청이라면 Session Cookie가 아닌 Persistent Cookie를 보내야합니다.
      Cookie Option
        ✓ 쿠키 옵션중 Domain 옵션은 `localhost`로 설정되어야 합니다
        ✓ 쿠키 옵션중 Path 옵션은 `/`로 설정되어야 합니다
        ✓ 쿠키 옵션중 HttpOnly 옵션이 설정되어야 합니다
        ✓ 쿠키 옵션중 Secure 옵션이 설정되어야 합니다
        ✓ 쿠키 옵션중 SameSite 옵션은 `none`으로 설정되어야 합니다

GET /userinfo
GET /userinfo 401 1.372 ms - 14
    ✓ 🚩 쿠키에 cookieId가 없다면, 상태 코드 401와 함께 Not Authorized라는 메세지가 응답에 포함되어야 합니다.
GET /userinfo 401 0.806 ms - 14
    ✓ 🚩 쿠키에 저장된 cookieId가 유저정보와 일치하지 않는다면, 상태 코드 401와 함께 Not Authorized라는 메세지가 응답에 포함되어야 합니다.
GET /userinfo 200 1.657 ms - 295
    ✓ 🚩 쿠키에 저장된 cookieId가 유저정보와 일치한다면, 유저정보가 응답에 포함되어야 합니다.
GET /userinfo 200 0.819 ms - 295
    ✓ 🚩 응답에 포함된 유저정보에 비밀번호가 담겨있지 않아야 합니다.

POST /logout
POST /logout 205 1.049 ms - 0
    ✓ 🚩 로그아웃 요청 시 205 상태코드로 응답해야 합니다.
    ✓ 🚩 로그아웃 요청 시 쿠키를 초기화해야 합니다.

 

𝟮. 파일 구조

src

ㄴ  controllers

      ㄴ users

          ㄴ login.js : 쿠키를 발급한다.

          ㄴ logout.js : 쿠키를 삭제하고, 상태코드로 205를 전달한다(205 : Reset Content)

          ㄴ userinfo.js : 쿠키를 검증해서 유저 정보를 전달한다.

      ㄴ index.js

ㄴ  controllers

      ㄴ users

          ㄴdata.js : 로그인 데이터를 담고 있는 파일

 

𝟯. 코드 구현

📌 login.js

const { USER_DATA } = require('../../db/data');

//로그인이 성공적으로 이루어져야 쿠기가 만들어진다!!

module.exports = (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter((user) => user.userId === userId && user.password === password)[0],
    // data.js의 데이터를 받아서 req.body로 들어온 아이디와 패스워드와 같은 애들만 남기고 있다.
    // 없으며 빈 객체 리턴
  };

  const cookiesOption = {
    domain: 'localhost',
    path: '/',
    // 유효기간은 로그인 체크 여부에 따라 달라질테니 일단 패스합니다.
    // secure도 일단 패스하고, sameSite 옵션을 작성할 때 다시 확인합시다.
    httpOnly: true,
    
    // sameSite 옵션의 설정 값을 확인하면서 어떤 옵션을 설정하면 좋을지 살펴봅시다.
      // Lax : Get 요청만 쿠키 전송. 그런데 클라이언트에서 아이디랑 비밀번호를 POST로 보내주고 있으므로 지금 사용하기엔 부적합해요.
      // Strict : same-site만 가능. 그런데 클라이언트는 http 프로토콜 + 3000번 포트, 서버는 https 프로토콜 + 4000번 포트로 same-site가 아닙니다. 따라서 이 옵션도 부적합합니다.
      // 따라서 'none'이 가장 적합한 옵션값입니다. 그런데 이 옵션을 사용할 경우에는  secure 옵션이 필요하다고 해요. secure 옵션도 같이 작성해줍시다.
    sameSite: 'none',
    secure: true,
  }

  if(userInfo.id === undefined){
    // 로그인 실패하면(로그인 데이터가 없는 경우) 에러 메시지 보내고
    // userInfo는 일치하는 데이터가 없다면 빈 객체가 들어오므로 분기를 나눠서 처리해준다.
    res.status(401).send('Not Authorized');
  } else if (checkedKeepLogin === true) {
    // 로그인을 유지하고 싶은 경우, cookiesOption에 max-age 또는 expires 옵션을 추가로 설정해주겠습니다.
  
    // max-age 옵션으로 작성하는 경우
    cookiesOption.maxAge = 1000 * 60 * 30
    // 단위는 ms(밀리세컨드 === 0.001초)이니 주의하세요! -> 이렇게 작성할 경우 30분동안 쿠키를 유지합니다.
  
    // expires 옵션으로 작성하는 경우에는, 이렇게 작성하시면 됩니다.
    cookiesOption.expires = new Date(Date.now() + (1000 * 60 * 30) )
    // 지금 시간 + 30분 후에 쿠키를 삭제한다는 의미입니다.
  
    res.cookie('cookieId', userInfo.id, cookiesOption);
    // express 서버에 쿠키 보내는 방법(쿠키 이름, 쿠키 값, 쿠키 옵션)
  
  } else {
    // 로그인을 유지하고 싶지 않은 경우, max-age 또는 expires 옵션을 작성하지 않은 상태 그대로 쿠키를 설정합니다.
    res.cookie('cookieId', userInfo.id, cookiesOption)
  }

  res.redirect("/userinfo")
  // 여기서는 쿠키를 발급하기만 하고 userInfo에서 회원정보를 보내주므로
  // userInfo로 리다이렉트 해준다
  /*
   * TODO: 로그인 로직을 구현하세요.
   *
   * userInfo에는 요청의 바디를 이용해 db에서 조회한 유저정보가 담겨있습니다. 콘솔에서 userInfo를 출력해보세요.
   * 유저의 정보가 출력된다면 해당 유저가 존재하는 것임으로 로그인 성공에 대한 응답을 전송해야 합니다.
   * 만약 undefined가 출력된다면 해당하는 유저가 존재하지 않는 것임으로 로그인 실패에 대한 응답을 전송해야 합니다.
   *
   * 로그인 성공 시에는 클라이언트에 쿠키를 전송해야합니다. 쿠키의 cookieId에는 userInfo.id가 담겨야 합니다.
   * 테스트케이스에서 요구하는 쿠키 옵션을 모두 설정하세요.
   * 영속성있는 쿠키를 보내려면 max-age 또는 expires 옵션을 설정하세요.
   *
   * 클라이언트에게 바로 응답을 보내지않고 서버의 /useinfo로 리다이렉트해야 합니다.
   * express의 res.redirect 메서드를 참고하여 서버의 /userinfo로 리다이렉트 될 수 있도록 구현하세요.
   */
};

 

📌 userInfo.js

const { USER_DATA } = require('../../db/data');

module.exports = (req, res) => {
// login에서 쿠키가 잘 만들어졌다면, 쿠키를 생성할 때 넣어 준 userInfo.id가 들어있다.
// 이 값을 사용해서 클라이언트로 전달해줄 유저 정보를 필터링한다.
  const cookieId = req.cookies.cookieId
  const userInfo = {
      ...USER_DATA.filter((user) => user.id === cookieId)[0],
  };
  if (!cookieId || !userInfo.id){
  // 유효한 아이디가 아닐경우 userInfo가 비어있을 수도 있고
  // 쿠키가 없을 때도 userInfo 값이 제대로 들어오지 않는다. -> 로그인 실패
    res.status(401).send('Not Authorized');
  } else {
      // 비밀번호는 민감한 정보라서 삭제 후에 보내야 합니다.
      delete userInfo.password
      res.send(userInfo)
  }
  /*
   * TODO: 쿠키 검증 여부에 따라 유저 정보를 전달하는 로직을 구현하세요.
   *
   * 로그인 시 설정한 쿠키가 존재하는 지 확인해야 합니다.
   * 아직 로그인을 하지 않았다면 쿠키가 존재하지 않을 수 있습니다.
   * 쿠키에 유저의 id가 존재하는지 확인하고 싶다면 콘솔에 req.cookies를 출력해보세요.
   */
};

➰ console.log(req.cookies)로 확인한 쿠키

 

📌 logout.js

module.exports = (req, res) => {
  /*
   * TODO: 로그아웃 로직을 구현하세요.
   *
   * cookie-parser의 clearCookie('쿠키의 키', cookieOption) 메서드로 해당 키를 가진 쿠키를 삭제할 수 있습니다.
   * 만약 res.clearCookie('user', cookieOption) 코드가 실행된다면 `user=....` 쿠키가 삭제됩니다.
   * 로그아웃 성공에 대한 상태 코드는 205가 되어야합니다.
   */
  const cookiesOption = {
    domain: 'localhost',
    path: '/',
    httpOnly: true,
    sameSite: 'none',
    secure: true,
  }

  res.status(205).clearCookie('cookieId', cookiesOption).send("logout");
  // 쿠키를 삭제할 때는 rea.clearCookie를 사용한다.
};