카카오 로그인 공식 레퍼런스를 참고하여 작성
https://developers.kakao.com/docs/latest/ko/kakaologin/common
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
프로젝트 코드 Github
https://github.com/kwj2435/kakao-restapi-login
기술 스택
Java 17
Spring Boot 3.x.x
Thymeleaf
OpenFeign
1. 카카오 개발자 센터 세팅
개발을 시작하기전, 카카오에서 제공하는 Rest API 방식의 로그인 시퀀스 다이어그램을 살펴보자.
1. 사용자는 카카오 로그인을 서버로 요청하면, 서비스 서버를 통해 카카오 로그인 팝업이 클라이언트에게 노출된다.
(GET /oauth/authorize URL에 APP Rest API Key 및 Redirect Url을 포함한 URL을 서버에서 클라이언트에게 전달하고 클라이언트는 해당 URL을 통해 카카오 로그인 팝업에 접근)
2. 노출된 팝업을 통해 사용자가 로그인을 하게 되면 카카오 로그인 팝업 호출시 전달된 redirect url을 통해 사용자 인가코드를 포함한 callback 이 발생한다.
3. 발급된 인가코드를 통해 토큰 발급을 진행하고, 발급된 토큰을 통해 사용자 정보를 조회하여 서비스 내부에서 회원가입 혹은 로그인 처리를 진행한다.
내 애플리케이션 설정
카카오 개발자 센터 - 상단 내 애플리케이션 - 애플리케이션 추가하기를 클릭한다.
앱 이름에는 내 프로젝트 이름을, 회사명에는 임의의 명칭(ex.내이름)을 적어주고 카테고리는 내 프로젝트가 속한 카테고리를 선택한다.
생성된 애플리케이션을 클릭하여 들어간후 좌측 메뉴에서 [앱키]를 눌러 REST API Key를 복사해둔다.
이후 좌측에서 카카오 로그인 탭을 클릭후, 활성화 버튼으로 카카오 로그인을 활성하고 하단 Redirect URL을 설정하여 사용자가 카카오 로그인 이후 Redirect될 서버 API URL을 작성 및 저장한다.
2. 코드 구현
이번 실습은 카카오 서버와 Oauth 프로세스 통신을 통한 로그인 구현이 목표이기에 별도 DB 연동은 구현하지 않았다.
Spring Boot Initializer를 통해 Spring Web, Lombok, OpenFeign, Thymeleaf를 추가 한다.
application.properties 혹은 yml파일에 카카오 개발자센터에서 확인한 client id와 사용자 로그인 완료후 카카오에서 redirect할 uri를 적어준다.
kakao:
oauth:
client-id: 1234
redirect-uri:http://localhost:9000/api/v1/oauth/kakao/callback
이후 카카오 로그인 버튼을 표시하는 간단한 HTML 과 ViewController 코드를 작성해준다.
@Controller
@RequestMapping("/login")
public class LoginViewController {
@Value("${kakao.oauth.client-id}")
private String clientId;
@Value("${kakao.oauth.redirect-uri}")
private String redirectUri;
/**
* 카카오 로그인
* @return
*/
@GetMapping("/kakao")
public String loginKakao(Model model) {
String kakaoAuthDomain = "https://kauth.kakao.com/oauth/authorize";
String responseType = "code";
String kakaoLoginUrl = kakaoAuthDomain + "?" +
"response_type=" + responseType +
"&client_id=" + clientId +
"&redirect_uri=" + redirectUri;
model.addAttribute("kakaoLoginUri", kakaoLoginUrl);
return "kakaoLogin";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a th:href="${loginUrl}">
<img src="/kakao_login_large_narrow.png">
</a>
</body>
</html>
위 코드를 기반으로 화면을 출력하면 아래와 같이 로그인 버튼이 표시된다.
a태그와 타임리프 href 속성에 따라 위 버튼에는 Controller에서 전달된 인가코드 확인을 위한 카카오 로그인 팝업 URL이 링크되어 있으며, 해당 버튼을 클릭함으로 카카오 로그인을 진행하게 된다.
로그인 이후 위에서 설정한 Redirect URL로 카카오에서 인가코드를 전달해준다.
계속해서 인가코드를 전달받아서 사용할 callback API를 작성해준다.
callback API에서는 전달된 인가코드로 토큰을 획득하고, 발급된 토큰으로 회원 정보를 조회한다.
아래는 각 레이어별 코드이다.
카카오 콜백 API Controller
@RestController
@RequestMapping("/api/v1/login")
@RequiredArgsConstructor
public class LoginController {
private final KakaoOauthService kakaoOauthService;
@GetMapping("/kakao/callback")
public void kakaoCallback(@RequestParam("code") String code) {
kakaoOauthService.kakaoLoginProcess(code);
}
}
인가 코드 - 토큰 - 사용자 정보 조회 Servcie
@Service
@RequiredArgsConstructor
public class KakaoOauthService {
@Value("${kakao.oauth.client-id}")
private String clientId;
@Value("${kakao.oauth.redirect-uri}")
private String redirectUri;
private final KakaoOauthClient kakaoOauthClient;
private final KakaoApiClient kakaoApiClient;
public void kakaoLoginProcess(String authCode) {
// 토큰 요청
KakaoOauthToken kakaoToken = kakaoOauthClient.getKakaoToken(
"authorization_code",
clientId,
redirectUri,
authCode
);
// 사용자 정보 조회
String authorization = "Bearer " + kakaoToken.getAccessToken();
Map<String, Object> kakaoMemberInfo = kakaoApiClient.getKakaoMemberInfo(authorization);
// 조회된 사용자 정보를 이용해서 로그인 혹은 회원가입을 진행한후 비즈니스 로직을 마무리한다.
System.out.println(kakaoMemberInfo);
}
}
카카오 토큰 Response DTO
@Getter
@AllArgsConstructor
@JsonNaming(PropertyNamingStrategies.SnakeCaseStrategy.class)
public class KakaoOauthToken {
private String tokenType;
private String accessToken;
private String idToken;
private Integer expiresIn;
private String refreshToken;
private Integer refreshTokenExpiresIn;
private String scope;
}
카카오 인증 서버 및 API 서버 통신 OpenFeign Client
@FeignClient(name = "KakaoOauthClient", url = "https://kauth.kakao.com/oauth")
public interface KakaoOauthClient {
@PostMapping("/token")
@Headers("Content-Type: application/x-www-form-urlencoded;charset=utf-8")
KakaoOauthToken getKakaoToken(
@RequestParam("grant_type") String grantType,
@RequestParam("client_id") String clientId,
@RequestParam("redirect_uri") String redirectUri,
@RequestParam("code") String code
);
}@FeignClient(name = "KakaoApiClient", url = "https://kapi.kakao.com/v2")
public interface KakaoApiClient {
@GetMapping("/user/me")
@Headers("Content-Type: application/x-www-form-urlencoded;charset=utf-8")
Map<String, Object> getKakaoMemberInfo(@RequestHeader("Authorization") String token);
}
위 코드를 기반으로 callback API에서 인가코드로 토큰 발급, 이후에 사용자 정보 조회를 요청했을때 아래와 같이 정상적으로 사용자 정보가 조회되는것을 확인할 수 있다.
더 다양한 사용자 정보를 얻기 위해서는 동의항목을 추가후, 사용자가 동의한 항목에 대한 정보를 취득할 수 있다.
이렇게 얻어진 사용자 정보를 이용하여 내부 로직에서 로그인 혹은 회원가입 처리를 하여 사용할 수 있다.
우선 인증 토큰을 얻고 난 이후에는 토큰을 기반으로 카카오에서 다양한 서드파티 API를 제공하고 있기때문에, 필요에 따라 사용하면 된다.
'Spring' 카테고리의 다른 글
| [Spring] Java 예외(Exception) 처리 전략 (1) | 2024.11.29 |
|---|---|
| [Spring] 스프링 부트(Spring Boot) - H2 DB 연동하여 사용하기(with.JPA) (0) | 2024.11.22 |
| [Spring] Junit 테스트시 Atomikos 커넥션풀의 Connection Name 중복 오류 (0) | 2024.07.08 |
| IntelliJ에서 Spring MVC 세팅하기 (0) | 2024.03.17 |
| [Spring] Spring Boot 3 마이그레이션 시작하기 (0) | 2023.12.13 |
