Spring MVC 카카오 로그인 구현

목록
1. Spring MVC 일반 로그인 구현
2. Spring MVC 구글 로그인 구현
3. Spring MVC 카카오 로그인 구현
4. Spring MVC 네이버 로그인 구현

 

이번에는 카카오 로그인을 구현해보자 !

밑에 사이트에 들어가서 카카오 api 정보를 입력해주자.

Kakao Developers

 

1. 내 애플리케이션 클릭.

 

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

 

3. 아래 정보들을 입력해주자.

 

4. 입력해서 저장하면 키값들을 받을 수 있다.

 

 

5. 그다음 플랫폼 클릭해서 Web 플랫폼 등록 클릭.

 

6. 클릭 후 도메인을 입력해주고 저장.

 

7. 저장한 후 Redirect URI 등록하러 가기 클릭.

 

8. 활성화 설정에서 상태를 ON 해주자.

 

9. ON 해준 후 Redirect URI 등록 클릭.

 

10. 카카오 로그인 정보를 받을 주소로 설정. 나는 이렇게 설정해줬음.(intrip은 내 패키지 명)

http://localhost:8080/intrip/kakaologin

저장 후 동의 항목으로 들어와서 제공받을 개인정보들을 설정해주면 카카오 api 등록은 끝났다.

 

이제부터는 코드들로 확인해보도록 하자.

 

 

Controller 코드

   // 카카오 로그인
   @GetMapping("kakaologin")
   public String kakaoLogin(@RequestParam(value = "code", required = false) String code, HttpSession session) throws Exception {   
      String access_Token = memberService.getAccessToken(code);      
      MemberDTO userInfo = memberService.getUserInfo(access_Token);
      log.info("카카오 로그인 성공");
      log.info("kakao user : " + userInfo);
      
      session.setAttribute("user", userInfo);
			session.setAttribute("email", userInfo.getEmail());
			session.setAttribute("id", userInfo.getId());
			session.setAttribute("isLogIn", true);
      
      return "redirect:/mainpage/main";  // 로그인 완료후 이동할 페이지 주소
    }

 

Service 코드

  	// 카카오
	public String getAccessToken(String code);
	
	// 카카오
	public MemberDTO getUserInfo(String access_Token);

 

