해당 포스트는 어드민을 만들며 새로 알게되었던 것에 대한 포스팅입니다.
로그인 방식
로그인 방식은 OAuth 2.0 방식을 사용했습니다.
구글이나 카카오 아이디로 로그인하는 방식을 사용해보기만 했는데 직접 만들어야하는 상황이 오니 새삼 신기했습니다.
Oauth2.0 (Open Authorization)
제3의 앱이 자원의 소유자인 서비스 이용자를 대신하여 서비스를 요청할 수 있도록 자원 접근 권한을 위임하는 방법.
1. 사용자는 특정 웹 어플리케이션에서 OAuth 서비스를 요청합니다. 웹 어플리케이션은 OAuth 서비스에 Authorization Code를 요청합니다.
2. OAuth 서비스는 Redirect를 통해 Client에게 Authorization Code를 부여합니다.
3. Client는 Server에게 OAuth 서비스에서 전달받은 Authorization Code를 보냅니다.
4. Server는 Authorization Code를 다시 OAuth 서비스에 전달해 Access Token을 전달받습니다.
5. Server는 Access Token으로 Client를 인증하고 요청에 대한 응답을 반환합니다.
로그인 후 과정
useEffect(() => {
if (!location.search.split('=')[1]) return;
const userId = window.atob(location.search.split('=')[1]);
const userToken: IJWTTOKEN = JSON.parse(userId);
sessionStorage.setItem('accessToken', userToken.accessToken as string);
localStorage.setItem('refreshToken', userToken.refreshToken as string);
dispatch(fetchUserById());
navigate('/');- 사용자 인증이 되었을 경우 서버에서 토큰을 URL에 담아 보냅니다.
- URL에 담긴 토큰을 useLocation을 이용해 가져온 뒤 atob()를 이용해서 인코딩된 문자열을 디코딩합니다.
- 그렇게 얻게된 accessToken 과 refreshToken을 각각 sessionStorage와 localStorage에 저장합니다.
- 요청을 보낼 때 storage에 저장된 accessToken을 꺼내 Header에 담아 요청을 보냅니다.
- 만약, accessToken이 없을 경우
5-1. refreshToken을 이용해 재요청을 보내 다시 토큰을 발급 받습니다.
5-2. refreshToken도 없는 경우엔 로그인 페이지로 보내 다시 로그인을 시행할 수 있도록 합니다.
토큰을 사용하는 이유
토큰 기반 시스템은 stateless하며 유저의 인증 정보를 서버나 세션에 담아두지 않기 때문에 보안이 기존의 방식보다 용이하다는 점에서 좋습니다. (by 토니)
토큰을 사용하는 이유, 나아가 JWT를 사용하는 이유는 아래의 글을 참조하는게 더 효율적일 것 같아서 링크를 첨부합니다.
https://brunch.co.kr/@jinyoungchoi95/1
요약
쿠키의 단점
- 노출될 경우 id, pw에 대한 민감 정보가 모두 노출되어 보안이 좋지 않습니다.
- 조작되어 들어올 가능성이 있습니다.
- 브라우저 간의 공유가 불가능합니다.
- 쿠키의 사이즈가 제한되어 있어 원하는 만큼의 데이터를 담을 수 없습니다.
- 서버는 매번 ID와 PW를 받아 인증해야하는 불편함이 있습니다.
쿠키와 세션
- 특정 인증 정보를 서버가 가지고 있고 그 값을 클라이언트에게 전달하여 키와 자물쇠를 여는 방식의 인증 방법
- 쿠키를 주고 받지만 매번 로그인 시 ID, PW주고 받지말고 인증 정보 자체를 특션 세션 저장소에 저장 후 이 값을 쿠키에 담아 클라이언트가 쿠키를 요청할 때마다 세션 저장소에 있는 정보랑 동일한지 로그인을 확인하는 방식
JWT (JSON WEB TOKEN)
JWT는 유저를 인증하고 식별하기 위한 토큰(Token) 기반 인증 방식입니다. JSON 객체를 사용합니다.
구조
- HEADER: 어떠한 알고리즘으로 암호화 할 것인지, 어떠한 토큰을 사용할 것 인지에 대한 정보가 들어있습니다.
- PAYLOAD: 전달하려는 정보가 들어있음. 노출과 수정이 가능한 지점이므로 최소한의 정보만을 담아야합니다.
- SIGNATURE: 가장 중요한 부분으로 Header와 Payload를 합친 후 발급해준 서버가 지정한 secret key로 암호화 시켜 토큰을 변조하기 어렵게 만듭니다.
- AccessToken
유저가 데이터에 접근할 수 있도록 인증하기 위한 수단으로 사용되는 값입니다. 유출되는 경우, 제 3자가 해당 유저의 자원에 접근할 수 있는 권한이 생기므로 보안에 유의해야합니다.
Bearer 토큰은 요청 헤더의 Authorization 필드에 담아 보내집니다. 하도 Bearer에 담아서 보내라는게 있길래 뭔지해서 찾아봤는데 Bearer는 JWT와 OAuth를 나타내는 인증타입이었다. 뜻은 ‘전달자',,
'Bearer ' + sessionStorage.getItem('accessToken');
- RefrshToken
Access Token의 짧은 유효기간을 위해 Refresh Token을 발급하여 Access Token을 재발급 받도록 합니다.
Access Token이 탈취될 경우 보안에 취약함
- 유효기간을 짧게 만들게 될 경우 유저는 로그인을 자주 해야함 → 불편함
- 유효기간을 짧게 하면서 보안을 높일 수 있는 방법으로 나온 것이 Refresh Token
Web Storage
Client에게 소량의 데이터를 저장해두기 위한 key-value Storage
특징
- 쿠키와 다르게 웹 스토리지는 요청 시 서버로 전송되지 않음. 쿠키보다 더 많은 자료를 보관할 수 있음
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
- 오직 문자형(string) 데이터 타입만 지원함. 숫자형 데이터를 스토리지에 쓰고 다시 꺼내면 숫자가 아닌 문자로 나옴 → JSON 형태로 저장 후 빼오는 방식으로 사용함
LocalStorage
- 사용자 세션 데이터를 유지할 수 있습니다.
- 탭을 여러 개 열어도 공유됩니다.
- 브라우저를 닫았다가 다시 열었을 때ㅑ도 지속됩니다.
SessionStorage
- 브라우저 세션 기간 동안만 사용할 수 있으며 탭이나 창을 닫을 때 삭제됩니다.
- 새로고침을 해도 유지됩니다.
- 탭이 닫히면 저장된 데이터가 삭제됩니다.
출처 및 참고 게시물
[JWT] 토큰(Token) 기반 인증에 대한 소개
HTTP - 인증 : Oauth, JWT, Bearer token
[인증] OAuth 2.0을 활용한 SNS 로그인
[Security] OAuth 2.0란? ( 개념 + 인증방식 )
