[Spring framework, mybatis] 제주 여행 플래너 Travelanner

깃헙 주소: purewater02/spring-final-prj: spring final project - jeju trip (github.com)

GitHub - purewater02/spring-final-prj: spring final project - jeju trip

 

Springframework와 mybatis를 배우고 만들어 본 첫번째 프로젝트입니다.

이 프로젝트를 진행할 당시 시간이 촉박하여 계획했던 대로 완성은 하지 못했습니다.

그래도 프로젝트를 진행하면서 제가 담당했던 부분을 서술하겠습니다.

로그인/회원가입, 플랜 상세보기의 지도 출력 부분의 백/프론트를 담당했습니다.

이 당시에는 REST API 개념 자체도 몰랐고 수업시간에도 전혀 다룬 적이 없어서 OAuth2 인증 방식 구현은 상당히 어려운 문제였다고 생각합니다.

결국에는 검색을 통하여 해결했고 덕분에 Http header, body 개념과 http 메서드에 대한 이해를 할 수 있었습니다.

DB 구조

1. 일반 이메일 회원가입

영역 작성시 하이라이트 되는 기능. 

회원가입 폼에서 각 영역별 규칙에 위배되면 주황색으로 경고와 경고내용 표시.

이메일은 Ajax를 통해 실시간으로 DB를 확인하여 중복이메일 검사.

이메일은 정규식을 통해 이메일 형식에 맞아야만 입력가능.

비밀번호도 정규식으로 영문,숫자 조합으로 8~10자로 제한.

체크박스 전체체크와 각자 체크 연동.

가입시 정보는 memberDTO로 받고 sqlSession을 통해 DB에 저장한다.

 

2. 일반 이메일 로그인

 

3. 카카오 로그인/로그아웃

카카오 REST API 를 이용하여 카카오 로그인/회원가입/로그아웃을 구현.

카카오로 처음 로그인할 시 자동으로 회원가입이 되게 함. 식별할 수 있도록 닉네임_카카오로 자동가입.

OAuth2 인증 방식을 이해함.

카카오컨트롤러만 특히 힘들었기 때문에 첨부.

package com.spring.project.user;


import java.util.UUID;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.ResponseEntity;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonMappingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.model.Member.MemberDAO;
import com.spring.model.Member.MemberDTO;
import com.spring.model.OAuth.KakaoProfile;
import com.spring.model.OAuth.OAuthToken;

@RestController
public class KakaoController {
	
	@Autowired
	private MemberDAO mDAO;	
	
	@Autowired
	private HttpSession session;
	
