노드에서 JWT가 있는 쿠키를 사용합니다.js

JWT는 매우 유행하는 신분 검증 방법이지만 많은 사람들의 사랑을 받고 있다.대부분의 사람들이 최종적으로localstorage에 저장한다.나는 여기서 앞에서 jwt를 저장하는 가장 좋은 방식을 논쟁할 생각은 없다. 이것은 나의 의도가 아니다.
JWT를 사용하여 간단한 인증과 권한 수여 시스템을 만드는 방법에 대한 글을 읽었다면 로그인 루트에서 http 요청을 보낼 때 응답으로 JWT를 보낼 것입니다.즉, 로컬 스토리지에 저장하는 것이 우리의 생각입니다.
단, 다른 방법은 jwt를 전방으로 보낼 수 있습니다. 오늘은 jwt를 쿠키에 저장하는 방법을 가르쳐 드리겠습니다.

과자를 왜 써요?

때때로 나는 좀 게으르다. 그렇기 때문에, 내가 Api에게 요청을 할 때마다, 나는 헤더 파일에서 jwt를 계속 보내고 싶지 않다.이것이 바로 쿠키의 용도입니다. http 요청을 보낼 때 걱정하지 않아도 됩니다.
또 다른 이유는 localstorage를 사용하면 사용자가 로그아웃할 때localstorage에서 jwt를 삭제해야 하기 때문입니다.쿠키를 사용할 때api에서 http 요청을 보내서 전방의 쿠키를 삭제할 수 있습니다.
쿠키를 사용하는 데는 몇 가지 이유가 있습니다. 여기서 저는 프로젝트를 세분화하는 과정에서 나타날 수 있는 표면적인 예를 제시했습니다.
지금 우리는 대체적인 생각이 하나 생겼으니, 우리 인코딩합시다.

저희가 인코딩을 해볼게요.

우선 다음과 같은 종속성을 설치합니다.

npm install express jsonwebtoken cookie-parser

이제 간단한 Api를 만들기만 하면 됩니다.

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  return res.json({ message: "Hello World 🇵🇹 🤘" });
});

const start = (port) => {
  try {
    app.listen(port, () => {
      console.log(`Api up and running at: http://localhost:${port}`);
    });
  } catch (error) {
    console.error(error);
    process.exit();
  }
};
start(3333);

예상하신 바와 같이 Api에서 쿠키를 사용할 수 있는 것이 필요합니다. 이것이 바로 cookie-parser의 용무지입니다.
우선, 우리는 그것을 수입하여 우리의 중간 제품에 등록할 것이다.

const express = require("express");
const cookieParser = require("cookie-parser");

const app = express();

app.use(cookieParser());

//Hidden for simplicity

이제 Api에서 라우트를 작성할 준비가 되었습니다.
우리가 만들 첫 번째 루트는 로그인 루트입니다.먼저 jwt를 만들고 "access token"이라는 쿠키에 저장합니다.쿠키는 httpOnly(응용 프로그램 개발 기간에 사용)와 secure(생산 환경에서https 사용) 등 몇 가지 옵션이 있습니다.
그리고 우리는 우리가 성공적으로 로그인했다는 답장을 보낼 것이다.

app.get("/login", (req, res) => {
  const token = jwt.sign({ id: 7, role: "captain" }, "YOUR_SECRET_KEY");
  return res
    .cookie("access_token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
    })
    .status(200)
    .json({ message: "Logged in successfully 😊 👌" });
});

현재 로그인이 완료된 후에 클라이언트에서 jwt가 있는 쿠키를 받았는지 확인하겠습니다. 이 예에서 저는 Insomnia를 사용했습니다.

이제 인증이 완료되면 권한을 부여하겠습니다.이를 위해, 우리는 쿠키가 있는지 확인하기 위해 중간부품을 만들어야 합니다.

const authorization = (req, res, next) => {
  // Logic goes here
};

현재 "access token"이라는 쿠키가 있는지 확인해야 합니다. 없으면 컨트롤러에 접근하는 것을 금지합니다.

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  // Even more logic goes here
};

만약 우리가 쿠키가 있다면, 우리는 데이터를 얻기 위해 영패를 검증할 것입니다.그러나 오류가 발생하면 컨트롤러에 접근하는 것을 금지합니다.

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  try {
    const data = jwt.verify(token, "YOUR_SECRET_KEY");
    // Almost done
  } catch {
    return res.sendStatus(403);
  }
};

