🔥 #18 카카오 로그인 서비스 구현 2 - 자원서버 접근과 블로그서버와 통합하기

이전 게시물에서 카카오 서버로부터 액세스 토큰을 받았다. 즉, 자원서버에 접근할 수 있는 권한을 얻은 것이다.

액세스 토큰이 위처럼 응답되었는데, 이렇게 브라우저에 뿌려져 있는 json 데이터를 관리하기 힘들기 때문에 model을 하나 만들었다.

< OAuthToken >

import lombok.Data;

@Data
public class OAuthToken {
    private String access_token;
    private String token_type;
    private String refresh_token;
    private int expires_in;
    private String scope;
    private int refresh_token_expires_in;
}

---

액세스 토큰으로 카카오 자원 서버에 요청하기!
< UserController >

	.
	.
	.
    RestTemplate rt2 = new RestTemplate();

    // HttpHeader 객체 생성
    HttpHeaders headers2 = new HttpHeaders();
    headers2.add("Authorization", "Bearer " + oauthToken.getAccess_token());
    headers2.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); // key=value 형태의 데이터라는 것을 알려주는 부분

    // HttpHeader를 객체에 담기 -> 만든 이유 : 아래의 exchange 함수에 HttpEntity를 넣어야 해서..
    HttpEntity<MultiValueMap<String, String>> kakaoProfileRequest2 =
            new HttpEntity<>(headers2); // headers 값을 가지고 있는 Entity

    // 카카오에게 Http 요청하기 (POST 방식) -> response2라는 변수에 응답을 받음
    ResponseEntity<String> response2 = rt2.exchange(
            "https://kapi.kakao.com/v2/user/me",
            HttpMethod.POST,
            kakaoProfileRequest2,
            String.class
    );
    
   
    .
    .
    .
    return "액세스 토큰으로 회원정보 요청 : 회원정보 요청에 대한 응답 : " + response2.getBody();
        

jsonschema2pojo에서 위의 json 데이터를 자바 객체로 변경할 수 있다.

그리고 응답 받기!

	.
	.
	.
    // kakaoProfile에 응답 데이터 담기
    // json 데이터를 자바에서 처리하기 위해 자바 객체로 바꿔야 한다.
    // 객체(현재는 OAuthToken)에 담을 때 사용할 수 있는 라이브러리 : Gson, Json Simple, ObjectMapper
    ObjectMapper objectMapper2 = new ObjectMapper();

    KakaoProfile kakaoProfile = null;
    try {
        kakaoProfile = objectMapper2.readValue(response2.getBody(), KakaoProfile.class);
    } catch (JsonMappingException e) {
        e.printStackTrace();
    } catch (JsonProcessingException e) {
        e.printStackTrace();
    }

    // User 오브젝트 : id, username, password, email, role, createDate
    System.out.println("카카오 아이디(번호) : " + kakaoProfile.getId());
    System.out.println("카카오 이메일 : " + kakaoProfile.getKakao_account().getEmail());

//    return "카카오 인증 완료 : 코드값 : " + code;
//    return "카카오 토큰 요청 완료 : 토큰요청에 대한 응답 : " + response.getBody();
     return "액세스 토큰으로 회원정보 요청 : 회원정보 요청에 대한 응답 : " + response2.getBody();

성공 !!

---

이제 카카오로 로그인 한 유저 정보를 나의 프로젝트 User 객체로 정보를 구성해야 한다. (통합)

.
.
.
// User 오브젝트 : (id), username, password, email, (role), (createDate)
System.out.println("카카오 아이디(번호) : " + kakaoProfile.getId());
System.out.println("카카오 이메일 : " + kakaoProfile.getKakao_account().getEmail());

System.out.println("블로그서버 유저네임 : " + kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId());
System.out.println("블로그서버 이메일 : " + kakaoProfile.getKakao_account().getEmail());
UUID garbagePassword = UUID.randomUUID();
System.out.println("블로그서버 패스워드 : " + garbagePassword);
.
.
.

.
.
.
// User 오브젝트 : (id), username, password, email, (role), (createDate)
System.out.println("카카오 아이디(번호) : " + kakaoProfile.getId());
System.out.println("카카오 이메일 : " + kakaoProfile.getKakao_account().getEmail());

System.out.println("블로그서버 유저네임 : " + kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId());
System.out.println("블로그서버 이메일 : " + kakaoProfile.getKakao_account().getEmail());
UUID garbagePassword = UUID.randomUUID();
System.out.println("블로그서버 패스워드 : " + garbagePassword);

User user = User.builder()
        .username(kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId())
        .password(garbagePassword.toString())
        .email(kakaoProfile.getKakao_account().getEmail())
        .build();

userService.회원가입(user);

return "회원가입 완료";
.
.
.

여기서 추가로,
userService.회원가입(user) 전에 이미 가입이 되었는지 아닌지 체크 하는 기능을 추가할 것이다.

---

