[React 22] - Login 1

👾 오늘의 목표

1. 로그인의 역사
2. JWT

---

1. 로그인의 역사

가장 옛날에 사용했던 로그인 방식을 먼저 알아보자.

가장 옛날에 사용했던 로그인 방식은 사용자가 이메일과 비밀번호로 로그인하면 그 정보에 대한 특정 아이디(sessionId)를 받아서 저장해두고 api를 요청할때마다 sessionId를 같이 첨부해서 보내는 방식이었다. 하지만 이 방식에서는 사용자들의 모든 요청들을 메모리에 저장하게 되는데 요청이 많아지게 되면 메모리 용량이 부족하게 된다.
그래서 현재는 이러한 문제를 해결한 방식으로 옛날 방식과 큰 틀은 비슷하지만 더 많은 유저들을 받을 수 있게 되었다.

현재 로그인 방식과 JWT 알아보기

2. JWT

JWT는 누구든지 볼 수는 있지만 조작은 불가능하다.

VERIFY SIGNATURE에 입력하는 KEY를 가지고 처음에 서명된 내용이랑 비교를 하기 때문에 조작된건지 아닌지를 알 수 있기 때문이다.

이제 앞으로 우리는 JWT를 로그인에 접근하는 용도로 쓸 것이다. 그리고 이를 accessToken이라고 부를 것이다. 로그인에 사용되는 토큰은 어떤 걸로도 쓸 수 있지만 우리는 그 중에서 JWT를 사용할 것이다. (두개가 같다는 의미가 아니다.)

accessToken !== JWT
JWT !== accessToken

accessToken 첨부하기

이 토근을 실제 API에 함께 보내기 위해서는 HTTP Headers에 첨부하면 된다.

API를 보낼 때 request header(요청을 보낼 때), response header(응답을 받을 때)등이 있다.
데이터의 요약정보, 어디서 데이터가 출발됐는지(Origin), 어떻게 압축이 되었는지 등에 관한 정보들이 요약되어 저장되어 있다.
이때 request header에 accessToken을 같이 첨부해서 보내주면 된다.

{
	"Authorization" : "Bearer accessToken"
}

다음처럼 Request Headers의 Authorization 부분에 토큰이 추가된 것을 볼 수 있다.

여기서 Authorization 과 Bearer에 대해 더 알아보자.

인증과 인가

인증은 Authentication이고 인가는 Authorization이다.
인증은 이메일과 비밀번호를 가지고 토큰(accessToken)을 가져오는 것을 말한다. login API를 사용하는 것이라고 생각하면 된다.
인가는 이미 받은 토큰을 가지고 내 정보를 받아오거나(fetchUserLoggedIn) 상품을 등록(createUser)하거나 등의 추가 작업을 하는 것이다.
이러한 작업을 하려면 이 사람이 누군지 알아야하기 때문에 accessToken으로 복호화를 통해서 유저를 알 수 있다. 이러한 과정을 인가라고 한다.
그래서 인증을 할때는 이메일과 비밀번호가 필요하고 인가를 할 때는 request headers에 accessToken을 넘기게 된다. 인증은 한번만 하면 되고 인가는 필요할 때마다 매번 이루어지게 된다.

Bearer

authorization에 데이터를 넘기게 될 때 이 데이터가 가리키는 것이 어떤 것인지 알려주기 위해서 사용하는 문자열이고 Bearer 말고 Basic 등을 사용하기도 한다. 관례상 Bearer는 토큰 인증을 할 때 사용한다. 이는 특정한 기능을 하지는 않기 때문에 빼거나 다른 단어를 사용해도 되지만 백엔드에서 어떻게 코딩을 해놨냐에 따라서 달라진다. 백엔드에서 이 토큰을 가져갈 때 문자열에서 replace("Bearer", "")해서 토큰을 가져갈 수 있게 설정해놨기 때문이다.

---

🔐 암호화 방식

양방향 암호화

• 암호화 할 수 있고 복호화 할 수 있는 방식
• JWT

단방향 암호화 (Hash)

• 특정 비밀번호를 암호화 하게 되면 복호화 할 수 없는 방식
• 암호화만 가능하고 복호화가 불가능

하지만 완벽한 보안은 없기 때문에 유저도 개발자도 보안에 유의해야 한다.