카카오 로그인 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. 다시 컨트롤러로 와서

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

application.yml

cos:
  key: cos****

UserController

@Value("${cos.key")
private String cosKey;

user.java

private String oauth; //kakao, google

updateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>
<div class="container">
<!-- 	<form action="/user/join" method="post"> 옛날 방식 사용 안함 -->
	<form>
		<input type="hidden" id="id" value="${principal.user.id}"/>
		<div class="form-group">
			<label for="username">Username</label>
			 <input type="text" value="${principal.user.username }" class="form-control" placeholder="Enter Username" id="username" readonly>
		</div>
		<c:if test="${empty principal.user.oauth }"> <!-- oauth 값이 비어있지 않을때만 비밀번호 변경가능 -->
		<div class="form-group">
			<label for="pwd">Password</label> 
			<input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		</c:if>
		<div class="form-group">
			<label for="email">Email</label> <input type="email" value="${principal.user.email }" class="form-control" placeholder="Enter Email" id="email" readonly>
		</div>
		
		
	</form>
		<button id="btn-update" class="btn btn-primary">회원수정완료</button>
</div>

<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

UserService

package com.cos.blog.service;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
// 스프링이 컴포넌트 스캔을 통해서 Bean에 등록을 해줌 . IOC를 해준다
import org.springframework.transaction.annotation.Transactional;

import com.cos.blog.model.RoleType;
import com.cos.blog.model.User;
import com.cos.blog.repository.UserRepository;
@Service
public class UserService {
	
	@Autowired
	private UserRepository userRepository;
	
	
	@Autowired
	private BCryptPasswordEncoder encoder;
	
	
	@Transactional
	public void 회원가입(User user) {
		String rawPassword = user.getPassword(); // 1234 원문
		String encPassword = encoder.encode(rawPassword); //해쉬
		user.setPassword(encPassword);
		user.setRole(RoleType.USER);
			userRepository.save(user);
	}
	@Transactional
	public void 회원수정(User user) {
		// 수정시에는 영속성 컨텍스트 User오브젝트를 영속화 시키고, 영속화된 User 오브젝트 수정
		// select를 해서 User오브젝트를DB로 부터 가져오는 이유는 영속화를 하기 위해서!!
		// 영속화된 오브젝트를 변경하면 자동으로DB에 update를 날려준다
		User persistance = userRepository.findById(user.getId()).orElseThrow(()->{
			return new IllegalArgumentException("회원 찾기 실패" );
		});
		
		// Validate 체크 => oauth 필드에 값이 없으면 수정 가능
		if(persistance.getOauth() == null || persistance.getOauth().equals("")){
			String rawPassword = user.getPassword();
			String encPassword = encoder.encode(rawPassword);
			persistance.setPassword(encPassword);
			persistance.setEmail(user.getEmail());
		}
		
		// 회원 수정 함수 종료시 = 서비스 종료 = 트랜잭션 종료 = commit이 자동으로 됩니다.
		// 영속화된 persistance객체의 변화가 감지되면 더티체킹이 되어 update문을 날려줌
	}
	@Transactional
	public User 회원찾기(String username) {
		User user = userRepository.findByUsername(username).orElseGet(()->{
			return new User();
		});
		return user;
	}
}
//	@Transactional(readOnly = true) // Select 할 때 트랜잭션 시작, 서비스 종료시에 트랜잭션 종료 (정합성)
//	public User 로그인(User user) {
//		return userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
//	}
	
//	@Transactional
//	public int 회원가입(User user) {
//		try {
//			userRepository.save(user);
//			return 1;
//		} catch (Exception e) {
//			e.printStackTrace();
//			System.out.println("UserService : 회원가입() : " + e.getMessage());
//		}
//		return -1;
//	}

		// 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:/";​

 

처음 Kakao API를 해봤다.. 정말 헷갈리고 고칠께 많아서 힘들었다. 

코드를 다 고쳤는지는 모르지만 한번 필요하시면 들고가서 해보셔요