2. SpringBoot에서 카카오 로그인 API 적용하기(DB 저장)

 

1편에 이어 2편에서는 본격적으로 토큰을 얻어와

사용자의 정보를 DB에 저장하려고 한다 !

 

---

🧐1편으로 이동

https://record1996.tistory.com/24

---

😇순서

3. Code로 token 얻어오기

이전글의 2.사용자에게 로그인 요청 후 사용자가 동의를 누른 후 url을 확인해보면 code를 반환하는 것을 확인 할 수 있다

이 code를 가지고 서버에 요청을 보낸 후 token값을 가져오는 작업이 필요하다

사용자에게 로그인 요청 후 url

 

3-1. getToken 메소드 생성

• KakaoService interface

@Service
public interface KakaoService {
	
	public String getToken(String code) throws Exception ;
		
}

 

• KakaoServiceImpl class

client_id에는 본인의 클라이언트 아이디 입력

redirect_uri부분에는 이전 글의 1-7에 입력한 redirect uri를 입력한다

@Service
public class KakaoServiceImpl implements KakaoService {

	@Override
	public String getToken(String code) throws Exception {
		String access_Token = "";
		
		//EndPoint URL = API가 서버에서 자원에 접근할 수 있도록 하는 URL
		final String requestUrl = "https://kauth.kakao.com/oauth/token";
		
		//토큰을 요청할 URL 객체 생성
		URL url = new URL(requestUrl);

		//HTTP 연결 설정
		HttpURLConnection con = (HttpURLConnection) url.openConnection();
		con.setRequestMethod("POST");
		con.setDoOutput(true);

		//서버로 요청 보내기
		BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(con.getOutputStream()));
		StringBuilder sb = new StringBuilder();
		sb.append("grant_type=authorization_code");
		sb.append("&client_id=클라이언트 아이디");
		sb.append("&redirect_uri=http://localhost/study/kakao");
		sb.append("&code=" + code);
		bw.write(sb.toString());
		bw.flush();

		//서버의 응답 데이터 가져옴
		BufferedReader br = new BufferedReader(new InputStreamReader(con.getInputStream()));
		String line = "";
		String result = "";
		
		//result에 토큰이 포함된 응답데이터를 한줄씩 저장
		while ((line = br.readLine()) != null) {
			result += line;
		}
		
		//JSON 데이터를 파싱하기 위한 JsonParser 
		JsonParser parser = new JsonParser();
		//값 추출을 위해 파싱한 데이터를 JsonElement로 변환
		JsonElement element = parser.parse(result);

		//element에서 access_token 값을 얻어옴
		access_Token = element.getAsJsonObject().get("access_token").getAsString();

		br.close();
		bw.close();

		return access_Token;

	}
}

 

3-2. 컨트롤러로 실행 후 test

콘솔창을 확인해보면 access_token이 발급 된 것을 확인 할 수 있다

@Controller
public class KakaoController {
	
	@Autowired
	private KakaoService kakaoService ;	
    
    @RequestMapping(value = "/kakao")
	public String kakaoLogin(@RequestParam("code") String code, HttpSession session) throws Exception {
		
		String access_token = kakaoService.getToken(code);//code로 토큰 받음
		System.out.println("access_token : " + access_token);
		
		
		return "";
	}
  }

 

4. 토큰으로 사용자 정보 불러오기

성공적으로 토큰을 발급 했다면 거의 끝났다

이제는 토큰을 이용해 정보를 가져와 원하는 방식으로 활용하면 된다 !

나는 사용자의 정보를 가지고 DB에 저장하고 view에 출력 해보려고 한다 

 

4-1.getUserInfo 메소드 만들기

token으로 원하는 사용자 정보를 가져오고 DB에 저장하는 메소드이다

• KakaoService interface

@Service
public interface KakaoService {
	
	public String getToken(String code) throws Exception ;
	public ArrayList<Object> getUserInfo(String access_token) throws Exception  ;
		
}

 

