[스프링부트 블로그 만들기] 카카오 로그인 API 서비스 구현하기

🤍REST API) 카카오 로그인 API 서비스 환경설정

 

1. 카카오 개발자센터에 접속 후 로그인한다.

 

2. 애플리케이션을 추가하기

 

3. 아래와 같이 이름을 설정해서 추가해준다.

 

4. WEB 플랫폼 등록

 

5. 도메인 등록

 

6. 카카오 로그인 활성화

 

7. Redirect URI 설정

 

8. 동의 항목 설정

 

9. 이곳에서 카카오로그인 버튼 소스를 가져온다. (축약형, Middle)

 

10. 로그인 화면에 카카오 로그인 버튼을 추가한다.

<a href="#"><img height="38px"  src="/image/kakao_login_button.png"/></a>

 

11. 카카오 로그인 요청을 보내는 Request URI는 아래와 같이 만들면 된다.

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

REST_API_KEY는 애플리케이션 생성 후 발급되는 키를 넣어주고 REDIRECT_URI는 위에서 설정한 Redirect URI를 넣어주면 된다.

 

12. 버튼 추가 후 실행을 해보면 아래와 같은 화면이 나오고 

 

13. #으로 비워둔 <a>태그에 위 Request URI를 담은 다음 버튼을 클릭해보면 아래와 같이 카카오 로그인 화면이 나온다.

---

🤍REST API) 카카오 로그인 API 서비스 구현 완료

14. UserController에 카카오로그인 콜백 메서드를 추가한다.

@GetMapping("/auth/kakao/callback")
	public String kakaoCallback(String code) {
}

• 카카오 로그인을 완료하려면 인가 코드로 토큰 발급 요청을 해야 함.
• 인가 코드 받기만으로는 카카오로그인이 완료되지 않으며 토큰 받기까지 마쳐야 카카오 로그인을 정상적으로 완료할 수 있음.
• 필수 파라미터를 포함하여 POST로 요청하고 요청 성공 시 액세스 토큰, 리프레시 토큰과 토큰 정보를 포함한 JSON객체를 받음.
• 토큰 받기를 통해 발급받은 액세스 토큰은 사용자 정보 가져오기와 같은 카카오 로그인이 필요한 API를 호출할 때 사용함.
• 해당 사용자 정보를 받아 서비스 회원가입 및 로그인 등을 처리하게 됨.

15. 아래와 같은 코드는 비효율적이지만 좀더 명확하게 이해하기 위해 이렇게 작성.

16. 컨트롤러단 전체 코드

 

17. 이제 로그인한 사용자 정보를 가져오기 위해 위 코드를 그대로 복사해서 조금 수정해서 사용한다.

18. 로그인 후 JSON으로 반환되는 사용자 정보를 JSONPOJO 사이트에 접속해서 붙여넣기 한 다음

 

19. 아래와 같이 KakaoProfile 클래스를 생성한다.

@Data
public class KakaoProfile {

	private Long id;
	private String connected_at;
	private Properties properties;
	private KakaoAccount kakao_account;
	
	@Data
	public class Properties {

		private String nickname;
		public String profile_image;
		public String thumbnail_image;

}
	
	@Data
	public class KakaoAccount {

		private Boolean profile_nickname_needs_agreement;
		private Profile profile;
		private Boolean has_email;
		private Boolean email_needs_agreement;
		public Boolean is_email_valid;
		public Boolean is_email_verified;
		public String email;
		
		@Data
		class Profile {

			private String nickname;
			public String thumbnail_image_url;
			public String profile_image_url;
			
		}
	}
}

20. 다시 컨트롤러로 와서

• 카카오로그인을 한 사용자 정보가 기존 회원인지, 아닌지 조회 후
• 기존 회원이 아닐 경우 자동 회원 가입 처리되도록 코드를 작성한다.
• 기존 회원일 경우 자동 로그인 처리하고
• 로그인 후에는 / 주소로 리다이렉트 시킨다.

		// User 오브젝트 : username, password, email
		System.out.println("카카오 아이디(번호) : " + kakaoProfile.getId());
		System.out.println("카카오 이메일 : " + kakaoProfile.getKakao_account().getEmail());
		
		System.out.println("블로그서버 유저네임 : "+kakaoProfile.getKakao_account().getEmail()+"_"+kakaoProfile.getId());
		System.out.println("블로그서버 이메일 : "+kakaoProfile.getKakao_account().getEmail());
		// UUID란 -> 중복되지 않는 어떤 특정 값을 만들어내는 알고리즘
		System.out.println("블로그서버 패스워드 : "+cosKey);
		
		User kakaoUser = User.builder()
				.username(kakaoProfile.getKakao_account().getEmail()+"_"+kakaoProfile.getId())
				.password(cosKey)
				.email(kakaoProfile.getKakao_account().getEmail())
				.oauth("kakao")
				.build();
		
		// 가입자 혹은 비가입자 체크 해서 처리
		User originUser = userService.회원찾기(kakaoUser.getUsername());

		if(originUser.getUsername() == null) {
			System.out.println("기존 회원이 아니기에 자동 회원가입을 진행합니다");
			userService.회원가입(kakaoUser);
		}
		
		System.out.println("자동 로그인을 진행합니다.");
		// 로그인 처리
		Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(kakaoUser.getUsername(), cosKey));
		SecurityContextHolder.getContext().setAuthentication(authentication);
		
		return "redirect:/";​