영패의 데이터에 더 쉽게 접근할 수 있도록 요청 대상에서 새로운 속성을 설명할 때가 되었다.
이를 위해, 우리는req를 만들 것입니다.userId 및 토큰의 id 값을 할당합니다.우리는 또한 req를 만들 것이다.userRole 및 토큰에 존재하는 역할의 값을 지정합니다.컨트롤러에 권한을 주고

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  try {
    const data = jwt.verify(token, "YOUR_SECRET_KEY");
    req.userId = data.id;
    req.userRole = data.role;
    return next();
  } catch {
    return res.sendStatus(403);
  }
};

이제 우리는 새로운 루트를 만들 것입니다. 이번에는 취소할 루트를 만들 것입니다.기본적으로 쿠키에서 이 값을 삭제합니다.즉, 우리는 jwt를 삭제할 것이다.
그러나, 우리는 권한을 부여받은 중간부품을 우리의 새로운 루트에 추가하기를 희망합니다.사용자가 쿠키를 가지고 있으면 로그아웃하려고 하기 때문입니다.만약 사용자가 쿠키를 가지고 있다면, 우리는 그 값을 삭제하고, 사용자가 성공적으로 취소되었음을 알리는 메시지를 보낼 것입니다.

app.get("/logout", authorization, (req, res) => {
  return res
    .clearCookie("access_token")
    .status(200)
    .json({ message: "Successfully logged out 😏 🍀" });
});

이제 로그아웃할 수 있는지 테스트해 봅시다.그 목적은 첫 번째 로그아웃을 검증할 때 로그아웃에 성공했다는 메시지를 받을 것입니다.그러나 우리가 쿠키가 없는 상황에서 다시 테스트할 때 우리는 반드시 오류가 발생하여 쿠키가 금지되어 있음을 나타낼 것이다.

이제 마지막 경로만 만들면 jwt에서 데이터를 얻을 수 있습니다.쿠키의 jwt에 접근할 수 있을 때만 이 경로를 접근할 수 있습니다.만약 우리가 이렇게 하지 않는다면, 우리는 잘못을 얻게 될 것이다.이제 요청에 추가된 새로운 속성을 이용할 수 있습니다.

app.get("/protected", authorization, (req, res) => {
  return res.json({ user: { id: req.userId, role: req.userRole } });
});

만약 우리가 가장 좋아하는 고객에게 테스트를 한다면.우리는 먼저 전체 업무 흐름을 테스트할 것이다.다음 사항은 다음과 같습니다.

로그인하여 쿠키 획득하기;

보호된 루트에 접근하여 jwt 데이터를 보기;

쿠키를 지우기 위해 로그아웃하기;

보호된 라우트에 다시 액세스하지만 이번에는 오류가 발생할 것으로 예상됩니다.

최종 결과에 대한 예상을 표시하기 위해gif를 남겼습니다.

최종 코드는 다음과 같아야 합니다.

const express = require("express");
const cookieParser = require("cookie-parser");
const jwt = require("jsonwebtoken");

const app = express();

app.use(cookieParser());

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  try {
    const data = jwt.verify(token, "YOUR_SECRET_KEY");
    req.userId = data.id;
    req.userRole = data.role;
    return next();
  } catch {
    return res.sendStatus(403);
  }
};

app.get("/", (req, res) => {
  return res.json({ message: "Hello World 🇵🇹 🤘" });
});

app.get("/login", (req, res) => {
  const token = jwt.sign({ id: 7, role: "captain" }, "YOUR_SECRET_KEY");
  return res
    .cookie("access_token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
    })
    .status(200)
    .json({ message: "Logged in successfully 😊 👌" });
});

app.get("/protected", authorization, (req, res) => {
  return res.json({ user: { id: req.userId, role: req.userRole } });
});

app.get("/logout", authorization, (req, res) => {
  return res
    .clearCookie("access_token")
    .status(200)
    .json({ message: "Successfully logged out 😏 🍀" });
});

const start = (port) => {
  try {
    app.listen(port, () => {
      console.log(`Api up and running at: http://localhost:${port}`);
    });
  } catch (error) {
    console.error(error);
    process.exit();
  }
};
start(3333);

마지막 노트

분명히 이 예는 매우 간단하니, 나는 모두가 이 주제에 관한 문장을 좀 더 읽는 것을 건의한다.나는 내가 너를 도와 어떤 의문도 해결할 수 있기를 바란다.

그럼 너는?

이 인증 정책을 사용하거나 읽은 적이 있습니까?