가입/비가입 체크

.
.
.
// User 오브젝트 : (id), username, password, email, (role), (createDate)
System.out.println("카카오 아이디(번호) : " + kakaoProfile.getId());
System.out.println("카카오 이메일 : " + kakaoProfile.getKakao_account().getEmail());

System.out.println("블로그서버 유저네임 : " + kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId());
System.out.println("블로그서버 이메일 : " + kakaoProfile.getKakao_account().getEmail());
UUID garbagePassword = UUID.randomUUID();
System.out.println("블로그서버 패스워드 : " + garbagePassword);

User user = User.builder()
        .username(kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId())
        .password(garbagePassword.toString())
        .email(kakaoProfile.getKakao_account().getEmail())
        .build();

.
.
.
// 가입자 혹은 비가입자 분기 (이미 회원인지 아닌지 체크)
User originUser = userService.회원찾기(kakaoUser.getUsername());

// 비가입자(null)이면, 회원가입 후 로그인 처리
if (originUser.getUsername() == null) {
        System.out.println("기존 회원이 아닙니다.");
        userService.회원가입(kakaoUser);
        
// 가입자이면 회원가입 없이 로그인 처리
Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(kakaoUser.getUsername(), kakaoUser.getPassword()));
SecurityContextHolder.getContext().setAuthentication(authentication);

return "redirect:/";

위처럼 코드를 구현하였는데.. 계속해서 오류가 났다.

그 이유는,
블로그서버 패스워드를 UUID로 만들었기 때문이다.

기존 회원이 아니라면 상관이 없겠지만 기존 회원이라면.. UUID로 만들면 중복되지 않는 어떤 특정 값을 만들어내게 되는데 이게 매번 로그인 마다 바뀌어 로그인 처리가 되지 않는 것이었다.
값이 매번 달라지니까 당연히 로그인이 안된다!!

따라서 카카오로 로그인하는 모든 블로그 서버 패스워드를 통일하기로 했다.
< application.yml >

yj:
  key: yj0118

key 앞에 스페이스 두 칸! key:와 yj0118 앞에 스페이스 한 칸!!

⭐(실제 프로젝트였다면 이 값은 정말 중요한 값이기 때문에 노출되면 안된다. 이 key가 노출되면 모든 OAuth 로그인이 노출되게 된다.)

이제, 이 key를 UserController에다가 주입한다.

< UserController >에 주입

@Value("${yj.key}")
private String yjKey;

< UserService >

	@Transactional(readOnly = true) // select만 하기 때문에 readonly
    public User 회원찾기(String username) {
        User user = userRepository.findByUsername(username).orElseGet(()->{ // .orElseGet : 회원을 찾았는데 없으면, 빈 객체 리턴
            return new User();
        });
        return user;
    }

< UserController > 최종

