[spring] Spring Security + JWT로 로그인 구현하기(1) - 카카오 로그인 api로 로그인 기능 구현

카카오 애플리케이션 등록

 

카카오 로그인 api 를 사용하기 위해서는

카카오 개발자센터에 애플리케이션을 등록해야 한다.

 

https://developers.kakao.com/

Kakao Developers

 

아래 이미지의 순서에 맞게 애플리케이션을 등록한 후에,

Web 플랫폼 등록 및 Redirect URI 등록까지 한다.

 

Redirect URI는 로그인이 성공한 후에 이동할 주소로 등록하면 된다.

 

카카오 개발자센터 애플리케이션 등록 과정

 

Redirect URI까지 등록이 완료되었으면,

제품설정 > 동의항목에서 로그인 시 제공받을 항목을 선택한다.

 

동의항목 체크

 

---

 

프로세스

 

프로세스를 먼저 정리하면,

 

1. 사용자는 소셜 로그인 중 1개를 선택하여 로그인을 시도한다.

2. 로그인 성공 시, 소셜 api를 통해 사용자 정보를 받는다.

3. 받아온 사용자 정보를 기반으로 JWT 토큰을 생성한다.

4. 생성된 JWT 토큰을 클라이언트에 전달하고, 이후 JWT 토큰을 HTTP 요청 헤더에 포함한다.

5. 서버에서는 JWT 토큰을 검증하여 유효하면 올바른 응답을 반환한다.

 

 

로그인 화면

 

무료 부트스트랩 템플릿을 이용하여, 로그인 화면을 구현했다.

 

로그인 페이지

 

JavaScripts 코드

 

function clickedLoginBtn(provider){
    console.log(provider);
    if(provider == 'kakao'){
        location.href = 'https://kauth.kakao.com/oauth/authorize?client_id=your_key&redirect_uri=your_uri&response_type=code';
    }
}

 

Login with Kakao 버튼을 클릭하면 카카오 로그인 페이지로 이동하게 되고,

로그인 성공 시 동의항목에 대해 동의하라는 창이 나온다.

 

카카오 로그인 성공 시 동의항목 동의페이지 호출

 

LoginController.java

 

카카오 로그인 후 전달받은 인가 코드값을 통해 토큰 발급을 요청해야 한다.

카카오 로그인 후 최종적으로 jwt 토큰을 발급받아 리턴한다.

 

@Slf4j
@RestController
public class LoginController {
    @Autowired
    private LoginService loginService;

    private final long JWT_TOKEN_VALIDITY = 5 * 60 * 60;

    @ResponseBody
    @GetMapping("/api/auth/kakao")
    public String login(@RequestParam("code") String code, HttpServletResponse response) {
        String token = loginService.getKakaoToken(code);

        Cookie cookie = new Cookie("jwtToken", token);
        cookie.setHttpOnly(true);
        cookie.setSecure(true);
        cookie.setMaxAge((int) TimeUnit.MINUTES.toSeconds(JWT_TOKEN_VALIDITY));
        cookie.setPath("/");
        response.addCookie(cookie);

        return "/auth/success";
    }
}

 

LoginService.java

 

서비스에서는 전달 받은 인가 코드를 통해 토큰 발급을 요청하는 API를 호출해야 한다.

"200" 상태 코드가 넘어오면 정상이며, access_token을 리턴해준다.

 

@Slf4j
@Service
public class LoginService {
    @Autowired
    public UserMapper userMapper;

    @Autowired
    public JwtTokenProvider jwtTokenProvider;
    @Value("${kakao.clientId}")
    private String kClientId;
    @Value("${kakao.secretkey}")
    private  String kSecretKey;

    public String getKakaoToken(String code) throws HttpServerErrorException {
        KakaoToken token = new KakaoToken();

        String request_uri = "https://kauth.kakao.com/oauth/token";
        String redirect_uri = "http://localhost:8080/api/auth/kakao";

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);

        MultiValueMap<String, String> param = new LinkedMultiValueMap<>();
        param.add("grant_type", "authorization_code");
        param.add("client_id", kClientId);
        param.add("redirect_uri", redirect_uri);
        param.add("code", code);

        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(param, headers);

        RestTemplate rt = new RestTemplate();
        ResponseEntity<KakaoToken> res = rt.postForEntity(request_uri, request, KakaoToken.class);

        if(res.getStatusCodeValue() == 200){
            token = res.getBody();

            //user 정보 불러오기
            Users user = this.getUser(token.access_token);

            String id = user.getId().toString();
            String userName = user.kakao_account.profile.getNickname();

            //전달받은 사용자 정보를 기반으로 Token 생성
            String jwtToken = jwtTokenProvider.generateToken(id, userName);

            //TODO :: DB에 저장
            return jwtToken;
        }
        else return null;
    }
 
}

 

이제 리턴 받은 accessToken으로 사용자 정보를 조회하는 api를 호출해야 한다.

사용자 정보를 조회하기 전 카카오 개발자 센터의 내애플리케이션에서, 허용IP가 등록되어 있는지 확인해야 한다.

 

허용IP 주소가 등록되어 있지 않으면, 401 Error가 발생할 수 있다.

 

허용IP주소 설정

 

사용자 조회할 때 주의해야 할 점은, Bearer 옆에 띄어쓰기를 꼭 해야한다.

띄어쓰기 하지 않을 경우 오류가 발생할 수 있다!

 

public Users getUser(String token){
    String url = "https://kapi.kakao.com/v2/user/me";

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
    headers.set("Authorization", "Bearer " + token);

    HttpEntity<String> entity = new HttpEntity<>(headers);
    RestTemplate rt = new RestTemplate();

    ResponseEntity<Users> res = rt.exchange(url, HttpMethod.GET, entity, Users.class);
    if(res.getStatusCodeValue() == 200){
        Users user = res.getBody();
        return user;
    }
    else return null;
}

 

KakaoToken.java

 

@Getter
@Setter
public class KakaoToken {
    public String token_type;
    public String access_token;
    public int expires_in;
    public String refresh_token;
    public int refresh_token_expires_in;

}

 

Users.java

 

@Getter
@Setter
public class Users {
    public Long id;  // 사용자 고유 ID
    public KakaoAccount kakao_account;  // 사용자 카카오계정 정보

    @Getter
    @Setter
    public class KakaoAccount{
        public Profile profile;
        public Boolean profile_needs_agreement;  // 사용자 프로필 정보 제공 동의 여부
        public Boolean email_needs_agreement;  // 사용자 이메일 정보 제공 동의 여부
        public Boolean is_email_valid;  // 사용자 이메일이 인증되었는지 여부
        public Boolean is_email_verified;  // 사용자 이메일이 검증된 이메일인지 여부
        public String email;  // 사용자 이메일

        @Getter
        @Setter
        public class Profile {
            public String nickname;       // 사용자 닉네임
            public String profile_image;  // 사용자 프로필 이미지 URL
            public String thumbnail_image;  // 사용자 썸네일 이미지 URL
        }
    }
}

 

로그인이 완료되면,

쿠키에 저장된 토큰을 확인할 수 있다.

 

쿠키에 토큰 저장된 내용 확인

 

다음에는 로컬 스토리지에 토큰 저장 후 불러오는 로직을 구현하는 방법으로 로그인을 구현해야겠다.

 

 

 

 

 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

Kakao Developers