	@GetMapping("kakao_login_ok.do")
	public ModelAndView kakaoCallback(String code) { //Data를 리턴해주는 컨트롤러 메서드
		//POST방식으로 key=value 데이터를 요청 (카카오쪽으로)
		RestTemplate rt = new RestTemplate();
		
		//HttpHeader 객체 생성
		HttpHeaders headers = new HttpHeaders();
		headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
		
		//HttpBody 객체 생성	
		MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
		params.add("grant_type", "authorization_code");
		params.add("client_id", "b11fa6774e0285e50b5a9dfa4047b19f");
		params.add("redirect_uri", "http://localhost:8080/project/kakao_login_ok.do");
		params.add("code", code);
		
		//HttpHeader와 HttpBody를 하나의 오브젝트에 담기
		HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
				new HttpEntity<>(params, headers);
		
		//Http 요청하기 -Post방식으로- 또한 response 변수의 응답을 받음
 		ResponseEntity<String> response = rt.exchange(
				"https://kauth.kakao.com/oauth/token", 
				HttpMethod.POST, 
				kakaoTokenRequest, 
				String.class		
		);
 		
 		//JSON 데이터 객체에 담기 Gson, Json Simple, ObjectMapper 등의 라이브러리 있음.
 		ObjectMapper objectMapper = new ObjectMapper();
 		
 		OAuthToken oauthToken =null; 		
 		try {
			oauthToken = objectMapper.readValue(response.getBody(), OAuthToken.class);
		} catch (JsonMappingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (JsonProcessingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
 		
 		System.out.println("카카오 액세스 토큰: " + oauthToken.getAccess_token());
 		
 		//POST방식으로 key=value 데이터를 요청 (카카오쪽으로)
		RestTemplate rt2 = new RestTemplate();
		
		//HttpHeader 객체 생성
		HttpHeaders headers2 = new HttpHeaders();
		headers2.add("Authorization", "Bearer " + oauthToken.getAccess_token());
		headers2.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
		
		//HttpHeader와 HttpBody를 하나의 오브젝트에 담기
		HttpEntity<MultiValueMap<String, String>> kakaoProfileRequest2 =
				new HttpEntity<>(headers2);
		
		//Http 요청하기 -Post방식으로- 또한 response 변수의 응답을 받음
 		ResponseEntity<String> response2 = rt2.exchange(
				"https://kapi.kakao.com/v2/user/me", 
				HttpMethod.POST, 
				kakaoProfileRequest2, 
				String.class		
		);

 		//JSON 데이터 객체에 담기 Gson, Json Simple, ObjectMapper 등의 라이브러리 사용 가능.
 		ObjectMapper objectMapper2 = new ObjectMapper();
 		
 		KakaoProfile kakaoProfile =null; 		
 		try {
			kakaoProfile = objectMapper2.readValue(response2.getBody(), KakaoProfile.class);
		} catch (JsonMappingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (JsonProcessingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
 		
 		System.out.println(response2.getBody());
		
 		//MemberDTO: U_id, U_name, U_email, U_image 
 		System.out.println("kakao id: " + kakaoProfile.getId());
 		System.out.println("kakao email: " + kakaoProfile.getKakao_account().getEmail());
 		UUID tempPwd = UUID.randomUUID();
 		System.out.println("kakao tempPwd: " + tempPwd);
 		System.out.println("kakao nickname: " + kakaoProfile.getProperties().getNickname() + "_" +"카카오");
 		System.out.println("kakao thumnail: " + kakaoProfile.getProperties().getThumbnail_image());
 		
 		String kakao_U_id = kakaoProfile.getKakao_account().getEmail();
 		String kakao_U_email = kakaoProfile.getKakao_account().getEmail();
 		String kakao_U_name = kakaoProfile.getProperties().getNickname() + "_" +"카카오";
 		String kakao_U_image = kakaoProfile.getProperties().getThumbnail_image();
 		String temp_pwd = tempPwd.toString(); 		
 		
 		MemberDTO dto = new MemberDTO();
 		dto.setU_id(kakao_U_id);
 		dto.setU_email(kakao_U_email);
 		dto.setU_pwd(temp_pwd);
 		dto.setU_name(kakao_U_name);
 		dto.setU_img(kakao_U_image);
 		dto.setU_phone("추후 입력");
 		dto.setU_oauth("kakao");
 		
 		ModelAndView mav = new ModelAndView();
 		mav.setViewName("main");
 		mav.addObject("kdto", dto); 		
 		String rest_api_key = "b11fa6774e0285e50b5a9dfa4047b19f";
 		mav.addObject("api_key", rest_api_key);
 		
 		session.setAttribute("kdto", dto);
 		session.setAttribute("api_key", rest_api_key);
 		 		
 		// 가입자 여부 확인
 		if(mDAO.checkMember(kakao_U_id) == 1) { //이미 존재하는 ID
 			//회원가입하지 않고 로그인 실행
 			System.out.println("기존 회원 자동 로그인"); 			
 			return mav;
 			
 		}else { //없으면 회원가입 실행
 			mDAO.insertMember(dto);
 			System.out.println("신규 카카오 회원 가입 완료");
 			return mav;
 		}	
 		
	}
	
	@RequestMapping("logout.do")
	public ModelAndView kakaoLogout(ModelAndView mav) {
		session.invalidate();
		mav.setViewName("main");		
		return mav;
		
	}
}

카카오 문서도 보고 유튜브도 찾아서 보고 하면서 우리 프로젝트에 맞게 개조하여 구현해 냈습니다.

이 당시에는 HttpHeader, HttpBody에 대한 개념조차 없었고 JSON을 다루는 방법 또한 전혀 몰랐지만 시행착오를 거쳐 결국 만들어 내서 아주 뿌듯했습니다.

전 항상 새로운 기술을 배우는 데 진심이고 어떻게든 제 것으로 만들려고 노력했습니다.