.
.
.
	@GetMapping("/auth/kakao/callback")
    public String kakaoCallback(String code) { // @ResponseBody : Data를 리턴해주는 컨트롤러 함수

        // 카카오 API 서버에게 POST 방식으로 key=value 데이터를 요청
        // 요청 방법 -> 여러가지 라이브러리  : HttpsURLConnection, Retrofit2(주로 안드로이드), OkHttp, RestTemplate
        RestTemplate rt = new RestTemplate();

        // HttpHeader 객체 생성
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); // key=value 형태의 데이터라는 것을 알려주는 부분

        // HttpBody 객체 생성
        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
        params.add("grant_type", "authorization_code");
        params.add("client_id", "d5526e3b2a4169a3d9f2b7a6f9a12cdf");
        params.add("redirect_uri", "http://localhost:8000/auth/kakao/callback");
        params.add("code", code);

        // HttpHeader와 HttpBody를 하나의 객체에 담기 -> 만든 이유 : 아래의 exchange 함수에 HttpEntity를 넣어야 해서..
        HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
                new HttpEntity<>(params, headers); // body 데이터와 headers 값을 가지고 있는 Entity

        // 카카오에게 Http 요청하기 (POST 방식) -> response라는 변수에 응답을 받음
        ResponseEntity<String> response = rt.exchange(
                "https://kauth.kakao.com/oauth/token",
                HttpMethod.POST,
                kakaoTokenRequest,
                String.class
        );

        // oauthToken에 응답 데이터 담기
        // json 데이터를 자바에서 처리하기 위해 자바 객체로 바꿔야 한다.
        // 객체(현재는 OAuthToken)에 담을 때 사용할 수 있는 라이브러리 : Gson, Json Simple, ObjectMapper
        ObjectMapper objectMapper = new ObjectMapper();

        OAuthToken oauthToken = null;
        try {
            oauthToken = objectMapper.readValue(response.getBody(), OAuthToken.class);
        } catch (JsonMappingException e) {
            e.printStackTrace();
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

        System.out.println("카카오 엑세스 토큰 : " + oauthToken.getAccess_token());

        // ------------------------------------------------------------------------------------

        RestTemplate rt2 = new RestTemplate();

        // HttpHeader 객체 생성
        HttpHeaders headers2 = new HttpHeaders();
        headers2.add("Authorization", "Bearer " + oauthToken.getAccess_token());
        headers2.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); // key=value 형태의 데이터라는 것을 알려주는 부분

        // HttpHeader를 객체에 담기 -> 만든 이유 : 아래의 exchange 함수에 HttpEntity를 넣어야 해서..
        HttpEntity<MultiValueMap<String, String>> kakaoProfileRequest2 =
                new HttpEntity<>(headers2); // headers 값을 가지고 있는 Entity

        // 카카오에게 Http 요청하기 (POST 방식) -> response2라는 변수에 응답을 받음
        ResponseEntity<String> response2 = rt2.exchange(
                "https://kapi.kakao.com/v2/user/me",
                HttpMethod.POST,
                kakaoProfileRequest2,
                String.class
        );

        // kakaoProfile에 응답 데이터 담기
        // json 데이터를 자바에서 처리하기 위해 자바 객체로 바꿔야 한다.
        // 객체(현재는 OAuthToken)에 담을 때 사용할 수 있는 라이브러리 : Gson, Json Simple, ObjectMapper
        ObjectMapper objectMapper2 = new ObjectMapper();

        KakaoProfile kakaoProfile = null;
        try {
            kakaoProfile = objectMapper2.readValue(response2.getBody(), KakaoProfile.class);
        } catch (JsonMappingException e) {
            e.printStackTrace();
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

        // User 오브젝트 : (id), username, password, email, (role), (createDate)
        System.out.println("카카오 아이디(번호) : " + kakaoProfile.getId());
        System.out.println("카카오 이메일 : " + kakaoProfile.getKakao_account().getEmail());

        System.out.println("블로그서버 유저네임 : " + kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId());
        System.out.println("블로그서버 이메일 : " + kakaoProfile.getKakao_account().getEmail());
        UUID garbagePassword = UUID.randomUUID();
        // UUID란 중복되지 않는 어떤 특정 값을 만들어내는 알고리즘
        System.out.println("블로그서버 패스워드 : " + yjKey);

        User kakaoUser = User.builder()
                .username(kakaoProfile.getKakao_account().getEmail() + "_" + kakaoProfile.getId())
                .password(yjKey)
                .email(kakaoProfile.getKakao_account().getEmail())
                .build();

        // 가입자 혹은 비가입자 분기 (이미 회원인지 아닌지 체크)
        User originUser = userService.회원찾기(kakaoUser.getUsername());

        // 비가입자(null)이면, 회원가입 후 로그인 처리
        if (originUser.getUsername() == null) {
            System.out.println("기존 회원이 아니기에 자동으로 회원가입을 진행합니다.");
            userService.회원가입(kakaoUser);
        }

        System.out.println("자동 로그인을 진행합니다.");

        // 가입자이면 회원가입 없이 로그인 처리
        Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(kakaoUser.getUsername(), yjKey));
        SecurityContextHolder.getContext().setAuthentication(authentication);

//        return "카카오 인증 완료 : 코드값 : " + code;
//        return "카카오 토큰 요청 완료 : 토큰요청에 대한 응답 : " + response.getBody();
//        return "액세스 토큰으로 회원정보 요청 : 회원정보 요청에 대한 응답 : " + response2.getBody();
//        return "회원가입 완료";
        return "redirect:/";
    }

첫 카카오 로그인에서는 회원가입까지 이루어져 DB에 잘 들어가지고,
그 이후에는 자동으로 로그인이 된다!

여기서 password는 yjkey가 암호화 되어 들어가 있는 것이다.

---

OAuth 로 로그인한 사용자가 회원정보 수정을 하게 된다면,
즉 비밀번호 수정을 하게 된다면
기존에 yjkey(yj0118)로 넣어놨던 비밀번호가 바뀌게 되어 다시 OAuth 로그인이 불가능해질 것이다.

❗ 카카오로 로그인한 사용자는 회원정보를 수정할 수 없도록 만들기!!

-> User 객체에 oauth 필드를 추가하여, 이 회원이 카카오로 로그인한 회원인지 일반 로그인으로 로그인을 한 회원인지 구분해야 한다.

이렇게 카카오로 로그인한 사용자에게는 oauth 변수에 "kakao" 라는 값을 준다.

그러면 이렇게 구분을 할 수 있게 된다!

회원수정폼에서, oauth 값이 비어있을 때만 비밀번호를 수정할 수 있게 한다.
즉, oauth 값이 비어있다는건 카카오 로그인이 아닌 일반 사용자라는 것!!

< UserService >

UserService에서도 url 로 공격 당할 것을 대비해 막아주는 코드를 구현한다!!

결과

- 카카오 로그인 사용자

어떤 정보도 변경할 수 없다.

- 일반 로그인 사용자

password와 email 변경이 가능하다!