[프론트엔드 & 백엔드] 회원 더미 DB 추가 관련

[yoona-J]

이슈 내용

안녕하세요 ㅎㅎ 주말은 다들 잘 보내셨나요?

저는 현재 로그인 기능과 다른 기능들(탈퇴 등)을 개발 중에 있습니다. 그런데, api를 이용해 기능을 구현할 때 문제가 있어 이렇게 이슈 탭에 내용을 작성하게 되었는데요,,

1. 로그인 시 토큰이 발급되지 않는 이슈

우선, 로그인 시 로직은 프론트엔드에서 리다이렉트를 요청하면 -> 카카오에서 인가코드를 넘겨주고 -> 인가코드로 토큰이 발급되면 -> 프론트엔드에 회원에 대한 정보와 acess token이 같이 전송된다 이렇게 이해하고 있는데요.

현재 기능을 구현하게 되면, 리다이렉트 요청 -> 인가코드 전송 이렇게 토큰이 발급되지 않고 끝나게 됩니다.

참고 내용 : https://www.notion.so/4bc57e9d5f4a4b2dbe2ce2f00f200fd4

2. 회원 탈퇴 시 문제 발생

회원 탈퇴 기능에서도 마찬가지입니다. 더미 토큰을 만들어서 하드 코딩으로 넘겨주게 된다고 해도, 해당 토큰은 백엔드에서 발급한 토큰이 아니기 때문에, jwt 토큰 구조가 올바르지 않다거나, 서버 상의 이슈로 관리자에게 문의하라는 내용이 나타납니다. (code:500)

요구사항

이러한 부분에 대해 먼저 대한님께 문의 드렸을 때는, jwt 토큰에 회원 정보가 들어가지 않도록 제작하였기 때문에 하드 코딩으로 직접 토큰을 넣어줘도 문제가 없다고 하셔서 개발을 진행했는데요, 로그인 시 해당 사용자가 로그인을 했는지에 대한 여부에 대해서는 문제가 없지만, api에서 회원 정보를 불러올 때는 header에 회원 고유 jwt token이 필요하기 때문에 정보가 불러와지지 않거나, status 값이 500이 찍히거나, jwt토큰에 오류가 있다는 console 이 찍히게 됩니다.

---

따라서 백엔드 분들에게 부탁드리고 싶은 내용은 다음과 같습니다. DB 내에 더미 데이터를 만들어주셨으면 좋겠습니다. 더미 데이터가 없으면, 마이페이지 개발도 프론트 측에서 불가능하고, 회원 탈퇴 기능도 회원 정보가 존재하지 않기 때문에 불가능합니다. (모임 부분은 제가 주개발자가 아니라 확인할 수 없습니다.) api로 이루어진 모든 기능들이 불가능하다고 생각하시면 됩니다. (health api는 정상 동작하는 것으로 보아 hoppy 서버에는 문제가 없는 거 같습니다만, 다른 api들에는 모두 이슈가 나타납니다.)

이 부분이 원활하게 해결되지 않으면,, 다른 방법을 고안해야 할 거 같습니다.

로컬에서 로그인 시 토큰 값도 전송이 되어야하는데, 대한님께서는 이 부분이 스프링 서버로 돌아가기 때문에 일반 컴퓨터에서는 정상 작동하지 않는거 같다고 말씀해주셨습니다. 그런데, 프론트 측에서 개발이 원활히 동작하려면 데이터가 보여져야 해서요,,

확인 부탁드립니다.

[seaworld0125]

안녕하세요 윤아 님, 우선 이슈 자세하게 작성해 주셔서 감사합니다.

윤아 님 피드백을 토대로 오전에 원인 파악을 했고 방금 막 수정을 완료했습니다. 글에서 말씀하신 방식으로 로그인을 다시 시도해 보시면 현재는 정상적으로 토큰 발급이 되는 것을 보실 수 있습니다.

다만 로그인 진행 화면 주소가 아래와 같이 변경되었습니다. https://hoppy.kro.kr/api/oauth2/authorization/kakao --> https://hoppy.kro.kr/oauth2/authorization/kakao

카카오 로그인이 잘 진행되면 현재 사용가능한 API를 통해서 더미 데이터도 편하게 CRUD 하실 수 있을 것이라고 생각됩니다. 한 번 확인해 보시고 답변 부탁드립니다.

그리고 혹시 대량의 더미 데이터가 따로 필요하시다면 저희 쪽에서 쉽게 만들어드릴 수 있으니 필요하실 때 말씀해주세요.

[yoona-J]

안녕하세요 태경님. @seaworld0125 로그인 진행 주소값을 변경했더니 토큰이 잘 들어오네요 ㅎㅎ 감사합니다.

