팀프로젝트 카카오 로그인 API 연동 에러 정리

🐞 카카오로그인 이미지 해상도 문제 🐞

팀 프로젝트에 카카오 로그인 API 연동을 하기로 하고 먼저 로그인 화면에 보여질 버튼 작업을 먼저 시작했다

<div>
<!-- 카카오 로그인 이미지 --> 
<img src="images/kakao_login.png" alt="카카오 로그인" class="btn w-100 py-3"> 
<div >

처음 이미지를 넣고 확인한 결과 버튼 이미지의 해상도가 심각하게 떨어져있었다

🔎 원인분석

현재 템플릿 페이지에서 수정중이기때문에 템플릿 페이지에 사용된 기존 부트스트랩 버튼 클래스와 내가 넣은 이미지가 같이 적용되서 이미지가 부트스트랩의 크기에 맞춰졌기때문에 테두리 깨짐, 이미지 늘어남,해상도 흐려짐의 문제가 발생했다

🛠️해결 방법

먼저 이미지를 큰사이즈로 바꾼다 이미지는 카카오 디벨로퍼 https://developers.kakao.com/tool/resource/login 에서 원하는 사이즈로 받을수 있다

로그인 페이지에서만 사용할거라 찾기 편하게 CSS파일을 따로 만들어주었다

/* 카카오 로그인 버튼 */

.kakao-img-btn{
  width:100%;
  height:55px;               /* 로그인버튼 py-3 와 거의 동일한 체감 높이 */
  object-fit:cover;           
  border-radius:12px;         /* 모서리 동일 */
  margin-top:15px;            /* 위 버튼과 간격 */
  cursor:pointer;
}

