1. 카카오 개발자 사이트에서 애플리케이션 등록 및 설정
2. 카카오 로그인 REST API를 이용하여 로그인 구현
카카오 로그인 API는 OAuth 2.0을 따르며,
인가 코드 방식(authorization code grant)을 사용
클라이언트 ID 및 key가 필요
클라이언트는 카카오 로그인 페이지로 사용자를 리디렉션하고 이때 필요한 파라미터 :
client_id: 애플리케이션의 클라이언트 ID
redirect_uri: 인가 코드를 받을 리디렉션 URI
response_type: 인증 코드를 요청하는 값으로 'code'를 사용
사용자가 카카오 계정으로 로그인하고 권한 부여를 수락하면
카카오는 인가 코드를 생성하고 리디렉션 URI로 사용자를 리다이렉션한다
3. 사용자 정보 획득 및 처리
클라이언트는 받은 인가 코드를 이용해 서버에 토큰 요청
이 요청에 필요한 것 :
grant_type: authorization_code로 설정
client_id: 애플리케이션의 클라이언트 ID
redirect_uri: 등록된 리디렉션 URI
code: 카카오가 발급한 인가 코드
client_secret: 애플리케이션의 클라이언트 시크릿
서버는 토큰을 받아 사용자 정보 요청을 보내고
카카오는 사용자 정보를 JSON 형식으로 반환
서버는 받은 사용자 정보를 처리하고, 필요에 따라 내부 데이터베이스에 저장
4. 로그인 상태 유지
사용자가 로그인하면 서버 측에서 세션 또는 토큰을 발급하여 로그인 상태를 유지한다
이를 통해 사용자가 애플리케이션을 이용하는 동안 인증된 상태를 유지할 수 있다
'/login/kakao/callback' 엔드포인트:
'/login/kakao/callback'은 서버 측에서 클라이언트로부터 받은 카카오 로그인 요청을 처리하기 위한 엔드포인트입니다.
클라이언트가 카카오 로그인을 완료하면, 카카오는 사용자 인가 코드를 함께 '/login/kakao/callback' 엔드포인트로 보냅니다.
서버는 이 인가 코드를 이용하여 카카오로부터 액세스 토큰을 요청하고, 사용자 정보를 얻어오는 등의 작업을 수행합니다.
/user/sign-in에서 카카오 로그인 버튼을 누르면
redirect uri로 설정해둔 /home/home-list-view로 이동하며 url에 인가코드가 나타나고
그 인가코드를 엔드포인트에 요청해서 추출 한 뒤
인가코드를 통해서 토큰을 받을 수 있다
라는게 내가 여태 이해한 과정이다
KakaoController.java
@RestController
public class KakaoController {
//카카오 로그인 요청을 처리하는 controller
private static final String KAKAO_TOKEN_API_URL = "https://kauth.kakao.com/oauth/token";
private static final String CLIENT_ID = "000000";
private static final String REDIRECT_URI = "http://localhost:8080/home/home-list-view";
private static final String CLIENT_SECRET = "1f9ba2000000008d549827331eb10";
@GetMapping("/login/kakao/callback")
public String kakaoLoginCallback(@RequestParam("code") String code) {
// 카카오로부터 받은 인가 코드로 토큰을 요청
String tokenRequestUrl = KAKAO_TOKEN_API_URL
+ "?grant_type=authorization_code"
+ "&client_id=" + CLIENT_ID
+ "&redirect_uri=" + REDIRECT_URI
+ "&code=" + code
+ "&client_secret=" + CLIENT_SECRET;
RestTemplate restTemplate = new RestTemplate();
String response = restTemplate.postForObject(tokenRequestUrl, null, String.class);
// 토큰을 받아서 사용자 정보 요청 등 추가 작업 수행
// 여기서는 간단하게 받은 응답을 출력
System.out.println(response);
return "redirect:/home/home-list-view";
}
}<script>
// 카카오 sdk 초기화
Kakao.init("166cb800000000000917a09a6fb");
Kakao.isInitialized();
// 카카오 로그인 코드 확인(버튼 누르면 메소드 실행 -> 카카오auth서버로 이동해 로그인화면으로 진입)
function loginWithKakao() {
// 인가 코드 받기
Kakao.Auth.authorize({
redirectUri: "http://localhost:8080/home/home-list-view"
});
}
</script>controller와 jsp에 작성 해준 뒤 엔트포인트에 요청했더니 code라는 파라미터가 존재하지 않는다는 400에러가 발생했다. 인가코드가 엔드포인트까지 전달이 안되는 중이었다
There was an unexpected error (type=Bad Request, status=400).
Required request parameter 'code' for method parameter type String is not present
org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'code' for method parameter type String is not present그래서 인가 코드를 서버로 전송하는 가장 일반적인 방법은
HTTP 요청의 쿼리 문자열(Query String)을 통해 전달하거나
post 바디를 이용하는 방법이라고 해서
GET 요청의 쿼리 문자열에 인가 코드를 포함하여 전송하는 코드를 script에 작성했다
<script>
// 카카오 sdk 초기화
Kakao.init("166cb8c0000000000917a09a6fb");
Kakao.isInitialized();
// 카카오 로그인 코드 확인(버튼 누르면 메소드 실행 -> 카카오auth서버로 이동해 로그인화면으로 진입)
function loginWithKakao() {
// 인가 코드 받기
Kakao.Auth.authorize({
redirectUri: "http://localhost:8080/home/home-list-view",
success: function(authObj) {
// 인가 코드를 가져와서 서버로 GET 요청 보냄
var code = authObj.code; // 클라이언트에서 가져온 인가 코드
var redirectUrl = "http://localhost:8080/login/kakao/callback?code=" + code; // 리다이렉트할 URL에 인가 코드를 포함
// GET 요청을 보냅니다.
fetch(redirectUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
console.log(data); // 서버에서 받은 응답을 출력합니다.
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
},
fail: function(err) {
console.error(err);
}
});
}
</script>작성 하고 요청했더니 console에 오류가 찍혔다
kakao.min.js:98 Uncaught cn {name: 'KakaoError', message: 'Invalid parameter keys: success,fail at Auth.authorize', stack: 'Error\n at https://t1.kakaocdn.net/kakao_js_sdk/…kaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:215'}message: "Invalid parameter keys: success,fail at Auth.authorize"name: "KakaoError"stack: "Error\n at https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:19634\n at https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:140\n at https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:215"[[Prototype]]: Error
at https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:19634
at https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:140
at https://t1.kakaocdn.net/kakao_js_sdk/2.5.0/kakao.min.js:98:215
ln @ kakao.min.js:98
Un @ kakao.min.js:98
loginWithKakao @ sign-in-view:120
(anonymous) @ VM24:1Kakao SDK의 Auth.authorize 메소드에 올바르지 않은 매개변수 키가 포함되어 있다는 에러이다 success 및 fail 매개변수 키가 잘못된 것이라는데
일반적으로 success 및 fail 콜백은 Auth.authorize 메소드에서 사용되는 것이 아니라, Kakao.Auth.login 메소드에서 사용되기 때문이었다
