사용자 로그인 구현 방식의 종류
사용자 로그인을 구현하는 방법에는 `세션과 쿠키`, `Token`, `OAuth` 등 다양한 방법이 있다.
이 게시글에서는 그 중 `세션과 쿠키`를 사용하는 방식을 활용하여 로그인 구현 과정을 설명하고자 한다.
쿠키란?
쿠키는 웹 브라우저에 저장되는 데이터로 클라이언트와 서버 간 상태를 유지하고 정보를 교환하는데 사용된다.
클라이언트 컴퓨터에 저장되며, 해당하는 도메인의 웹 사이트로 통신할 때마다 서버로 전송된다.
쿠키는 `Session Cookie`와 `Permanent Cookie`로 나뉘는데,
Session Cookie는 웹 브라우저가 종료될 때 자동으로 삭제되며 Permanent 쿠키는 반대로 계속해서 유지되는 데이터에 해당한다.
`Key-Value` 형태의 데이터 구조를 갖추고 있다는 점이 특징이며, 쿠키가 없거나 만료된 경우는
서버가 응답을 보내면서 쿠키를 함께 전송하고 쿠키가 있는 경우는 쿠키로 사용자의 상태 정보를 식별하게된다.
Express에서 쿠키를 사용하는 방법
Express에서 쿠키를 활용하는 방법은 Express의 공식 문서에서 확인할 수 있다.
https://expressjs.com/en/resources/middleware/cookie-parser.html
Express cookie-parser middleware
cookie-parser Parse Cookie header and populate req.cookies with an object keyed by the cookie names. Optionally you may enable signed cookie support by passing a secret string, which assigns req.secret so it may be used by other middleware. Installation $
expressjs.com
위 공식 문서에서 설명되어 있는 코드는 아래와 같다.
우선 아래와 같이 cookie-parser 패키지를 설치해준다.
npm install cookie-parser
이후 아래와 같이 코드를 작성하면, cookie parser를 express에서 활용할 수 있다.
var express = require('express')
var cookieParser = require('cookie-parser')
var app = express()
app.use(cookieParser())
app.get('/', function (req, res) {
// Cookies that have not been signed
console.log('Cookies: ', req.cookies)
// Cookies that have been signed
console.log('Signed Cookies: ', req.signedCookies)
})
app.listen(8080)
// curl command that sends an HTTP request with two cookies
// curl http://127.0.0.1:8080 --cookie "Cho=Kim;Greet=Hello"
`app.use(cookieParser())` 를 실행하면 미들웨어로 cookieParser를 등록할 수 있으며,
req.cookies에서 쿠키 값들을 가져올 수 있게 된다.
cookieParser의 첫 번째 인수로는 비밀 키를 넣어 줄 수 있다. 예를 들어 다음과 같이 사용할 수 있다.
`app.use(cookieParser(secretKey))`
이렇게 하면 secertKey를 비밀 키로 설정하게 되며,
`res.cookie(key, value, {signed:true})` 와 같이 쿠키를 전송하면 비밀 키를 사용하여 값을 서명하게 된다.
이후부터는 `req.signedCookies` 를 통해 값에 접근할 수 있다.
세션이란?
세션이란 간단하게 말하면 클라이언트와 서버 간의 연결 상태를 말한다.
즉 클라이언트가 브라우저를 통해 웹 사이트에 접속하고 창을 닫기 전 까지의 상태를 의미한다.
쿠키와의 가장 큰 차이점은 데이터가 서버에 저장된다는 점이다.
세션 사용 시 서버는 각 클라이언트에 대한 고유한 상태 정보를 저장하고, 관리한다.
다만 세션 사용시 특정 클라이언트가 누구인지 식별하기 위한 최소한의 정보는 필요하기때문에,
클라이언트는 세션 쿠키라는 최소한의 정보를 가지고 서버와 통신하게된다.
이 세션 쿠키는 일반적으로 connectid 와 value가 key-value 쌍을 이루는 형태로 이루어져 있다.
Express에서 세션을 사용하는 방법
express에서 세션을 사용하기 위해서는 express에서 제공하는 `expression-session` 패키지를 사용하면 된다.
아래와 같이 패키지를 설치해준다.
npm install express-session
이후 다음과 같이 미들웨어로 세션을 등록해주면, 요청 메세지인 req에 req.session을 통해 세션 데이터에 접근할 수 있다.
var app = express()
app.set('truest proxy', true)
/* 위 코드의 경우 프록시 환경에서 클라이언트 주소를 정상적으로 얻어오기 위한 코드이다.
자신에게 해당하는 사항이 아닌 경우, 위 코드는 제거해도 무방하다.
자세한 내용은 https://satisfactoryplace.tistory.com/368 에 자세하게 설명되어있다.*/
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
}))
'JavaScript' 카테고리의 다른 글
NestJS란 (0) | 2023.10.13 |
---|---|
API란? + RESTful API (0) | 2023.09.18 |
ES class와 prototype (0) | 2023.09.11 |
(JavaScript) Fetch API (0) | 2023.09.07 |
MySQL 개념 (1) | 2023.09.04 |