• KakaoServiceImpl class

test이기 때문에 비밀번호는 1234로 설정 해뒀다 ...

(프로젝트에서는 입력 폼을 만들어 사용자에게 비밀번호를 받았다!)

@Service
public class KakaoServiceImpl implements KakaoService {
	
	@Autowired
	KakaoRepository kakaoRepository;
	
    //getToken()생략...
	
	public ArrayList<Object> getUserInfo(String access_token) throws Exception {
		
		ArrayList<Object> list = new ArrayList<Object>();
		
		final String requestUrl = "https://kapi.kakao.com/v2/user/me";
		
		URL url = new URL(requestUrl);
		HttpURLConnection con = (HttpURLConnection) url.openConnection();
		con.setRequestMethod("GET");
		con.setRequestProperty("Authorization", "Bearer " + access_token);
		
		BufferedReader bf = new BufferedReader(new InputStreamReader(con.getInputStream()));
		String line = "";
		String result = "";
		
		while ((line = bf.readLine()) != null) {
            result +=line;
        }
		
		JsonParser parser = new JsonParser();
        JsonElement element = parser.parse(result);
        
        JsonObject properties = element.getAsJsonObject().get("properties").getAsJsonObject();
		JsonObject kakao_account = element.getAsJsonObject().get("kakao_account").getAsJsonObject();
	
        //콘솔창 확인 후 필요한 정보 추출
        System.out.println("----------properties"+properties);
        System.out.println("----------kakao_account"+kakao_account);
        
        String thumbnail_image = properties.getAsJsonObject().get("thumbnail_image").getAsString();
        String ninkname = properties.getAsJsonObject().get("nickname").getAsString();
        String email = kakao_account.getAsJsonObject().get("email").getAsString();
        String gender = kakao_account.getAsJsonObject().get("gender").getAsString();
        String birthday = kakao_account.getAsJsonObject().get("birthday").getAsString();
        
        list.add(thumbnail_image);
        list.add(ninkname);
        list.add(email);
        list.add(birthday);
        
        //DB 저장
        Kakaouser kakaouser = new Kakaouser(ninkname,"1234",ninkname,email,gender,birthday);
        kakaoRepository.save(kakaouser);
        
        return list;
	}
}

 

 

4-2. 컨트롤러에서 getUserInfo  호출 및 view로 정보 넘기기

• 컨트롤러에서 getUserInfo 호출

@Controller
public class KakaoController {
	
	@Autowired
	private KakaoService kakaoService ;
	
	//kakaoTerms() 생략....
	
	@RequestMapping(value = "/kakao")
	public String kakaoLogin(@RequestParam("code") String code,Model model ,HttpSession session) throws Exception {
		
		//code로 토큰 받음
		String access_token = kakaoService.getToken(code);
		
		//토큰으로 사용자 정보 담은 list 가져오기
		ArrayList<Object> list = kakaoService.getUserInfo(access_token);
		
		//list 모델에 담아 view로 넘김
		model.addAttribute("list", list);
	
		return "userInfo";
	}
	
	

}

 

• resources/templates/userInfo.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

   <table>
        <tr>
            <td>썸네일 :</td>
            <td><img th:src="${list[0]}"></td>
        </tr>
        <tr>
            <td>이름 :</td>
            <td th:text="${list[1]}"></td>
        </tr>
        <tr>
            <td>이메일 :</td>
            <td th:text="${list[2]}"></td>
        </tr>
        <tr>
            <td>생일 :</td>
            <td th:text="${list[3]}"></td>
        </tr>
    </table>
   
</body>
</html>

 

5. 실행

5-1. http://localhost/study 접속해서 카카오 로그인 클릭

5-2. 카카오 로그인 -> 선택 목록 선택 후 동의하고 계속하기

 

5-3. 카카오로 로그인한 사용자의 정보가 view에 출력 및 DB에 저장 된다 .