[구현] Spring에서 카카오톡 로그인

계획

클라이언트

카카오톡 로그인을 실행하여 서버에 카카오톡 서버에서 받은 access_token을 넘겨준다.

⬇

서버

클라이언트에게 받은 access_token으로 카카오톡 서버에서 해당 User 정보를 불러온다. 

필요한 정보와 함께 User를 생성해 DB에 저장한다.

우리 서비스에서 쓸 수 있는 JWT 토큰을 생성한다.

클라이언트에게 JWT 토큰을 넘겨준다.

⬇

클라이언트

헤더에 JWT 토큰을 넣어 request 함으로써 서버가 현재 User 정보를 알 수 있게끔 한다.

 

엑세스 토큰 받아오기

우리한텐 테스트용 엑세스 토큰이 필요하다.

지금 짤 코드는 실제 API로 노출되는 것이 아닌, 관리자용으로 사용할 테스트 코드이다.

Controller에 아래 코드를 추가해준다.

@PostMapping("/manager/auth/kakao")//...b
public ResponseEntity<ResponseTemplate> kakaologin(@RequestParam(name = "code") String controllerCode) { // ...c
    String accessToken = managerservice.getKakaoAccessToken(controllerCode);
    System.out.println(accessToken);
    System.out.println(managerservice.getUserInfo(accessToken));
    return ResponseTemplate.toResponseEntity(OK_SUCCESS);
}

우리는 저 b url로 저 메서드를 호출하면

카카오톡에서 주는 access token과 access token으로 직접 카카오 서버에서 받아온 사용자 정보를 System.out.println으로 로그창에 찍을 것이다.

어디까지나 임시 테스트용이고, 사용되지 않을 코드기 때문에 그냥 System.어쩌구로 찍었다.

실제로는 access token는 controller에서 받아오고, 우리는 그 access token으로 getUserInfo만 할 것이다.

 

위에서 사용한 ManagerService의 메소드이다.

이름은 상관 없이 Service 단에다가 두면 된다.

getKakaoAccessToken 메서드는 역시 그저 access token을 가져올 용도이기 때문이기에 임시 메서드이다.

getUserInfo는 나는 다른 소셜 로그인도 커버할 수 있도록 메서드를 새로 만들었기에 ManagerService에 두었는데,

이대로 사용할 사람은 다른 Service에 둬도 좋다.

//application.yml 같은 설정 파일에 변수를 설정해두었다.
@Value("${oauth2.kakao.rest-api}")
private String restAPIKey;

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

    try {
        //reqURL로 서버와 통신 시작 http 연결
        URL url = new URL(reqURL);
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();

        //POST로 통신할것이다. 그리고 서버로부터 응답을 받겠다.
        conn.setRequestMethod("POST");
        conn.setDoOutput(true);

        //통신할 url 만들기. bw를 통해 데이터를 conn에 body로 붙인다.
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
        StringBuilder sb = new StringBuilder();
        sb.append("grant_type=authorization_code");
        sb.append("&client_id=" + restAPIKey);
        sb.append("&redirect_uri=http://localhost:8080/manager/auth/kakao");
        sb.append("&code=" + controllerCode);
        bw.write(sb.toString());
        bw.flush();
        bw.close();

        //만들어진 conn으로 응답을 받아 Json 형태로 변경, 그 중 access_token값만 받아온다.
        JsonElement element = JsonParser.parseString(getConnectionResponse(conn.getInputStream()));
        accessToken = element.getAsJsonObject().get("access_token").getAsString();

    } catch (IOException e) {
        throw new CustomException(SERVER_ERROR_CONNECTION);
    }

    return accessToken;
}

public String getUserInfo(String accessToken) {

    String reqURL = "https://kapi.kakao.com/v2/user/me";
    String response;
    try {
        //accessToken을 헤더로 붙여서 통신
        URL url = new URL(reqURL);
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("POST");
        conn.setRequestProperty("Authorization", "Bearer " + accessToken);

        //회원 정보 그대로 출력
        JsonElement element = JsonParser.parseString(getConnectionResponse(conn.getInputStream()));
        response = element.getAsJsonObject().toString();
    } catch (IOException e) {
        throw new CustomException(FORBIDDEN_TOKEN_NOT_VALID);
    }

    return response;
}