.kakao-img-btn:active{
  transform:scale(0.98);

로그인 JSP에 경로연결 후 버튼의 이미지를 큰사이즈로 바꿔주었다

<link rel="stylesheet" href="customResource/login.css">

<!-- 카카오 로그인 이미지-->
	<div class="col-12">
		<img src="images/kakao_login_large_wide.png" alt="카카오 로그인" 
            	class="kakao-img-btn w-100" onclick="kakaoLogin()">
      </div>

해상도 안깨지게 깨끗한 이미지가 완성되었다

---

🐞NullPointException : action is null🐞

카카오 로그인 api를 연동하고 실행시켰을 때 인가코드는 잘 받았는데 페이지 이동이 안되는 문제가 발생했다

🔎원인분석

지금 상태를 해석해보면 URL은 정상적으로 들어오는데 action is null 이라는 것은 FrontController / ActionFactory가 /KakaoSocialLoginAction.do라는 실행할 Action을 못 찾았다

그래서 action.execute() 호출하려다 NPE 발생 → 500에러를 띄운것이다

🛠️해결 방법

ActionFactory에 kakaoSocialLogin.do 가 제대로 매핑 되어있는지 확인한다

현재

this.map.put("/kakaoSocialLogin.do", KakaoSocialLoginAction());

변경후

this.map.put("/KakaoSocialLogin.do", new KakaoSocialLoginAction());

바뀐점

1. new를 안쓰고 객체생성함 -> 문법오류

2. 대소문자 오타 수정

---

🐞카카오에서 받은 로그인 정보를 kakaouserDTO에 담을때 담을 정보의 자료형이 달라서 생긴 오류🐞

카카오 소셜 로그인 액션을 수정하면서 만났던 에러로 우리 서비스에 카카오 로그인을 시도한 사람의 정보가 있는지 확인하기 위해서 아래 코드를 작성했다

if(!kakaouserDAO.insert(kakaoId)){ // DB에 등록되지 않았다면 회원가입
	system.out.println([로그] 신규 카카오 회원 -> DB 저장 완료);
    kakaouserDAO.insert(kakaouserDTO);
}else{//DB에 저장되있다면 로그인 진행
	system.out.println([로그] 기존회원 -> 로그인만 진행);
}

그런데 insert(kakaoId)에 빨간줄이 생겨서 에러사유를 파악하고자 한다

🔎원인분석

에러의 내용을 해석해보면 kakaouserDAO의 insert() 메서드는 KakaoUserDTO 를 받도록 설계되어 있는데
거기에 "String kakaoId" 만 넣어서 호출하고 있기 때문에 발생한 에러다

즉 DAO의 insert는 DTO가 필요한데 내가 DTO에서 kakaoId의 자료형을 String으로 만들었기 때문에 생긴 오류라고 할수있다

🛠️해결 방법

카카오 소셜로그인 액션에서 디비 저장 여부를 확인한기 위해서는  insert를 호출할때 String이 아닌 DTO를 넘기면 된다!

따라서 카카오 소셜 로그인액션에서 새로운 kakaoUserDTO를 만들어서 그 안에 kakaoId를 담아주면 해결된다

	//DB에 저장된 회원인지 체크
	KakaoUserDTO kakaoUserCheckDTO = new KakaoUserDTO();
	kakaoUserCheckDTO.setKakaoId(kakaoId);
	kakaoUserCheckDTO.setCondition("KAKAOLOGINCHECK");
	
    //체크후 값에 따라서 아래 코드를 실행함
	boolean isAccount = kakaouserDAO.insert(kakaoUserCheckDTO);
 	
    //DB에 등록이 안되있다면 -> 회원가입
	if(!isAccount) {
	System.out.println("[로그] 신규 카카오 회원 -> DB 저장");

	KakaoUserDTO kakaoUserInsertDTO = new KakaoUserDTO();
	kakaoUserInsertDTO.setKakaoId(kakaoId);
	kakaoUserInsertDTO.setNickname(nickname);
	kakaoUserInsertDTO.setEmail(email);
	kakaoUserInsertDTO.setProfileImage(profileImage);
	kakaoUserInsertDTO.setCondition("KAKAOLOGININSERT");
    //위의 정보를 DTO에 저장
	kakaouserDAO.insert(kakaoUserInsertDTO);
    
    //DB에 등록되있다면 로그인 진행
	}else{
		System.out.println("[로그] 기존회원 -> 로그인만 진행");
	}

🐞카카오 로그인 정보가 세션에 저장되지 않은 문제🐞

위의 문제를 해결 하고 실행을 시켰을때  찍힌 로그들이다 로그로 봤을 때는 로그인이 성공한것같았는데 막상 서비스를 실행해보니 로그인이 제대로 실행되지 않아 장바구니 기능을 사용할수 없는 모달창을 볼수있었다

🔎원인분석

현재 세션에 로그인 정보가 저장되 있지 않은 상태이다

현재  코드를 보면

HttpSession session = request.getSession();
session.setAttribute("userInfo", kakaouserDTO);

forward.setPath("main.jsp");
forward.setRedirect(false);

로그인 정보가 저장된 userInfo가 현재 우리 프로젝트의 로그인 세션 형태와 다르기때문이다 현재 우리 프로젝트는 accountPk가 있어야만 로그인이 성공한걸로 만들어져있다 그러나 현재 코드는 accountPk를 저장하고 있지 않기때문에 발생한 에러인것이다

🛠️해결방법

DB에 저장된 회원을 다시 하나만 콕 찝어서 accountPk를 가져오는 방식으로 해결하면 된다

//카카오 id 기반으로 Account 조회하기
AccountDAO accountDAO = new AccountDAO();
AccountDTO accountDTO = new AccountDTO();
//회원DTO에서 컨디션과 아이디 가져오기
accountDTO.setCondition("SELECT_ACCOUNT_PK_BY_ACCOUNT_ID");//DAO에서 사용할 컨디션
accountDTO.setAccountId("KAKAO_" + kakaoId);//ACCOUNT 테이블에 저장된 accountId 형식과 동일하게 맞춤
//DB에 해당하는 카카오 회원 정보 조회
AccountDTO accountData = accountDAO.selectOne(accountDTO);
System.out.println("[로그] kakao 로그인 정보 조회 완료 : " + accountDTO);
			
//로그인 유저 정보를 세션에 저장하기(로그인 유지)
HttpSession session = request.getSession();
//회원PK 가져와서 세션에 로그인정보저장
session.setAttribute("accountPk",accountData.getAccountPk());
System.out.println("[로그] kakao 로그인 정보 저장 완료 : " + accountData.getAccountPk());
			
//로그인 완료후 페이지 이동
request.setAttribute("message", "환영합니다, " +  nickname + "님");
request.setAttribute("location", "mainPage.do"); //메시지 확인 후 이동할 페이지
			
forward.setPath("message.jsp"); // 로그인 성공 후 가는 곳
forward.setRedirect(false);//포워드방식으로 보냄
return forward;

그러면 이렇게 잘 실행된 모습을 볼수 있다