[Spring, Vue.js] [Spring, Vue.js] 카카오 간편 로그인 만들기③ - Spring으로 토큰 교환하기 (REST API)

 

 

 

[Spring, Vue.js] 카카오 간편 로그인 만들기② - Vue로 프론트엔드 작성하기 (REST API)

 

 

 

 

프론트엔드까지 작성했다.
이제 백엔드로 넘어와서 토큰 교환까지 만들어보자!

 

 

 

 

 

1. 화면

• 로그인 성공

 

• 메인화면 (닉네임 O)

 

 

 

 

 

---

 

 

 

 

 

2. 전체 코드

package 여러분걸로 넣으세요 &_&

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.*;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;

import java.util.LinkedHashMap;
import java.util.Map;

@RestController
@RequestMapping("/oauth")
@CrossOrigin(origins = "http://localhost:5173", allowCredentials = "true")
public class KakaoController {

    @Value("23558386d3608da96ec5a589aabe5a2b")
    private String clientId;

    @Value("${kakao.redirect-uri}")
    private String redirectUri;

    private final RestTemplate rest = new RestTemplate();


    @PostMapping("/kakao")
    public ResponseEntity<?> kakao(@RequestBody Map<String, String> body) {

        // 1) 토큰 교환
        String code = body.get("code");

        if (!StringUtils.hasText(code)) {
            return ResponseEntity.badRequest().body("code 누락");
        }

        try {
            HttpHeaders tokenHeaders = new HttpHeaders();
            tokenHeaders.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
            
            MultiValueMap<String, String> form = new LinkedMultiValueMap<>();
            form.add("grant_type", "authorization_code");
            form.add("client_id", clientId);
            form.add("redirect_uri", redirectUri);
            form.add("code", code);

            HttpEntity<MultiValueMap<String, String>> tokenReq = new HttpEntity<>(form, tokenHeaders);

            ResponseEntity<Map> tokenRes = rest.postForEntity(
                    "https://kauth.kakao.com/oauth/token", tokenReq, Map.class);

            if (!tokenRes.getStatusCode().is2xxSuccessful() || tokenRes.getBody() == null) {
                return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body("토큰 교환 실패");
            }

            String accessToken = (String) tokenRes.getBody().get("access_token");
            if (!StringUtils.hasText(accessToken)) {
                return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body("access_token 없음");
            }



            // 2) 사용자 정보 조회 (닉네임만 필요)
            HttpHeaders userHeaders = new HttpHeaders();

            userHeaders.setBearerAuth(accessToken);

            HttpEntity<Void> userReq = new HttpEntity<>(userHeaders);

            ResponseEntity<Map> userRes = rest.exchange(
                    "https://kapi.kakao.com/v2/user/me",
                    HttpMethod.GET,
                    userReq,
                    Map.class
            );

            if (!userRes.getStatusCode().is2xxSuccessful() || userRes.getBody() == null) {
                return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body("사용자 정보 요청 실패");
            }



            // 3) JSON(Map)에서 nickname만 꺼냄
            Map bodyMap = userRes.getBody();
            Map kakaoAccount = (Map) bodyMap.get("kakao_account");

            Map profile = kakaoAccount != null ? (Map) kakaoAccount.get("profile") : null;
            String nickname = profile != null ? (String) profile.get("nickname") : null;

            Map<String, Object> result = new HashMap<>();
            String safeNickname = (nickname != null) ? nickname : "KakaoUser";
            result.put("nickname", safeNickname);
            return ResponseEntity.ok(result);


         
        } catch (Exception ex) {
            ex.printStackTrace();
            return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body("카카오 연동 중 오류");
        }
    }
}

 

 

 

 

 

---

 

 

 

 

 

3. application.properties

kakao.client-id= 발급받은 REST API KEY 넣기
kakao.redirect-uri=http://localhost:5173/oauth/code/kakao

