[Rest Api] vue와 Spring boot를 이용한 카카오톡 로그인 api 구현 (4) - 응답 받은 토큰 값으로 사용자 정보 가져오기

3탄에서 응답으로 아래와 같은 토큰 값을 받았다. 

 

이번에는 이 토큰을 이용해서 로그인 한 사용자의 정보를 가져오는 것을 진행해 보려고 한다.

 

2탄에서 언급한 vue 의 getToken() 메서드를 통해 진행되는 것이며 여러 번 나눠서 포스팅했지만 사실은 이게 모두 한 개의 요청으로 이루어진다는 사실...  아직 이 메서드 진행이 끝나지 않았다... 

 

 

백앤드에서 받은 @GetMapping("/kakaologin/{code}") 중 '토큰을 요청하여 얻음' 까지 진행이 완료되었고 얻은 토큰으로 사용자 정보를 요청하려고 한다. 

// 코드를 빼와서 access token 을 얻어다 줄 것임

	@GetMapping("/kakaologin/{code}")
	public HashMap<String, String> kakaoLogin(@PathVariable("code") String code) {
		System.out.println(code);
        
		// 토큰을 요청하여 얻음
		String kakaoToken = loginService.requestToken(code);
		System.out.println("카카오토큰" + kakaoToken);
        
		// 사용자 정보를 요청하여 얻음
		HashMap<String, String> userInfo = loginService.requestUser(kakaoToken);
		System.out.println("userInfo : " + userInfo);

		//토큰을 아이디와 함께 저장할 것임 혹시 같은 아이디가 있다면 토큰 정보만 업데이트 할 것
		return userInfo;
	}

 

 

[사용자 정보 가져오기]

 

 

 

카카오디벨로퍼 확인하기 

 

카카오톡 문서를 살펴보면 이번에는 get/post 어느 것이든 상관 없고 인증방식으로 엑세스 토큰을 보내라고 나왔다. 

 

@Service 작성

 

service 페이지에서 로그로 유저정보 요청이 시작 되었는가 확인하고 토큰 값을 요청하는 것과 같이 request 보낼 주소를 작성한다. HashMap을 return type으로 받아 사용자 정보를 담아서 돌아갈 것이다. 

public HashMap<String, String> requestUser(String accessToken) {
		
		log.info("유저정보 요청 시작");
		String strUrl = "https://kapi.kakao.com/v2/user/me"; // request를 보낼 주소
		HashMap userInfo = new HashMap<>();
        
		userInfo.put("accessToken", accessToken);

 

헤더 확인  

 

 

나는 엑세스 토큰 방식으로만 요청을 보낼 것이기에 헤더에 값만 담아서 보내주면 된다. 

		try {
			URL url = new URL(strUrl);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection(); // url Http 연결 생성

			// POST 요청
			conn.setRequestMethod("POST");
			conn.setDoOutput(true);// outputStreamm으로 post 데이터를 넘김

			// 전송할 header 작성, 인자로 받은 access_token전송
			conn.setRequestProperty("Authorization", "Bearer " + accessToken);

 

reponseCode 확인

 

이렇게 reponseCode를 받아서 요청의 성공을 확인해보면 200이 잘 찍히는 것을 볼 수 있다. 

	// 실제 요청을 보내는 부분, 결과 코드가 200이라면 성공
			int responseCode = conn.getResponseCode();
			log.info("requestUser의 responsecode(200이면성공): {}", responseCode);

 

reponse 메세지 읽기

 

200이 성공적으로 이루어 졌다면 응답 메세지를 읽어오면 된다.  해당 로그에는 내가 1탄에서 설정한 동의 항목들과 카카오톡 id 가 들어 있을 것이다. 카카오톡 id는 카카오톡에서 부여하는 id 인 것 같다. 처음 보는 숫자이기 때문에~~ 

// 요청을 통해 얻은 JSON타입의 Response 메세지 읽어오기
			BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
			String line = "";
			String result = "";

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

			log.info("response body: {}", result);

 

Json 파싱

 

그러면 이제 이 response body를 Json 파싱해서 안의 값들을 빼주자.

Json 파싱을 할 때 가장 중요한 것은 어떤 형태로 생겼는지를 확인해 주는 것이다.  

 

로그를 자세하게 살펴보면 id는 응답 받은 json 배열 안에 있고 nickname 은 properties 안에, email은 profile 안에 있다.

물론 nickname  도 profile 안에 있지만 다양한 코드를 짜보려고 properties에 있는 nickname을 빼와 주었다. 

c.example.demo.kakaologin.LoginService 
 : response body: 
{"id":286232,"connected_at":"2023-06-28T14:46:42Z",
"properties":{"nickname":"해니"},
"kakao_account":{"profile_nickname_needs_agreement":false,
"profile":{"nickname":"해니"},
"has_email":true,
"email_needs_agreement":false,"is_email_valid":true,
"is_email_verified":true,"email":"카카오톡 이메일@naver.com"}}

 

id

아이디는 long 타입이라 long 으로 받아 올 까 했지만 이미 전에 만들어 놓았던 member 테이블의 아이디 값이 String이라서 String으로 변환하여 바꾸어 주었다. 

// Jackson으로 json 파싱할 것임
			ObjectMapper mapper = new ObjectMapper();

			// 결과 json을 HashMap 형태로 변환하여 resultMap에 담음

			HashMap<String, Object> resultMap = mapper.readValue(result, HashMap.class);
			String id =String.valueOf((Long) resultMap.get("id"));
			 
			System.out.println(id);

 

nickname & email

 

 

아까 살펴 보았던  json 결과를 보면  properties, profile의  key는 json Object 형태를 value로 가지고 있다.

따라서 아래의 코드 처럼 resultMap.get을 이용해서 해당 key를 뺀 후 그 키 값의 value를 뽑아 내주어야 한다. 

HashMap<String, Object> properties = (HashMap<String, Object>) resultMap.get("properties");
String nickname = (String) properties.get("nickname");

HashMap<String, Object> kakao_account = (HashMap<String, Object>) resultMap.get("kakao_account");
String email = (String) kakao_account.get("email");

 

값 추가

 

이제 뽑 아준 값들을 HashMap에 담아 주면 된다.

			userInfo.put("email", email);
			userInfo.put("id", id);
			userInfo.put("nickname", nickname);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return userInfo;
	}

 

받아온 정보 확인 

 

userInfo에 값을 담아 controller로 돌아온 그 값을 프린트해보면 이렇게 잘 나오는 것을 확인할 수 있다. 

이제 이렇게 받은 정보를 통해 프로젝트에 입맛대로 적용 시키면 된다~ 

userInfo : 
{nickname=해니, 
id=286702, 
accessToken=UoVHsQauvZ0j1teJfaxZV5utnOdVWMz_Oy7t1_F-Cj11GwAAAYkj4Ydc, 
email=카카오톡이메일@naver.com}