//받아온 inputStream String으로 바꾸는 메서드
private String getConnectionResponse(InputStream inputStream) throws IOException{
    BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));
    String line;
    String result = "";

    while ((line = br.readLine()) != null) {
        result += line;
    }

    br.close();

    return result;
}

 

카카오톡 서버 연결

처음 애플리케이션을 생성하면 키가 함께 생성된다.

저 키들 중 REST API키를 사용한다. ... a

카카오 로그인 활성화 해주고 Redirect URI에 카카오 로그인 후 호출해야 하는 API URI를 추가해 준다

위의 ....b를 추가하면 됨

 

다음 아래 링크로 접속한다.

https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code 

REST_API_KEY는 위의 a이며 REDIRECT_URI는 위의 b이다.

 

+) 혹시 

Invalid character found in method name. HTTP method names must be tokens

에러가 발생한다면,

https 연결은 해놓지 않은 서버에서 REDIRECT_URI를 https로 잘못 적지 않았는지 확인하자.

 

접속하면 아래와 같은 화면이 나온다. 로그인 해주자

로그인 잘 끝내주면

이런 창이 뜬다. 사진에는 잘렸다만 위의 c에 해당하는 code가 뒤에 쿼리로 붙어있는 것을 확인할 수 있다.

 

IntelliJ 로그에 원하는 정보가 잘 뜨는 것을 볼 수 있다.

(데이터는 내가 id만 받아오도록 설정해서 저렇다. 필요하다면 추가할 수 있다.

id는 컨트롤러 단위로 중복이 없다고 한다. https://devtalk.kakao.com/t/client-id/123333

카카오 로그인에서 제공되는 회원번호는 client_id 별로 달라지나요?

그래서 전 DB에 user column으로 social_id를 추가해서 저장하곤 합니다.

 

진짜 카카오 로그인 API 만들기

아주 간단하게 만들도록 하겠다.

여기서부터는 각자의 상황에 따라 바꿔야 하는 부분이 많을 것 같다.

참고로 저는 보통 Social Type을 여러개 지원해야 되기 때문에 저렇게 코드를 짜지 않습니다.

통신 코드를 한 번만 짜고 소셜 타입을 enum으로 만들어서 마다 다르게 통신하도록 하는 방식도 있으니 시간 되시면 함 해보세여

 

여튼 아예 user id만 리턴하는 함수로 바꿨다.

public String getUserInfoId(String accessToken) {

    String reqURL = "https://kapi.kakao.com/v2/user/me";
    String response;
    try {
        //accessToken을 헤더로 붙여서 통신
        URL url = new URL(reqURL);
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("POST");
        conn.setRequestProperty("Authorization", "Bearer " + accessToken);

        JsonElement element = JsonParser.parseString(getConnectionResponse(conn.getInputStream()));
        response = element.getAsJsonObject().get("id").getAsString();
    } catch (IOException e) {
        throw new CustomException(FORBIDDEN_TOKEN_NOT_VALID);
    }

    return response;
}

@PostMapping //url은 필요한대로 바꾸기
public ResponseEntity socialLogin(@RequestHeader("Authorization") String token) {
    return ResponseDataTemplate.toResponseEntity(
            OK_SUCCESS,
            oAuthService.kakaoLogin(token)); //응답도 필요한대로 바꾸기
}

@Transactional
public LoginResponseDto kakaoLogin(String oAuthToken) {
    String socialId = getUserInfoId(oAuthToken);

	//해당 social id를 가진 회원 존재 여부
    User user = userRepository.findBySocialId(socialId)
    //없으면 새로운 유저 생성. 보통은 여기서 회원가입으로 넘어가라는 신호를 리턴하기도 함
            .orElse(new User(socialId));
    userRepository.save(user);

	//user jwt 토큰 생성해서 dto에 넣고 return;
    return new LoginResponseDto(jwtTokenProvider.createToken(user));
}