문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.
___현재 스프링부트 3.x 버전과 리액트 8.x 버전으로 작업중입니다.
ID: 1021973
@GetMapping(“/auth/kakao/login”)
public void KakaoOauthTest(HttpServletResponse response) throws IOException {
response.sendRedirect(kakaoApiClient.getAuthorizeUrl());
}
@GetMapping("/auth/kakao/callback")
public ResponseEntity<Map<String, Object>> kakaoCallback(@RequestParam("code") String code) {
KakaoLoginParams kakaoLoginParams = new KakaoLoginParams();
log.info("KakaoParams : {}", kakaoLoginParams);
//로그는 (+) 쓰지말고 아래처럼 "" 안에는 {} 로 변수 위치 잡아주고 (,) 뒤에다가 해당 위치에 넣을 변수 지정해주면 됨
log.info("code : {}", code);
kakaoLoginParams.setAuthorizationCode(code);
String accessToken = kakaoApiClient.requestAccessToken(kakaoLoginParams);
OAuthInfoResponse userInfo = kakaoApiClient.requestOauthInfo(accessToken);
log.info("{}", userInfo.getEmail());
//DB에 User정보 담기
Long userId = oAuthLoginService.findOrCreateMember(userInfo);
String redirectUrl = "http://localhost:3000/boardList"; // 리디렉션할 페이지의 URL
Map<String, Object> responseBody = new HashMap<>();
responseBody.put("accessToken", accessToken);
responseBody.put("userInfo", userInfo);
responseBody.put("redirectUrl", redirectUrl); // 리디렉션 URL을 응답에 추가
// 여기서 리다이렉트 하지말고 토큰 값이랑 프론트에서 필요한 사용자 정보를 보내주면 됨
return ResponseEntity.ok(responseBody);
}
@GetMapping("/redirect")
public ResponseEntity<Void> performRedirection(@RequestParam String redirectUrl) {
// 리디렉션을 수행하는 302 응답 생성
HttpHeaders headers = new HttpHeaders();
headers.add("Location", redirectUrl);
return new ResponseEntity<>(headers, HttpStatus.FOUND); // HttpStatus.FOUND: 302 응답 코드
}
function LoginHandler() {
const navigate = useNavigate();
useEffect(() => {
const handleKakaoLogin = async () => {
try {
const code = new URL(window.location.href).searchParams.get(‘code’);
console.log("code??: ", code);
if (!code) {
console.error('코드가 없습니다.');
return;
}
const backendUrl = 'http://localhost:8080';
const res = await handleKakaoLogin(code, backendUrl);
console.log('Response', res);
if (res.status === 200) {
const safeRedirectUrl = res.data.redirectUrl;
if (safeRedirectUrl.startsWith("http://localhost:8080/")) {
window.location.href = safeRedirectUrl;
} else {
console.error('잘못된 URL 경로입니다.');
}
}
} catch (error) {
console.error('로그인 에러', error);
if (error.response && error.response.status === 401) {
console.log('응답 에러: ', error.response.status);
} else {
console.log('문제 발생');
}
// 에러 처리 로직
}
};
handleKakaoLogin();
}, []);
const handleKakaoLogin = async (code, backendUrl) => {
const params = new URLSearchParams();
params.append(‘code’, code);
return await axios({
method: 'POST',
url: `${backendUrl}/public/auth/kakao/callback`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: params.toString()
});
};
return (
로그인 처리 중…
);
}
export default LoginHandler;
이런 식으로 작성했는데 사용자 인증 정보는 받아와지지만 메인화면으로 넘어가질 않습니다.
설정은 oauth:
kakao:
authorization-grant-type: authorization_code
client-id: 69445a05dee5a6928649b416c9df1964
client-secret: hxEg8JGhjQm7Np8bMd18vQWZhVOjcPm0
# redirect-uri: http://localhost:8080/oauth2/authorization/kakao
redirect-uri: http://localhost:8080/public/auth/kakao/callback
client-authentication-method: POST
client-name: kakao
oauth-url: https://kauth.kakao.com
api-url: https://kapi.kakao.com
scope:
- profile_nickname
- account_email 이렇게 되어 있어요.