[React] JWT와 CORS

JWT 로고

 

JWT

JWT는 JSON Web Token(JSON 웹 토큰) 의 약자로, 정보를 JSON 형식으로 안전하게 전송하는 방법입니다. 이 정보는 토큰 자체에 포함된 플레임 기반의 토큰이며, 일반적으로 인증과 권한 처리에서 주로 사용합니다. 그러면 이 정보는 일종의 자격 정보라고 생각해야겠네요.

인증 값은 Bearer Base64라는 방법으로 인코딩된 값을 토큰으로 만들고, 이를 전송하게 됩니다.

다음은 토큰의 형식을 보여줍니다. 당연하게도 JSON 형태를 가집니다.

{
    //header
    //토큰방식
    "typ": "JWT",
    //암호화 알고리즘 방식
    "alg": "HS512"
},
{
    //payload
    //토큰의 주인, 유일한 식별자
    "sub": "코드 값",
    //토큰 발행 주체
    "iss": "백엔드 프로젝트명",
    "isa": "토큰 발행 날짜와 시간",
    "exp": "토큰 만료 시간"
}
//signature
"토큰 발행 주체가 발행한 서명으로 토큰의 유효성 검사에 사용"

//위의 값들이 Base64 인코딩되어 토큰을 발행
//헤더 값.페이로드 값.시그니쳐 값

 

JWT 순서

이 토큰의 진행되는 절차를 로그인 하는 상황을 통해 간단히 살펴보겠습니다. react 어플리케이션과 백엔드 어플리케이션 두 가지가 있고 서로 소통한다고 가정합니다.

 

먼저 react 어플리케이션에서 로그인을 백엔드(서버)에 요청합니다.

→ 백엔드 어플리케이션에서 로그인 정보(아이디, 비밀번호)가 일치하면 JWT(헤더, 페이로드, 시그니처) 토큰을 발행합니다.

→ react 어플리케이션에서는 발행된 JWT(토큰)을 로컬 저장소 혹은 세션 저장소에 저장하고, 백엔드 어플리케이션으로 다른 요청을 보낼 때마다 저장된 토큰을 꺼내서 요청 헤더에 담아 요청을 보냅니다.

→ 백엔드 어플리케이션에서 요청이오면 이 헤더에 포함된 토큰을 Base64로 디코딩해서 토큰이 유효한지 검사합니다. 유효한 토큰이라면, 해당 요청을 실행 후 응답하고, 유효하지 않으면 인증 에러를 포함해서 응답합니다.

→ react 어플리케이션에서 응답이 제대로 오면 해당 응답을 보여주고 인증 에러가 있다면 인증 에러를 답은 응답을 보여줍니다. 또한, 인증에러를 받았다면 로그인페이지로 이동하게 됩니다.

 

CORS

코스가 무엇인가? CORS(Cross Origin Resource Sharing)는 직역하면 교차 출처 리소스 공유라는 뜻입니다. 모든 웹 어플리케이션은 기본적으로 SOP(Same Origin Policy)라는 정책을 따르게 되어있습니다. 동일한 프로토콜, 동일한 포트, 동일한 도메인에서만 자원을 사용해야한다는 것이죠!

예를 들면, react 서버인 http://localhost:3000번은 Spring boot 기본 서버인 9090번 포트에 있는 자원을 사용할 수 없는 것입니다. 그런데 이렇게 되면 프론트 엔드를 react 서버로 작업하고 백엔드를 Spring boot의 Tomcat 서버를 사용한다고 하면 두 가지를 이어서 작업할 수가 없겠죠?

 

이러한 코스의 해결방법을 찾아봅시다. 

 

먼저 프록시 서버를 구축할 수 있습니다. 프론트엔드를 맡은 분들이 직접 구현하면 되는데, 그 방법이 매우 복잡하고 어렵습니다. 그래서 자원을 사용할 서버에서 CORS를 허용하는 방법을 사용합니다.

 

Spring boot에서, WebMvcConfigurer를 상속받은 Configuration 클래스를 하나 정의하고 addCorsMappings라는 메소드를 구현하는 방식으로 Cors를 허용할 수 있습니다. 관련 코드를 작성해보면 아래와 같습니다.

 

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
    //cors 에러방지
    public void addCorsMappings(CorsRegistry registry){
        //모든 요청에 대한 예외 등록
        registry.addMapping("/**")
                //예외로 동작할 주소 지정
                .allowedOrigins("http://localhost:3000")
                //허용될 요청방식
                .allowedMethods("GET", "POST", "PUT","DELETE")
                //허용될 요청 헤더
                .allowedHeaders("*")
                //인증에 관한 정보 허용
                .allowCredentials(true)
                //타임아웃 시간 설정
                .maxAge(3600);

    }
}

 

이렇게 하면, 프론트엔드와 백엔드를 서로 연결할 준비를 마쳤다고 할 수 있겠습니다. 이후 세부적인 작업으로 로그인, 회원가입하는 방법에 대해 작성해보겠습니다.