resources 디렉터리가 src 하위에 있을 것이다. resources 디렉터리 안에 application.properties가 있다. 거기에 코드를 적어주면 된다. 물론 REST API KEY와 redirect-uri는 각자 정해둔 걸로 변경해서 적어야 한다.

 

 

 

 

---

 

 

 

 

3. KakaoController.java 

// ①
@RestController

// ②
@RequestMapping("/oauth")

// ③
@CrossOrigin(origins = "http://localhost:5173", allowCredentials = "true")
public class KakaoController {


}

①
REST API는 웹에서 자원을 HTTP 규칙에 맞춰 주고받는 방식이다. URL로 자원을 가리키고, HTTP 메서드(GET, POST 등)로 무슨 동작인지 표현한다. 그리고 200 OK, 400 Bad Request와 같이 응답 코드를 사용한다. 아무튼 이런 규칙을 가지고 작성하는게 REST API라고 하며, @RestController는 REST API를 개발할 때 주로 사용한다. 

@RestController는 View가 아닌 객체를 반환해야하는 경우에 적합하다. return ResponseEntity.ok(result);이런 코드가 있다고 가정하면, 200 응답코드와 JSON 바디를 같이 보낸다. 이렇게 화면이 아닌 result라는 객체를 반환해야하는 경우 @RestController를 사용해야한다. (그냥 백엔드, 프론트엔드 나눠서 하는 거면 @RestController 쓴다고 보면 된다)

②
@RequestMapping은 공통 경로를 적어줬다. /oauth로 오는 요청은 KakaoController에서 처리한다고 정의한 것이다.

③
@Crossorigin은 http://localhost:5173에서 보내는 크로스 오리진 요청을 허용하게 한다. 그리고 allowCredentials 쿠키/인증정보를 함께 실어 보내도 되게 허용하라는 설정했다. 프론트(http://localhost:5173)와 백엔드(http://localhost:8080)의 오리진이 다르면, 브라우저가 CORS 규칙을 적용합니다.

이 코드를 정의하지 않으면, 화면에서 카카오 간편 로그인이 제대로 수행되지 않는다. 오리진이 달라서 KakaoController로 어떤 요청도 데이터도 오지 않기 때문이다. 이 다음 코드부터는 KakaoController에 적어준다.

 

 

    // ①
    @Value("${kakao.client-id}")
    private String clientId;

    // ②
    @Value("${kakao.redirect-uri}")
    private String redirectUri;

①
코드 내부에 시크릿 키를 저장할 경우 깃허브에 코드가 올라가면 안된다. 그럴 경우 application.properties에 보안이 필요한 값을 넣어두고 외부에 노출되지 않도록 할 수 있다. 그리고 application.properties에 보관된 값을 꺼내오는 어노테이션이 @Value가 된다.

②
동일하게 적어준다. 그러나 꼭 application.properties에 적어 현재 코드와 같이 받지 않아도 된다. @Value("발급받은 REST_API_KEY")로 적어도 된다.(근데 그렇게하면 @Value를 쓴 의미는 사라진다) 아니면 따로 넣어줘도 된다. 

 

 

    // ①
    private final RestTemplate rest = new RestTemplate();

①
RestTemplate는 스프링에서 외부 HTTP API를 호출할 때 쓰는 동기 방식의 간단한 클라이언트이다. 여기서 동기 방식이란, 작업을 마칠 때까지 다음 작업을 기다리는 순차적인 방식으로 대용량 처리를 해야하는 경우보다 데이터의 순차적인 처리가 필요한 경우 사용한다. 

카카오의 로그인 흐름을 보면 인가코드를 받고 -> 받을걸로 토큰 교환을 하고 -> 토큰으로 사용자 정보를 조회 하는 순서로 이뤄져 있다. 순차적인 데이터 처리도 필요하지만, 결국 토큰도 사용자 정보 조회도 외부 HTTP API인 카카오를 호출해야하기 때문에 RestTemplate가 복잡하게 작성될 코드를 간단하게 만들어준다.

