[Authentication] Cookies and Sessions | Passport.js

 cookies

 

아마존에서  사고 싶은 물건을 카트에 넣고 

 

체크 아웃을 안한 채, 구글로 화면 전환을 했을 경우 

 

 

크롬 settings에 들어가서 All cookies and site data에 들어가면 

아마존 쿠키가 생겨난 걸 볼 수 있다. 

 

 

csm-hit에 들어가면 

 

 

제품 아이디를 저장하고 있다

 

 

 

브라우저를 모두 끄고, 다시 아마존으로 가도 내 카트에는 물건이 그대로 있다. 

 

 

 

 

하지만 쿠키를 지우고 다시 아마존에 방문하면 카트에 있는 물건은 기억하지 못하고 지워진다. 

 

 

아마존이 아닌 페이스북으로 가더라도

내가 검색한 제품들이 광고로 뜬다. 

 

 

---

 

내 브라우저에서 아마존 서버에 get request를 보내면 

 

 

 

아마존 서버는

내 브라우저가 아마존 웹사이트를 랜더할 수 있도록

html,css,js 파일을 보냄으로 response를 한다. 

 

 

 

컴퓨터를 카트에 담았다. 

이 말은 아마존 서버에 컴퓨터 사고 싶다고 post request를 한 것이다. 

 

 

 

그러면 아마존 서버는 상품 및 여러 데이터가 담겨있는 쿠키를 유저에게 보낸다.

 

 

 

아마존 서버와 연결이 끊겨도 

내 브라우저에는 쿠키가 그대로 저장되어 있다. 

 

 

 

다음에 다시 아마존 서버에 다시 접속하면

쿠키 정보를 서버에 보낸다

 

 

 

쿠키에 있는 데이터를 확인한 후 

 

 

 

html, css, js 파일과 함께 내 카트를 랜더하고 이미 카트에 내가 선택한 컴퓨터를 담아서 보내준다. 

 

쿠키에 대해 알아보았다. 

 

---

session

브라우저가 서버와 소통하는 기간이다. 

보통 웹사이트에 로그인하면 sesseion이 시작된다. 

이 때 쿠키가 만들어진다. 

쿠키 안 데이터에는 유저가 로그인 했고 성공적으로 인증하였다는 데이터가 있다. 이 말은 내 브라우저가 본인 인증이 필요한 웹사이트의 페이지에 접근할 때마다 로그인 요청을 다시 묻지 않는다.

 

---

Passport 

이제 Passport를 이용해 웹사이트에 쿠키와 세션을 심는 법에 대해 알아보자. 

Passport는 매우 유연하고 내 사이트에 방문하는 유저의 이름과 패스워드를 확인함으로 본인 인증을 할 수 있게 하고 

또는 구글, 페이스북, 링크드인, 트위터등 다른 서비스들과 연계해서 본인 확인 할 수 있게 한다. 

 

that allows you to authenticate your users using either a local strategy like what we're doing right now 

which is user name and password.  Or use a whole buch of other services such as Google, Facebook, LinkedIn Twitter. 

And it makes it a lot easier for you to be able to plug these different ways of authentication into your website. 

 

그럼 이제 Passport와 어떻게 쿠키와 세션을 심는지 알아보자.