[cookie] sprint-auth-cookie

🤪 어떻게 찾으신 분에겐 도움이 되길,, 어려워서 고생했습니다. 작성 부분 정도로 간략히!!

과정은 이렇다!

 

💡 서버열기

 

HTTPS 프로토콜을 사용할 수 있도록

서버의 index.js 파일을 확인해보면 인증서를 불러오는 코드가 있는데,

// 인증서 파일들이 존재하는 경우에만 https 프로토콜을 사용하는 서버를 실행합니다.
// 만약 인증서 파일이 존재하지 않는경우, http 프로토콜을 사용하는 서버를 실행합니다.
// 파일 존재여부를 확인하는 폴더는 package.json이 위치한 server 폴더입니다.
let server;
if (fs.existsSync("./key.pem") && fs.existsSync("./cert.pem")) {
  const privateKey = fs.readFileSync(__dirname + "/key.pem", "utf8");
  const certificate = fs.readFileSync(__dirname + "/cert.pem", "utf8");
  const credentials = {
    key: privateKey,
    cert: certificate,
  };

해당 폴더에 인증서가 없기 때문에 HTTPS 서버가 아닌 그냥 HTTP 서버가 열려서

• 서버 폴더 안에서 mkcert를 사용해 인증서를 만들어서 HTTPS 서버로 변경
• mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

 

나머지 건들지 말고 corsOptions 에 Cors 설정해준다.

server/index.js

const corsOptions = {
  /* TODO: CORS 설정이 필요합니다. 클라이언트가 어떤 origin인지에 따라 달리 설정할 수 있습니다.
   * 메서드는 GET, POST, OPTIONS를 허용합니다.
   */
  // client는 <http://localhost:3000> 을 이용하게 됩니다.
  origin: "<http://localhost:3000>",

  // cookie는 인증 정보를 포함하는 경우가 많으므로 credentials도 설정해줍니다.
  credentials: true,

  // 허용할 메소드를 배열에 담아서 작성해줍니다.
  methods: ["GET", "POST", "OPTION"],
};

app.use(cors(corsOptions));

app.post("/login", controllers.login);
app.post("/logout", controllers.logout);
app.get("/userinfo", controllers.userInfo);

혹시 크롬 https 에러가 뜬다면

→

크롬 업데이트 해줍시다(안된 이유 저는/)

아래 링크에 또 자세히 설명!

참조

10 Ways to Fix the NET::ERR_CERT_DATE_INVALID Error

 

🍪 Client

 

client/app.js

→ 전달 해 줄 props 받아 내려오기

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 = () => {
    return axios
      .get("<https://localhost:4000/userinfo>")
      .then((res) => {
        setIsLogin(true);
        setUserInfo(res.data);
      })
      .catch((err) => {
        console.log(err.response.data);
      });
  };

  useEffect(() => {
    // 컴포넌트 생성 시 아래 함수가 실행됩니다.
    authHandler();
  }, []);

  return (
    <BrowserRouter>
      <div className="main">
        <Routes>
          <Route
            path="/"
            element={
              isLogin ? (
                <Mypage
                  /*
                TODO: 렌더링에 필요한 App의 상태와 이를 하위 컴포넌트에서 변경할 수 있도록 props를 전달하세요. 
                */
                  userInfo={userInfo}
                  setIsLogin={setIsLogin}
                  setUserInfo={setUserInfo}
                />
              ) : (
                <Login
                  /*
                TODO: App의 상태를 변경할 수 있도록 props를 전달하세요. 
                */
                  setIsLogin={setIsLogin}
                  setUserInfo={setUserInfo}
                />
              )
            }
          />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

client/pages/Login.js

→ props로 전달 받은 것 적용

→ 로그인 버튼에 넘겨줄 핸들러

export default function Login({ setIsLogin, setUserInfo }) {
  const [loginInfo, setLoginInfo] = useState({
    userId: "",
    password: "",
  });
  const [checkedKeepLogin, setCheckedKeepLogin] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const handleInputValue = (key) => (e) => {
    setLoginInfo({ ...loginInfo, [key]: e.target.value });
  };
  const loginRequestHandler = () => {
    // TODO: Login 컴포넌트가 가지고 있는 state를 이용해 로그인을 구현합니다.
    // 로그인에 필요한 유저정보가 충분히 제공되지 않았다면 에러메시지가 나타나도록 구현하세요.
    if (!loginInfo.userId || !loginInfo.password) {
      setErrorMessage("아이디와 비밀번호를 입력하세요");
      // 입력되지 않은 값이 있는거니까 요청을 보내볼 필요도 없이 바로 리턴해줍니다.
      return;
    }
    return axios
      .post("<https://localhost:4000/login>", { loginInfo, checkedKeepLogin })
      .then((res) => {
        // 로그인에 성공했다면 응답으로 받은 데이터가 Mypage에 렌더링되도록 State를 변경하세요.
        setIsLogin(true);
        setUserInfo(res.data);
        //여기에서 에러 초기화
        setErrorMessage("");
      })
      .catch((err) => {
        // 로그인에 실패했다면 그에 대한 에러 핸들링
        if (err.response.status === 401) {
          setErrorMessage("로그인에 실패했습니다.");
          alert('로그인에 실패했습니다!')
        }
      });
  };

client/pages/Mypage.js

→ props로 전달 받은 것 적용

→ 로그아웃은 로그인과 반대로

 ➡️ setIsLogin(false); setUserInfo(null);

 

export default function Mypage({ userInfo, setIsLogin, setUserInfo }) {
  const logoutHandler = () => {
    // TODO: Logout 버튼을 눌렀을 시 Login 페이지로 돌아갈 수 있도록 구현하세요.
    return axios
      .post("<https://localhost:4000/logout>")
      .then((res) => {
        // 로그아웃에 성공했다면 App의 상태를 변경하세요.
        setIsLogin(false);
        setUserInfo(null);
      })
      .catch((err) => {
        // 로그아웃에 실패했다면 그에 대한 에러 핸들링을 구현하세요.
        console.log(err.response.data);
        alert(err);
      });
  };

npm test → 테스트 통과ㄱㄱ

server/db/data.js 확인

→ 로그인, 아웃 할 때 사용!

ID : kimcoding

PASSWORD : 1234

 

 

 🍪 Server

 

index.js 는 맨 첫부분 서버 열기에서 확인!

자! 다음

server/controllers/users/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],
  };

  //! 콘솔,,
  // console.log(req.body);
  // console.log(userInfo);

  //! 쿠키옵션
  const cookiesOption = {
    domain: "localhost",
    path: "/",
    httpOnly: true,
    sameSite: "none",
    secure: true,

    //! 7일 후 소멸되는 Persistent Cookie
    expires: new Date(Date.now() + 24 * 3600 * 1000 * 7),
  };

  if (!userInfo.id) {

    res.status(401).send("Not Authorized");
  } else if (checkedKeepLogin) {

    res.cookie("cookieId", userInfo.id, cookiesOption);
    res.redirect("/userinfo");
  } else {
		// expires 옵션 삭제 해준다,, session, persistent cookie 구별 위해
    delete cookiesOption.expires;

    res.cookie("cookieId", userInfo.id, cookiesOption);
    res.redirect("/userinfo");
  }

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

server/controllers/users/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");
};

server/controllers/users/userInfo.js

→

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

module.exports = (req, res) => {
  /*
   * TODO: 쿠키 검증 여부에 따라 유저 정보를 전달하는 로직을 구현하세요.
   *
   * 로그인 시 설정한 쿠키가 존재하는 지 확인해야 합니다.
   * 아직 로그인을 하지 않았다면 쿠키가 존재하지 않을 수 있습니다.
   * 쿠키에 유저의 id가 존재하는지 확인하고 싶다면 콘솔에 req.cookies를 출력해보세요.
   */

  const cookieId = req.cookies.cookieId;
  const userInfo = {
    ...USER_DATA.filter((user) => user.id === cookieId)[0],
  };
  if (!cookieId || !userInfo.id) {
    res.status(401).send("Not Authorized");
  } else {
    // 비밀번호는 민감한 정보라서 삭제 후에 보내야 합니다.
    delete userInfo.password;
    res.send(userInfo);
  }
};

그리고

개발자 도구 - 애플리케이션 에서

쿠키탭에 쿠키를 확인한다.

 

로그인화면의

로그인 상태유지하기 체크 or 체크X

일때

체크X → session 이 들어오고

체크O → expires 설정해뒀던 것이 뜰 것이다.

확인!

 

 

 

npm test → 테스트 통과ㄱㄱ