쿠키, 토큰 JWT, 세션 간단 정리+ JWT 실습

쿠키 = 그냥 옮기는 시스템. 매개체
토큰 = 서버가 기억하는 매우 긴 텍스트 
ID카드처럼 서버에 보여줌
JWT = 정보를 갖고 있는 토큰. DB 없이 검증 가능
세션 = DB에 유저 관련 정보 저장.(들어 올 때마다 같은 유저의 접근이여도 구분 가능)

유저 인증을 위해 JWT 혹은 세션 사용

 

보통 유저 수가 적은 경우 JWT를 많이 사용하고,

유저 수가 많아져 체계적 관리가 필요한 경우 세션으로 넘어간다고 함.

---

공된 비밀키(ACCESS_SECRET 또는 REFRESH_SECRET)

 

올바른 키인지는 진위여부는 저 비밀키로 판단.

순간 순간 login url을 허용할지 말지는 페이로드(비밀키, 사용자 식별정보, 만료기간 등)로 판단한다.

 

출처 : https://www.youtube.com/watch?v=St8XcfmWqnw

 

---

- JWT 발행 실습-

 

db에 유저 내용들 미리 저장해두고,

module.exports = [

    {

        id : 1,

        username : 'testuser1',

        email : 'testuser1@gmail.com',

        password : '1111'

    },

    {

        id : 2,

        username : 'testuser2',

        email : 'testuser2@gmail.com',

        password : '2222'

    },

    {

        id : 3,

        username : 'testuser3',

        email : 'testuser3@gmail.com',

        password : '3333'

    },{

        id : 4,

        username : 'testuser4',

        email : 'testuser4@gmail.com',

        password : '4444'

    }

]

---

아래처럼 발급 시에 

1. 발행할 토큰에 sign({발행 정보},{관리자 접근 코드}, {만료기간, 발행인 정보}) 등을 명시하는 jwt sign 함수를 사용.

2. 응답에 쿠키로 감싸서 http, https 구별 및 자바스크립트 코드의 접근을 막는 설정등을 담아 응답 전송.

// refresh Token 발급

      const refreshToken = jwt.sign(

        {

          id: userInfo.id,

          username: userInfo.username,

          email: userInfo.email,

        },

        process.env.REFRESH_SECRET,

        {

          expiresIn: "24h",

          issuer: "Elecch",

        }

      );

      // token 전송

      res.cookie("accessToken", accessToken, {

        secure: false,

        httpOnly: true,

      });

      res.cookie("refreshToken", refreshToken, {

        secure: false,

        httpOnly: true,

      });

      res.status(200).json("login success");

    } catch (error) {

      res.status(500).json(error);

    }

  }

};

---

index.js : cors를 통해 포트가 달라도 지정된 곳으로 axios가 요청한 주소로

주소에 반응이 올 경우 실행할 함수를 대기 시켜놨다가 실행할 수 있도록 함.

app.use(

  cors({

    origin: "http://localhost:3000",

    methods: ["GET", "POST"],

    credentials: true,

  })

);

---

쿠키가 잘 보내졌다면 아래와 같이 쿠키에 암화된 값을 가진 토큰이 잘 전달된 모습을 확인.

 

로그인 화면

---

참고

 

JWT는 세 부분으로 구성되어 있습니다: 헤더(header), 페이로드(payload), 그리고 서명(signature).

• 헤더는 토큰의 타입(예: JWT)과 사용된 해시 알고리즘(예: HS256)을 정의합니다.
• 페이로드는 클레임(claims)을 담고 있으며, 이는 토큰에 대한 정보(예: 사용자 식별 정보, 토큰 만료 시간 등)를 포함합니다.
• 서명은 헤더와 페이로드를 합친 후, 제공된 비밀키(ACCESS_SECRET 또는 REFRESH_SECRET)를 사용하여 생성됩니다. 이 서명을 통해 토큰의 무결성이 보장되며, 토큰이 변조되지 않았음을 검증할 수 있습니다.

---

access token , refresh token 관리하기.

 

ㅡ> 쿠키에 토큰을 가져와서 관련 식별 내용들을 프런트에 저장한게 위의 과정이다.

이제 이것들을 관리하는 법에 대해 실습하고자 한다.

 

accessToken의 역할과 유효기간

• 역할: 사용자가 인증된 후, API 요청을 할 때마다 서버가 사용자를 인식할 수 있도록 하는 토큰입니다. 이 토큰은 일반적으로 짧은 유효기간을 가지고 있습니다.
• 유효기간: 짧게 설정되며(예: 15분, 1시간), 이 기간이 지나면 만료됩니다.

refreshToken의 역할과 유효기간

• 역할: accessToken이 만료되었을 때, 사용자가 로그인 과정을 다시 거치지 않고도 새로운 accessToken을 받을 수 있도록 해주는 토큰입니다. 이 토큰은 일반적으로 더 긴 유효기간을 가집니다.
• 유효기간: 보통 길게 설정되어(예: 7일, 1개월, 혹은 그 이상), 사용자가 자주 로그인을 다시 하지 않아도 되도록 합니다.

---

refreshToken 유효기간이 1분인 경우

• 사용자가 accessToken이 만료된 후 새로운 accessToken을 받기 위해 refreshToken을 사용하려 할 때, refreshToken도 이미 만료되었을 가능성이 높습니다.
• 이 경우, 사용자는 자동으로 로그아웃되는 것은 아니지만, 새로운 accessToken을 받기 위해 다시 로그인해야 하는 상황이 발생합니다.

따라서, refreshToken의 유효기간을 실제 운영 환경에서는 사용자가 빈번하게 로그인을 다시 하지 않도록 충분히 길게 설정하는 것이 중요합니다. accessToken의 짧은 유효기간은 보안을 위한 것이며, refreshToken의 긴 유효기간은 사용자 편의성을 위한 것입니다.