ServiceImpl 코드

  	// 카카오 로그인
	public String getAccessToken(String authorize_code) {
		String access_Token = "";
		String refresh_Token = "";
		String reqURL = "https://kauth.kakao.com/oauth/token";

		try {
			URL url = new URL(reqURL);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			conn.setRequestMethod("POST");
			conn.setDoOutput(true);

			BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
			StringBuilder sb = new StringBuilder();

			sb.append("grant_type=authorization_code");
			sb.append("&client_id=본인이 발급받은 client_id"); // 본인이 발급받은 key
			sb.append("&redirect_uri=본인이 설정한 redirect_uri "); // 본인이 설정한 주소
			sb.append("&code=" + authorize_code);

			bw.write(sb.toString());
			bw.flush();

			int responseCode = conn.getResponseCode();

			BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
			String line = "";
			String result = "";

			while ((line = br.readLine()) != null) {
				result += line;
			}
			JsonParser parser = new JsonParser();
			JsonElement element = parser.parse(result);

			access_Token = element.getAsJsonObject().get("access_token").getAsString();
			refresh_Token = element.getAsJsonObject().get("refresh_token").getAsString();

			br.close();
			bw.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return access_Token;
	}

	// 카카오 로그인
	public MemberDTO getUserInfo(String access_Token) {
		HashMap<String, Object> userInfo = new HashMap<String, Object>();
		String reqURL = "https://kapi.kakao.com/v2/user/me";

		try {
			URL url = new URL(reqURL);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			conn.setRequestMethod("GET");
			conn.setRequestProperty("Authorization", "Bearer " + access_Token);

			int responseCode = conn.getResponseCode();

			BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
			String line = "";
			String result = "";

			while ((line = br.readLine()) != null) {
				result += line;
			}

			JsonParser parser = new JsonParser();
			JsonElement element = parser.parse(result);

			// Gson 라이브러리에 포함된 클래스로 JSON파싱 객체 생성
			JsonObject properties = element.getAsJsonObject().get("properties").getAsJsonObject();
			JsonObject kakao_account = element.getAsJsonObject().get("kakao_account").getAsJsonObject();

			// 내가 받고싶은 정보들을 받기 위한 코드.
			// json형식으로 받기때문에 각각 id, nickname, email에 맞는 코드로 입력해서 받아야 한다.
			// 자세한 설명은 밑에 설명해둠.
			String id = element.getAsJsonObject().get("id").getAsString();
			String pwd = element.getAsJsonObject().get("id").getAsString();
			String name = properties.getAsJsonObject().get("nickname").getAsString();
			String nick_nm = properties.getAsJsonObject().get("nickname").getAsString();
			String email = kakao_account.getAsJsonObject().get("email").getAsString();

			// 내가 받고싶은 정보들 저장하는 코드
			userInfo.put("id", id);
			userInfo.put("pwd", pwd);
			userInfo.put("name", name);
			userInfo.put("nick_nm", nick_nm);
			userInfo.put("email", email);

		} catch (IOException e) {
			e.printStackTrace();
		}
		MemberDTO result = memberDAO.findkakao(userInfo);

		if (result == null) {
			memberDAO.kakaoinsert(userInfo);

			return memberDAO.findkakao(userInfo);
		} else {
			return result;
		}

 

JSON 형식 간단 예시

 

element.getAsJsonObject().get("id").getAsString();

id는 제일 최상위인 element로 받아야 하고

 

properties.getAsJsonObject().get("nickname").getAsString();

nickname은 kakao_account 밑에 profile에 있어서 profile로 받아야 된다.

 

kakao_account.getAsJsonObject().get("email").getAsString();

email은 kakao_account 밑에 있으므로 kakao_account로 받아야 됨.

 

pom.xml에 gson 라이브러리를 추가해주자.

		<dependency>  
			<groupId>com.google.code.gson</groupId>  
			<artifactId>gson</artifactId>  
			<version>2.8.7</version>
		</dependency>

 

DAO 코드

	// 카카오 로그인
	public MemberDTO findkakao(HashMap<String, Object> userInfo) {
		return sqlSession.selectOne("mapper.member.findKakao", userInfo);
	}

	// 카카오 로그인 정보 DB에 저장
	public void kakaoinsert(HashMap<String, Object> userInfo) {
		sqlSession.insert("mapper.member.kakaoInsert", userInfo);
	}

 

 

DTO 코드(지금까지 사용한 DTO코드랑 같음)

@Data
public class MemberDTO {	
	private String id;
	private String name;
	private String pwd;
	private String nick_nm;
	private String email;
	private Date join_Date;	
	private Date last_update;
	private String grade;
}

 

mapper.xml 코드

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="mapper.member"> 	
	<resultMap type="memberDTO" id="memberResult">
		<result property="id" column="id" />
		<result property="name" column="name" />
		<result property="pwd" column="pwd" />
		<result property="nick_nm" column="nick_nm" />
		<result property="email" column="email" />
		<result property="join_Date" column="join_Date" />
		<result property="last_update" column="last_update" />
		<result property="grade" column="grade" />
	</resultMap>	

	<!-- 카카오 정보 찾기 -->
	<select id="findKakao" parameterType="java.util.HashMap" resultType="memberDTO">
		<![CDATA[
			select * from P_MEMBER where name=#{nick_nm} and email=#{email}
		]]>	
	</select>

	<!-- 카카오 정보 저장 -->
	<insert id="kakaoInsert" parameterType="java.util.HashMap">
		<![CDATA[
			insert into P_MEMBER(id, pwd,  name, nick_nm, email )
			values(#{id}, #{pwd}, #{name}, #{nick_nm}, #{email})
		]]>
	</insert>

 

카카오 로그인 이미지를 넣고 싶은 JSP 코드 위치에 카카오 로그인 버튼 생성.

(나는 이미지를 카카오 로그인 홈페이지에 나와있는 이미지를 가져와 사용하였다)

<div id="buttonDiv"></div>
<a class="p-2" href="https://kauth.kakao.com/oauth/authorize?client_id=내가 입력받은 client_id&redirect_uri=내가 설정한 redirect_uri 입력&response_type=code">
<img src="../resources/images/login_phj/kakao_login_medium.png"></a>

 

지금까지 완성된 화면.

 

카카오 로그인 클릭 시 카카오 아이디 비밀번호를 입력할 수 있는 창이 뜬다!!

 

로그인 시 카카오톡으로 인증하기 전송화면이 나온다.

 

인증 완료하고 확인 버튼 누르면 로그인 성공 완료!!

 

카카오 로그인 정보 확인.

kakao user : MemberDTO(id=000, name=테스트, pwd=000, nick_nm=테스트, email=test@naver.com, join_Date=2022-07-16, last_update=null, grade=일반회원)