React Native로 앱을 만들면서 인증/인가부분에서 문제가 생겼다.
카카오/네이버 로그인하고 access token을 발급받는 부분까지 프론트에서 구현했는데 이 이후 인가 단계에서 꽉 막히게 되었다.
인증(Authentication)과 인가(Authorization)
인증 : 로그인, 회원가입
예) 카카오 로그인
인가 : 권한
예) 커뮤니티 게시글 수정 권한
소셜로그인으로 accessToken을 발급받는 것만으로는 커뮤니티 기능을 완전히 구현할 수 없었다. 또한 프론트단에서 로그인/회원가입을 처리하기에는 보안상 문제점도 다수 존재하였다.
JWT
JWT를 사용해 인가 문제를 해결하였다.
JWT 양식
JWT는 json으로 된 웹 토큰을 의미한다. XXX.YYY.ZZZ처럼 '.'을 기준으로 header, payload, verify signature 3개의 영역으로 나뉜다.
header에는 JWT의 형식 정보가 담겨있고
payload에는 토큰 유효기간, 사용자정보 등이 담긴다. payload를 base64로 디코드해보면 json형식의 파일이 나오기 때문에 누구나 암호화/복호화를 진행할 수 있다.
verify signature에는 header와 playload 그리고 서버의 secret key로 만들어진 코드가 담긴다.
따라서 서버에서 JWT를 만들어 사용하면 JWT의 데이터 조작이 있었는지 확인할 수 있다. 서버가 가지고 있는 secret key와 header, payload를 조합하면 verify signature가 나와야 하기 때문이다. 이렇게 서버는 전달받은 JWT의 유효기간을 확인해 그 기간동안 인가처리할 수 있다.
최종안은 다음과 같다
- 클라이언트 측에서 소셜로 AccessToken을 요청하고 받은 AccessToken을 서버로 전송한다.
- 서버는 전달받은 access token으로 소셜에 요청해 개인 정보를 받아와 DB에 동일한 것이 있는지(로그인 이력이 있는지) 확인한다.
- 로그인한 적이 없으면 DB에 INSERT하고, 계정정보가 있으면 이 단계 넘어간다.
- 서버에서 최소한의 사용자 정보가 담긴 jwt를 생성해 클라이언트 측으로 전송한다.
- 클라이언트는 받은 jwt와 jwt를 분해해 얻은 정보를 사용한다.
- 클라이언트는 서버에 요청할 때 헤더에 jwt를 같이 전송한다.
- 서버는 요청이 들어오면 우선 jwt를 분해해 jwt가 유효한지 확인하는 과정을 거친다.
아직 refreshToken을 발급받는 부분은 구현하지 못했다.
