웹 개발 - 프로젝트 2 - 6. streak lover 로그인

유저가 여러 명 있다고 가정하고 로그인 기능을 개발할 것입니다.

우선 데이터베이스와 백엔드를 연결해 주고 유저 정보를 담는 간단한 db를 만들었습니다.

 

로그인은 쿠키, 세션, 토큰 등 다양하게 있지만 저는 세션 인증을 이용해 로그인을 구현할 것입니다. 보통 다음 과정으로 이루어집니다.

1. 유저가 로그인을 합니다.
2. 서버에서 세션 ID를 발급합니다.
3. 클라이언트에서는 해당 정보를 쿠키에 저장합니다.
4. 다음에 요청할 때 쿠키에 저장된 정보를 같이 보냅니다. 이를 통해 이미 로그인한 유저임을 알 수 있습니다.

백엔드부터 한번 진행해 보겠습니다.

백엔드

우선 아이디, 패스워드를 가져오면 해당 정보를 찾는 것까지 진행했습니다.

 

그럼 쿠키에 저장하는 것이 남았네요. 요청할 때 HttpSession을 가져오도록 합니다.

 

그리고 유저 정보가 있으면 그걸 세션에 저장해 줍니다. setAttribute를 이용하면 됩니다.

프런트엔드

이제 프런트에서 백엔드로 요청을 보내야 합니다. 저는 axios를 이용할 것입니다.

npm install axios

 

로 axios를 설치합니다.

 

버튼을 누르면 이름, 비번이 전송되게 합니다. 나중에는 입력 폼으로 받게 하겠지만 지금은 정해진 데이터를 넣게 합니다.

 

실행하면 버튼이 나옵니다. 이 버튼을 누르면 데이터가 전송될 것입니다.

 

뭔가 전송이 되긴 했습니다. 이상하게 나오긴 하지만 말이죠.

 

우선 개발자 도구에서 네트워크 탭을 봅시다.

 

저는 POST로 날렸는데 method가 OPTION으로 되어 있습니다. 403인 것을 보니 서버 쪽에서 요청을 거부한 것 같습니다. 

그럼 서버 쪽 로그를 살펴봅시다. 저는 filter를 이용해서 요청이 있을 때마다 로그를 찍었습니다.

 

그렇게 해서 나온 데이터입니다.

 

method는 OPTIONS인데 access-control-request-method는 POST로 되어 있습니다. POST라는 것을 인식하긴 한 것 같습니다.

 

원래 서버와 통신할 때 예비 요청을 보내 잘 통신되는지 확인한 다음 본 요청을 보냅니다. 이때, 예비 요청은 OPTIONS로 보내집니다. 이 요청이 거부된 것 같네요.

CORS 정책에 따라 요청이 거절된 것 같습니다. CORS 매핑을 추가해 줍니다. config - webconfig - WebConfig 클래스를 만들어 줍니다.

 

여기에 CORS 설정을 해줍니다.

 

@Configuration : 설정과 관련된 파일이라고 알려줍니다.

addMapping : 모든 경로에 대해 이 정책을 적용합니다.

allowedOrigins : 이 경로에 대해서만 허가합니다.

allowedMethods : 이 메소드에 대해서만 허가합니다.

allowCredentials : 쿠키나 인증 헤더와 같은 자격 증명 정보를 요청에 포함할 수 있도록 허용합니다.

maxAge : 응답을 브라우저에 캐시하는 시간을 설정합니다. 초 단위로 설정합니다.

 

이렇게 하고 다시 실행해 봅니다.

 

이번에는 OPTIONS가 잘 된 것을 볼 수 있습니다.

 

그리고 응답도 잘 내려옵니다.

 

그리고 로그인을 여러번 눌러도 OPTIONS는 한번만 실행되는 것을 볼 수 있습니다.

 

그리고 쿠키에 세팅이 안되는 것을 알 수 있습니다.

저희는 백엔드에 요청을 보낼 때 쿠키도 같이 보내야 합니다. App.jsx에 withCredentials를 기본으로 설정해서 쿠키도 같이 보내게 합니다.

 

그런다음 요청을 보내면 쿠키가 세팅된 것을 볼 수 있습니다.