거기다 첫번째 포스팅에서 토큰 교환할 때, application/x-www-form-urlencoded로 전송하고 JSON 응답을 받는다고 되어있다. 이렇게 전송, 응답하는 형태에 맞춰 변환해야하는데 그걸 한 줄로 깔끔하게 할 수 있다. 

여기서 중요한 점은 카카오 간편 로그인에 RestTemplate를 사용하면 간단하게 끝낼 수 있다는거지, 이게 가장 좋은 방법이라는 것은 아니다. RestTemplate를 공부하면 WebClient에 대해서도 자연스레 알게되는데, WebClient가 비동기 방식으로 이뤄져 대량으로 동시 호출이 들어와도 처리할 수 있어서 더 권장하는 추세이다. 지금 하고 있는 것은 간단한 프로젝트로 실제 유포할게 아니기 때문에 RestTemplate로 작성했다.

 

 

    // ①
    @PostMapping("/kakao")
    
    // ②
    public ResponseEntity<?> kakao(@RequestBody Map<String, String> body) {
    
    }

①
Vue에서 await axios.post("http://localhost:8080/oauth/kakao", { code }); 이 코드를 기억해야한다. 프론트에서 인가코드를 받아 백엔드로 보낸 코드이다. 이때 post로 보내서, 백엔드 시점에서 다시 PostMapping으로 받았다.

②
인가코드가 요청 바디로 도착했을 것이다. 도착한 형태는 JSON이다. JSON은 사람이 읽고 쓰기 쉬우면서 기계가 처리하기 쉬운 텍스트 기반의 데이터 교환 형식이다. 이렇게 온 body를 Map<String, String>으로 변환할 것이다. 변환은 어렵지 않다. @RequestBody를 붙여 바디를 찾아 읽도록 하며, 스프링이 알아서 요구 타입에 맞는 HttpMessageConverter를 불러 역직렬화 할 것이다.

그렇다면 왜 Map으로 바꾼걸까? 지금 이 프로젝트는 간단하게 카카오 간편 로그인을 수행하려고 한다. 그래서 프론트에서 오든, 카카오에서 보내오든 JSON을 키=값 형태로 변환해 빠르게 빼오기 위해 Map을 고른 것이다. 물론 그만큼 단점도 있다. 간단하게 만든 것만큼  안전성이 떨어진다. 그런게 싫다면 DTO를 만드는 걸 추천한다.

ResponseEntity는 Spring MVC에서 HTTP 요청에 대한 응답을 제어하는 데 사용하는 클래스로 Response Body, Header, Status Code를 포함할 수 있어, 세밀한 응답 관리를 가능하게 한다.

아래 코드는 kakao 메서드 안에 들어간다.

 

 

        // ①
        String code = body.get("code");
        
        // ②
        if (!StringUtils.hasText(code)) {
            return ResponseEntity.badRequest().body("code 누락");
        }

①
역직렬화한 body에서 인가코드(code)를 가져와 code에 넣는다.

②
StringUtils.hasText를 통해 code가 null/""/"  "은 아닌지, 실제 문자가 하나라도 들어가 있는지 검사한다. 만약 통과되지 않는다면, badRequest 응답코드와 함께 "code 누락"이라는 문자열을 프론트로 보낸다.

 

 

  // ①
  try {
  
  } catch(e) {
  
  }

①
앞 포스팅에서 설명했던 try-catch 구문이다. try에는 예외가 발생할 수 있는 상황을 나열하고, catch는 예외를 어떻게 처리할지 적는다. 이 다음부터 코드는 try 안에 들어갈 코드이다.

 

 

            // ①
            HttpHeaders tokenHeaders = new HttpHeaders();
            
            // ②
            tokenHeaders.setContentType(MediaType.APPLICATION_FORM_URLENCODED);

