스프링부트 이용한 카카오 로그인 완료 시 어떻게 해야하나요?

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.1104075


스프링부트로 웹개발 카카오 로그인을 시도중입니다.
카카오 로그인 성공시 jwt토큰과 닉네임을 프론트에 반환해줘야하는데 현재 컨트롤러 코드입니다.

OauthToken oauthToken = userService.getAccessToken(code);
            logger.info("OauthToken: " + oauthToken);

            // 카카오 회원정보 디비 저장 후 JWT 생성
            AuthResponse authResponse = userService.saveUserAndGetToken(oauthToken.getAccess_token());
            logger.info("JWT Token: " + authResponse.getJwtToken());
            logger.info("User Nickname: " + authResponse.getNickname());

            return ResponseEntity.ok(authResponse)

이렇게 반환을 하면 새로운 페이지가 뜨면서 페이지에 해당 정보가 나타나는데 원래 이렇게 되는게 맞는건가요?

이렇게 페이지에 정보가 뜨고 있습니다 ㅜㅜ
postman으로 테스트해봐도


이렇게 뜨는데요

일반 로그인도 똑같이 토큰과 닉네임을 반환하는데 이경우에는 토큰과 닉네임이 json형태로 전달이 됩니다.


컨트롤러에서 반환하는건 일반로그인, 카카오로그인 똑같은데 왜 카카오 로그인에서 페이지가 나타나는건가요 ㅜㅜㅜ

안녕하세요.

새로운 페이지가 뜨면서 페이지에 해당 정보가 나타는 이유

ResponseEntity.ok(authResponse)
authResponse 값이 json으로 반환되도록 구현 하셨기에 첫번째 이미지와 같이 표시됩니다.

ponstman 응답이 html인 이유

인가코드 요청 /oauth/authorize 은 Oauth2.0 스팩에 따라
사용자 브라우저를 통해서 카카오 계정 인증이 진행됩니다.
정상적인 동작 입니다. ponstman Oauth 로그인 과정을 Request타입으로 직접 테스트 할 수 없습니다.

필요한 설계 누락

서비스의 로그인 과정(카카오 로그인 무관)과 jwt 발급 및 이를 사용하는 방법까지 설계가 누락된 것으로 보입니다.
클라이언트가 서비스의 jwt를 어떻게 전달 받고 사용하고자 하는지 명확히 하신 뒤, 서비스측 로그인 또는 카카오 로그인 redirect_uri 이후 행동 및 설계를 결정하실 수 있을것으로 보입니다.

궁금한게 카카오 로그인 성공 후 https://swyg-front.vercel.app/my/doing 해당 페이지로 이동을 해야하는데요, 일반 로그인같은 경우 위의 사진처럼 넘겨준 정보를 통해 프론트엔드에서 해당 doing페이지로 넘어가게 처리를 하였는데 카카오에서는 그게 불가능한건가요? 프론트엔드에서 카카오로그인같은 경우는 doing페이지로 넘어가게 작업이 안된다고 백엔드에서 넘어가게 해달라고 하셔서요,
image
위 사진처럼 백엔드에서 doing으로 넘어가게하고 빨간 네모박스처럼 정보를 넘겨주는게 가능한가요? 첫번째 이미지처럼 새로운 페이지에 jwt토큰과 닉네임을 넘겨주면 프론트에서 doing페이지로 넘어가게 하는건 안되는건가요 원래?

안녕하세요.

일반 로그인에서 해당 값을 얻어올 때 비동기 HTTP(ex, ajax, fectch) 사용 하여 ID/PW를 넘겨 결과를 가져오시나요?

첫번째 답글에 대해서요
그러면 백엔드측에서 저기까지 하면 된거고 이제 토큰과 닉네임을 이용해서 구현하는건 프론트에서 해야할 일인건가요?

안녕하세요.

백앤드에서 처리하시는 것을 권장 드립니다.

역할이 정해져 있지 않지만 카카오에서 발급해 드린 접근토큰을 백앤드가 갖고 있음에도 프론트로 전달하여 프로필을 조회하게 하는 것은 불필요한 구현 같습니다.

민감한 정보의 수집 및 처리는 백앤드에서 하고 프론트는 백앤드에 인가된 사용자를 대상으로 필요한 정보만 가져가도록 하시는게 좋아보입니다.


그럼 백엔드측에서 이렇게 전달을 해도 된다는건가요…?? 프론트와 백엔드로 나뉘어져 있으니 잘 구분이 되지 않아서요 ㅜㅜ