카카오 소셜 로그인 구현

해당 글은 백엔드를 맡아 프론트에서 인가코드를 받아 jwt로 access token과 refresh token을 프론트로 넘겨주는 코드를 구현하였다.

 

먼저 아래 카카오 개발 사이트에 접속한다.

Kakao Developers

 

로그인후 내 애플리케이션을 선택한다.

 

 

애플리케이션을 추가한다.

 

본인 프로젝트 이름이나 하고싶은 이름으로 앱 이름을 정하여 생성한다.

앱 아이콘은 추가하면 Biz앱으로 등록이 가능하고

아이콘이 딱히 없어도 그림판으로 대충 적고 등록할 수 있다.

 

애플리케이션을 만들었다면 왼쪽 앱키를 선택하여 준다.

 

그럼 위 와같이 여러 키가 있는데 여기서 Rest API키를 사용한다.

 

동의 항목을 누르면 사용자에게 받을 데이터를 선택할 수 있다.

 

 

이메일의 경우 선택할 수 없다면 현재 Biz앱이 아니라서이다 

앱 아이콘을 등록하고 Biz 앱을 신청하면 이메일을 설정 할 수 있다.

 

 

appilcation파일을 아래와 같이 등록한다.

 

application.yml

  security:
    oauth2:
      client:
        registration:
          kakao:
            client-id: ${kakao_Rest_API_Key}
            scope:
              - account_email
              - profile_nickname
            authorization-grant-type: authorization_code
            redirect-uri: ${kakao_redirect_uri}
            client-name: Kakao
            client-authentication-method: client_secret_post

        provider:
          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id

 

 

 

아래는 Service 파일로 

인가코드를 받고 카카오에서 토큰을 받아오는 코드이다.

@Service
@RequiredArgsConstructor
public class KakaoService {

    @Value("${spring.security.oauth2.client.registration.kakao.client-id}")
    private String your_kakao_client_id;
    @Value("${spring.security.oauth2.client.registration.kakao.redirect-uri}")
    private String your_redirect_uri;



    public String getKakaoAccessToken(String code) {
        String accessToken = "";
        String refreshToken = "";
        String reqURL = "https://kauth.kakao.com/oauth/token";

        RestTemplate restTemplate = new RestTemplate();

        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
        params.add("grant_type", "authorization_code");
        params.add("client_id", your_kakao_client_id);
        params.add("redirect_uri", your_redirect_uri);
        params.add("code", code);

        System.out.println("your_kakao_client_id : ");
        System.out.println(your_kakao_client_id);

        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(params, headers);
        System.out.println("request : ");
        System.out.println(request);
        restTemplate.setRequestFactory(new HttpComponentsClientHttpRequestFactory());
        ResponseEntity<Map> response = restTemplate.postForEntity(reqURL, request, Map.class);

        if(response.getStatusCode() == HttpStatus.OK) {
            Map<String, Object> responseBody = response.getBody();
            accessToken = (String) responseBody.get("access_token");
            refreshToken = (String) responseBody.get("refresh_token");
        }

        return accessToken;
    }

    public Map<String, Object> getUserInfo(String accessToken) {
        String reqURL = "https://kapi.kakao.com/v2/user/me";

        RestTemplate restTemplate = new RestTemplate();

        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization", "Bearer " + accessToken);

        HttpEntity<String> entity = new HttpEntity<>(headers);
        ResponseEntity<Map> response = restTemplate.exchange(reqURL, HttpMethod.GET, entity, Map.class);

        return response.getBody();
    }
}

 

 

 

아래는 컨트롤러의 일부분으로 

프론트에서 받은 인가코드를 사용하여 회원 정보를 저장하고 jwt 토큰을 만들어 프론트로 반환하는 코드이다.

@GetMapping("/")
    public  ResponseEntity<Map<String, String>> kakaoLogin(@RequestParam String code) {
        String accessToken = kakaoService.getKakaoAccessToken(code);
        Map<String, Object> userInfo = kakaoService.getUserInfo(accessToken);
        // 사용자 정보 저장 또는 갱신
        userService.saveUserIfNotExists(userInfo);

        String kakaoId = String.valueOf(userInfo.get("id")); // Kakao 사용자 ID를 username으로 사용
        // JWT 토큰 생성
        String jwtAccessToken = jwtUtil.generateAccessToken(kakaoId);
        String jwtRefreshToken = jwtUtil.generateRefreshToken(kakaoId);

        Map<String, String> tokens = new HashMap<>();
        tokens.put("accessToken", jwtAccessToken);
        tokens.put("refreshToken", jwtRefreshToken);

        return ResponseEntity.ok(tokens);
    }

 

 

아래는 카카오로 부터 회원 정보를 받아서 회원 정보를 저장하는 코드이다.

@Service
@RequiredArgsConstructor
public class UserService {

    private final UserRepository userRepository;

    public User saveUserIfNotExists(Map<String, Object> userInfo) {
        String kakaoId = String.valueOf(userInfo.get("id"));
        String email = (String) ((Map<String, Object>) userInfo.get("kakao_account")).get("email");
        String name = (String) ((Map<String, Object>) userInfo.get("properties")).get("nickname");
        String profile_image = (String) ((Map<String, Object>) userInfo.get("properties")).get("profile_image");

        return userRepository.findByKakaoId(kakaoId).orElseGet(() -> {
            User newUser = new User();
            newUser.setKakaoId(kakaoId);
            newUser.setEmail(email);
            newUser.setName(name);
            newUser.setProfile_image(profile_image);
            return userRepository.save(newUser);
        });
    }
}

 

 

위처럼 하면 인가코드로 회원 정보를 받고 jwt 토큰을 반환할 수 있다.