①
이제 본격적으로 토큰 교환을 할 차례가 왔다. 카카오에선 토큰을 교환하는 방법에 대해 적어놨다. Content-Type이 x-www-form-urlencoded이며, POST로 요청하도록 되어있다. 서버는 헤더를 보고 보내진 바디를 어떤 방식으로 파싱할지 결정한다. 그래서 헤더에 미리 폼방식이라고 적어줘야한다. 그래서 폼 형식임을 알리기 위해 tokenHeaders를 선언했다.

②
tokenHeaders에 Content-Type의 폼 형식에 맞춰 MediaType.APPLICATION_FORM_URLENCODED로 설정했다.

 

 

            // ①
            MultiValueMap<String, String> form = new LinkedMultiValueMap<>();

            // ②
            form.add("grant_type", "authorization_code");
            form.add("client_id", clientId);
            form.add("redirect_uri", redirectUri);
            form.add("code", code);

①
바디를 담을 그릇을 만들어야한다. form에 실제 바디 내용이 들어가게 된다. 그래서 이 바디를 어떻게 담을건지 정의했다. MultiValueMap은 자바에서 제공하는 것이 아닌 spring에서 제공하는 인터페이스이다. Map 인터페이스를 상속할 때, Value의 값을 List로 감싼 채 상속받는다. 또 하나의 key에 여러 값을 넣거나, 삽입 순서가 유지되는 특징을 가지고 있다. 

②
카카오가 요구한 것에 맞춰 form에 데이터를 추가했다. 아마 형태는 key=value&key=value.. 이런 식이 된다. 이렇게 토큰을 요청할 객체는 이제 만들어졌다.

 

 

           // ①
           HttpEntity<MultiValueMap<String, String>> tokenReq = new HttpEntity<>(form, tokenHeaders);

①
HttpEntity는 바디와 헤더 컨텐트 타입을 함께 보내기 때문에 현재 사용하고 있는 폼 형식에 맞춰 사용하기 아주 유용하다. 바디에는 키=값&키=값이 들어가고, 헤더 컨텐트 타입에는 폼형식이 들어간다.

 

 

           // ①
           ResponseEntity<Map> tokenRes = rest.postForEntity("https://kauth.kakao.com/oauth/token", tokenReq, Map.class);

①
("https://kauth.kakao.com/oauth/token", tokenReq, Map.class)를 보면 ("요청을 보낼 경로", 보낼 객체, 응답을 역직렬화할 타입)을 적어서 postForEntity로 POST 요청을 보냈다. postForEntity는 RestTemplate가 제공하는 편의메서드인데, 주로 상태/헤더/바디를 한꺼번에 받고 싶을 때 사용한다.

카카오의 응답 형태는 JSON이다. 그런데 이걸 Map으로 역직렬화할 것이다. 그래서 tokenRes 앞에 응답 타입을 Map으로 선언했다.

 

 

            // ①
            if (!tokenRes.getStatusCode().is2xxSuccessful() || tokenRes.getBody() == null) {
                return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body("토큰 교환 실패");
            }

            // ②
            String accessToken = (String) tokenRes.getBody().get("access_token");
            if (!StringUtils.hasText(accessToken)) {
                return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body("access_token 없음");
            }

①
tokenRes의 받아온 상태 코드가 성공적이지 않거나, 받아온 바디가 null인 경우 오류를 반환한다.

②
tokenRes의 바디에서 access_token에 들어있는 정보를 가져왔다. 그리고 이 accessToken의 문자열 유효성 검증이 False이면 오류를 반환한다.

 

 

 

 

 

---

 

 

다음은 백엔드로 사용자 정보 조회 부분을 적어보겠습니다.

만약 다 하고 나서도 안 되는 부분이 있다면 댓글을 남겨주세요.

제가 빼먹은 부분이 있을지도 몰라요,,, 헷 🐥

! 화이팅 !

 

---