다만, 본래 https://hoppy.kro.kr/api/oauth2/authorization/kakao 이 주소로 로그인을 시도했을 때는 localhost:8888/login/oauth2/code/kakao 로 인가코드가 넘어와졌는데요, 변경된 주소로 로그인을 시도하게 되면 https://hoppy.kro.kr/login/oauth2/code/kakao 로 인가코드와 토큰이 넘어와지게 됩니다.

그래서 해당 주소값은 제가 임의로 처리할 수 있는 로컬 주소가 아니어서 push 등의 메소드로 데이터를 넘길 수가 없네요.

혹시 서버 측에서 넘어가는 주소 값을

1. 로컬로 보내주거나 (localhost:8888)
2. 해당 주소 값에 임시적으로 로컬 주소로 돌아가게 하는 버튼을 제작하거나 (localhost:8888/login/oauth2/code/kakao)

이 두가지 중 한가지 방법으로 해결이 가능할까요? 감사합니다!

참고로, 이 두가지 모두 어려운 경우라면 DB에 데이터를 꽂아주시고, 구현할 때만 더미 DB의 토큰값이 넘어가지도록 해주셔도 될 거 같습니다.

[seaworld0125]

@yoona-J

피드백 감사합니다..!

말씀해주신 내용을 바탕으로 JWT 전달 방식을 조금 바꿔보았습니다.

현재 로그인 주소로 다시 로그인을 시도해보시면 빈 화면에 JWT만 보이는 화면으로 redirect 되는 것을 보실 수 있습니다.

HTTP body를 파싱하셔도 좋으실 것 같고 URL에도 JWT가 data={jwt} 형식으로 들어가 있으니 둘 중 편하신 것을 파싱하여 사용하시면 좋을 것 같습니다.

로컬 개발 환경으로 리다이렉트 해드리는 방법도 가능은하지만 추후 리액트 서버가 aws에 올라오게 된다면 로직을 수정해야 될 수도 있어 이렇게 진행하게 되었습니다.

한 번 시도해보시고 말씀해주세요! 감사합니다.

[yoona-J]

안녕하세요 태경님! @seaworld0125 출근해서 확인해보았습니다 ㅎㅎ 너무 잘 되네요!! 이슈 처리하느라 너무 고생 많으셨습니다 ㅠㅠ

한가지 여쭤볼게 있는데요, 카카오 로그인 후 로그아웃 기능도 api로 만들어주시는 건지 아니면 프론트 측에서 처리를 해야할 지 궁금합니다!

감사합니다 :)

[seaworld0125]

@yoona-J

안녕하세요 윤아 님, 잘 동작하는 것 같아 다행입니다😊

로그아웃의 경우 카카오의 로그아웃 정책 중 하나인 카카오계정과 함께 로그아웃 기능을 이용하면 될 것 같습니다.

프론트엔드 측에서 로그아웃 버튼 구현을 위한 API는 저희 측에서 가능한 한 빨리 안내해 드리겠습니다.

[yoona-J]

@seaworld0125

네! 답변 너무나 감사드립니다 ㅎㅎ

이제 토큰도 잘 가져와져서 postman으로 동작해보니 값도 잘 불러와지더라고요 :)

다만, 개발환경에서 axios를 이용해 api의 정보값을 불러오게 되는데, CORS 에러가 나타납니다.

https://velog.io/@wiostz98kr/React-Express-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 위의 블로그 참고해 프론트에서 적용할 수 있는 방법은 적용해 둔 상태인데, 스프링 서버에서도 CORS 에러 처리 한번 부탁드려도 될까요?

감사합니다!!

[seaworld0125]

@yoona-J

CORS 설정을 깜빡했네요. 서버에 바로 CORS 정책도 추가했습니다.

현재 응답으로 CORS 정책은 잘 확인되지만 문제가 없어졌는지는 확실하게 확인이 어렵네요.

시간 되실 때 한 번 시도해보시고 문제가 없는지 코멘트 남겨주시면 감사하겠습니다!

[yoona-J]

@seaworld0125

안녕하세요!

확인해본 결과 아직 CORS 에러가 나타나는 것으로 보입니다.

한번 다시 확인 부탁드릴게요.

감사합니다!

[seaworld0125]

@yoona-J

사진 감사합니다 ㅎㅎ 오류 보고 알맞게 다시 수정하였습니다. 번거롭지만 다시 한 번 확인 부탁드립니다..!

[yoona-J]

@seaworld0125

안녕하세요! 다행히 문제를 해결했습니다. ㅎㅎ

axios 상에서 credentials 값을 별도로 지정해줘야 CORS 인증 절차가 완료되더라고요.

덕분에 해결했네요 ㅎㅎ 감사합니다!

[seaworld0125]

@yoona-J

다행이네요😊 수고하셨습니다!