|Spring & OAuth2| 카카오 로그인/회원가입 Postman으로 테스트하기

이번주는 클론코딩 주차로 우리팀은 원티드의 커뮤니티를 클론코딩 하기로하였다 ⌨️

내가 맡은 기능은 카카오 로그인 😎 시작은 쉬웠으나 테스트부터 쉽지 않아져서 좌절하고 있는 와중에

천사 쏘영님의 덕분으로 무시무시한 에러에서 벗어나고 .. 다시는 똑같은 일을 겪지위해 하는 포스팅 .. 잊지마 .. ! 기억해 내 ..!

 

🙋🏻 도와줘 카카오 로그인 ! 

우선 나는 프론트와 연결 전, 눈에 보이는 카카오 로그인 버튼이 없는 상태에서의 카카오 로그인 시도 방식을 적어두려고한다.

버튼이 있으면 별로 어렵지않움 !.. 아마두 ,,

 

우선 사용한 소스코드는 아래와 같다.

1 | User Controller

@PostMapping("/loginKakao")
    public MsgResponseDto kakaoLogin(@RequestParam String code, HttpServletResponse response) throws JsonProcessingException {
        // code: 카카오 서버로부터 받은 인가 코드
        String createToken = userKakaoService.kakaoLogin(code, response);

        // Cookie 생성 및 직접 브라우저에 Set
        Cookie cookie = new Cookie(JwtUtil.AUTHORIZATION_HEADER, createToken.substring(7));
        cookie.setPath("/");
        response.addCookie(cookie);
        return new MsgResponseDto(SuccessCode.LOG_IN);
    }

 

2| User Service

@Service
@RequiredArgsConstructor
public class UserKakaoService {

    private final UserRepository userRepository;

    private final JwtUtil jwtUtil;

    private final PasswordEncoder passwordEncoder;

    private static int signUpType = 1;									// 일반 로그인 User, 카카오 로그인 User 식별용


    public String kakaoLogin(String code, HttpServletResponse response) throws JsonProcessingException {
//      1. "인가 코드"로 "액세스 토큰" 요청
        String accessToken = getToken(code);

//      2. 토큰으로 카카오 API 호출 : "액세스 토큰"으로 "카카오 사용자 정보" 가져오기
        LoginKakaoRequestDto kakaoUserInfo = getKakaoUserInfo(accessToken);
//        LoginKakaoRequestDto kakaoUserInfo = getKakaoUserInfo(code);

        // 3. 필요시에 회원가입
        User kakaoUser = registerKakaoUser(kakaoUserInfo);

        // 4. JWT 토큰 반환
        String createToken = jwtUtil.createToken(kakaoUser.getUserId(), kakaoUser.getRole());
        response.addHeader(JwtUtil.AUTHORIZATION_HEADER, createToken);

        return createToken;
    }

    // 1. "인가 코드"로 "액세스 토큰" 요청
    private String getToken(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", "내토큰");
        body.add("redirect_uri", "http://localhost:8080/api/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();
    }

    // 2. 토큰으로 카카오 API 호출 : "액세스 토큰"으로 "카카오 사용자 정보" 가져오기
    private LoginKakaoRequestDto getKakaoUserInfo(String accessToken) throws JsonProcessingException {
        String nickname = RandomStringUtils.random(15, true, true);                         // 닉네임 랜덤 생성
        // 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);
        String email = jsonNode.get("kakao_account")
                .get("email").asText();

        return new LoginKakaoRequestDto(email, nickname);
    }


    // 3. 필요시에 회원가입
    private User registerKakaoUser(LoginKakaoRequestDto kakaoUserInfo) {
        String nickname = RandomStringUtils.random(15, true, true);
        String kakaoId = kakaoUserInfo.getUserId();                                                         // DB 에 중복된 Kakao Id 가 있는지 확인
        User kakaoUser = userRepository.findByUserId(kakaoId)
                .orElse(null);
        if (kakaoUser != null) {                                                                            // 카카오 사용자 email 동일한 email 가진 회원이 있는지 확인
            User sameEmailUser = userRepository.findByUserId(kakaoUser.getUserId()).orElse(null);
            sameEmailUser.update(signUpType);
        } else{
            // 신규 회원가입
            // password: random UUID
            String password = UUID.randomUUID().toString();
            String encodedPassword = passwordEncoder.encode(password);

            // email: kakao email
            String email = kakaoUserInfo.getUserId();

            kakaoUser = new User(kakaoId, encodedPassword, nickname, signUpType, UserRoleEnum.USER);
        }
        userRepository.save(kakaoUser);

        return kakaoUser;
    }
}

 

3| OAuth2 카카오 로그인 연동 로직

 

1. Redirect_Uri

: 카카오 로그인 화면을 호출하고, 사용자 동의를 거쳐서 인가 코드 발급을 요청

# 인가코드 요청 Url
https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri=http://localhost:8080/api/user/loginKakao&response_type=code
👉 Rest_API_KEY: 디벨로퍼스에서 내 REST API키 삽입

# 프론트가 있을 경우login.html에 아래 내용을 넣어주면 됨
https://kauth.kakao.com/oauth/authorize?client_id=본인의 REST API키&redirect_uri=http://localhost:8080/api/user/loginKakao&response_type=code

👉  사용자가 [동의하고 계속하기] 선택 후 로그인 요청이 승인되면 토큰을 받기 위한 인가 코드를 전송해줌

 

 

2. 토큰 받기

: 인가 코드를 받은 뒤, 인가 코드로 액세스 토큰과 리프레시 토큰을 발급받는 API

 

👉  인가코드 + 토큰을 통해 카카오 로그인을 시도할 수 있어서 토큰 발급을 요청한다.

 

 

3.  사용자 정보 가져오기

👉 위에서 생성한 토큰을 가지고 사용자 정보를 읽어와서 로그인 하거나, 회원가입하는 로직을 만든다.

 

4| POSTMAN을 이용한 카카오 로그인 테스트하기 

1. 인가코드 발급하기 

👉 포스트맨 > Authorization > Type:OAuth2.0 > Configure New Token에 내가 필요한 내용들 넣기 > Get New Access Token  생성을 누르면

👉 요렇코롬 Complete 메세지가 뜨구

👉  여기서 Access Token을 복사하긔

 

나는 여기서 무지무지무지 오래걸렸는데 Client Authentication을 Body로 바꾸지 않았기 때문 .. 쏘영님 감사합니당 .. 🥺

 

2. 로그인 시도 / 토큰 생성

👉 Request Params 형식으로 위에서 복사한 Access Token을 Code에 넣어서 보내주면 로그인이 된답

👉 나의 경우는 위 아이디와 동일한 회원이 있을경우 SignUpType을 카카오 로그인으로 변경했다.

 

👉 그럼 로그인에 성공했다는 메세지가 뜨고, 원하는 Jwt Token을 얻을 수 있다!

 

3) POSTMAN으로 로그인 테스트 요청 시 코드 변경

👉 위와 같이 코드를 바꿔서 테스트 해야함! 포스트맨으로 하면 인가코드로 액세스 토큰을 요청하는 부분이 패스 되는 것 같움 (?)