Spring MVC Kakao소셜 로그인 방법과 과정

Spring MVC에서 Kakao 소셜 로그인 하는 과정부터 간단히 보면

1. html 단에서 location.href를 통해 카카오 로그인 인증 코드를 받을 수 있는 URL로 이동한다.
2. 코드를 받으면 미리 설정해 놓은 redirect_url로 돌아오는데 이때 Controller로 이 url을 잡는다.
3. 잡았을때 @RequestParam에서 code가 들어가있다 code를 저장한다.
4. code를 이용해 HttpRequest 를 만들어 kakao인증 페이지에 보낸다.
5. 만약 code가 인증에 성공했다면 접근할 수 있는 JWT 토큰을 부여받는다.
6. 다음 요청에 JWT토큰을 이용해 HttpRequest를 보낸다.
7. 토큰이 알맞으면 카카오 로그인을 한 user의 정보를 받는다.  

 

이제 순서대로 코드로 살펴보면 

 

html 단에서 location.href를 통해 카카오 로그인 인증 코드를 받을 수 있는 URL로 이동한다.

<button id="login-kakao-btn"
                class="w-100 btn btn-secondary btn-lg"
                onclick="location.href='https://kauth.kakao.com/oauth/authorize?client_id=카카오devloper에서 받은 RestApiKey&redirect_uri=서버 IP주소/user/kakao/callback&response_type=code'">
            카카오 로그인
</button>

 

 

코드를 받으면 미리 설정해 놓은 redirect_url로 돌아오는데 이때 Controller로 이 url을 잡는다.

잡았을때 @RequestParam에서 code가 들어가있다 code를 저장한다.

@GetMapping("/user/kakao/callback")
    public String kakaoLogin(@RequestParam String code, HttpServletRequest request) throws JsonProcessingException {
// authorizedCode: 카카오 서버로부터 받은 인가 코드
        log.info("Hello here!");
        memberService.kakaoLogin(code, request);
        return "redirect:/";
    }

 

 

 

code를 이용해 HttpRequest 를 만들어 kakao인증 페이지에 보낸다.

 private String getAccessToken(String code) throws JsonProcessingException {
// HTTP Header 생성
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

// HTTP Body 생성
        MultiValueMap<String, String> body = new LinkedMultiValueMap<>();
        body.add("grant_type", "authorization_code");
        body.add("client_id", "카카오developer에서 받은 restApiKey");
        body.add("redirect_uri", "http://서버IP/user/kakao/callback");
        body.add("code", code);

// HTTP 요청 보내기
        HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest = new HttpEntity<>(body, headers);
        RestTemplate rt = new RestTemplate();
        ResponseEntity<String> response = rt.exchange(
                "https://kauth.kakao.com/oauth/token",
                HttpMethod.POST,
                kakaoTokenRequest,
                String.class
        );

// HTTP 응답 (JSON) -> 액세스 토큰 파싱
        String responseBody = response.getBody();
        ObjectMapper objectMapper = new ObjectMapper();
        JsonNode jsonNode = objectMapper.readTree(responseBody);
        return jsonNode.get("access_token").asText();
    }

 

 

다음 요청에 JWT토큰을 이용해 HttpRequest를 보낸다.

토큰이 알맞으면 카카오 로그인을 한 user의 정보를 받는다.  

private KakaoUserInfoDto getKakaoUserInfo(String accessToken) throws JsonProcessingException {
// HTTP Header 생성
        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization", "Bearer " + accessToken);
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

// HTTP 요청 보내기
        HttpEntity<MultiValueMap<String, String>> kakaoUserInfoRequest = new HttpEntity<>(headers);
        RestTemplate rt = new RestTemplate();
        ResponseEntity<String> response = rt.exchange(
                "https://kapi.kakao.com/v2/user/me",
                HttpMethod.POST,
                kakaoUserInfoRequest,
                String.class
        );

        String responseBody = response.getBody();
        ObjectMapper objectMapper = new ObjectMapper();
        JsonNode jsonNode = objectMapper.readTree(responseBody);
        Long id = jsonNode.get("id").asLong();
        String nickname = jsonNode.get("properties")
                .get("nickname").asText();
        String email = jsonNode.get("kakao_account")
                .get("email").asText();

        return new KakaoUserInfoDto(id, nickname, email);
    }

 

이후 값을 받아서 강제 로그인 처리를 해주어 세션에 저장시키고 쿠키를 던져주면 된다! JWT토큰을 만들어서 보내줘도 되고 로그인 과정은 자유!