[OAuth] 웹에서 카카오 소셜 로그인

OAuth 2.0을 사용하여 Google API에 액세스  |  Google ID 플랫폼  |  Google Developers

OAuth 2.0을 사용하여 Google API에 액세스  |  Google ID 플랫폼  |  Google Developers

전에 구글 로그인을 하면서 OAuth를 급하게 이해하느라 참고했던 페이지. 다시한번 참고용으로 언급

 

소셜 로그인 사용 이유

- 모든 웹 사이트에서 회원가입 과정을 거치는 것은 사용자, 운영자 모두에게 부담 -> OAuth를 사용하여 보안을 잘 해줄 수 있는 기업에 대한 소셜 로그인을 통해 해결 가능

 

OAuth란?

간단하게 표현하면 소셜 로그인을 구현할 수 있는 기술.

인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보나 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준.

사용자가 애플리케이션에 모든 권한을 넘기지 않고 사용자 대신 서비스를 이용할 수 있게 해주는 HTTP기반의 보안 프로토콜.

OAuth를 사용하는 대표적인 기업으로는 구글, 페이스북, 네이버, 카카오 등이 있음.

 

 

 

 

그림 출처: https://developers.google.com/identity/protocols/oauth2

 

위 구글 로그인의 흐름을 설명하는 그림을 살펴보면 전체적인 과정이 아래와 같다.

1. Application에서 Google Server로 토큰 요청

2. 사용자가 로그인과 동의 과정을 거치면 Google Server가 Application으로 인가 코드 전달

3. 인가 코드로 Google Server에 토큰 요청

4. Application으로 토큰 전달

5. 토큰으로 Google API 호출 -> 토큰의 유효성 확인 후 응답 전달

 

카카오 로그인도 위 흐름과 일치한다.

https://developers.kakao.com/console/app

카카오계정 로그인

위 사이트에서 애플리케이션을 추가한 후 플랫폼(Web 플랫폼)을 등록해준다. 그 다음 Redirect URI를 등록해주면 되는데 Redirect URI는 사용자가 카카오 로그인에 성공하면 어떤 URI로 응답을 보내줄지에 관한 URI이다. http://localhost:8080(사용할 도메인)/user/kakao/callBack 과 같이 Redirect URI로 사용하기를 원하는 주소로 입력해준 후 컨트롤러를 통해 구현해주면 된다.

 

Redirect URI까지 등록했다면 동의 항목을 설정해준다. 이 단계는 사용자가 카카오 로그인을 할 때 넘겨줄 정보에 대한 동의 화면을 설정하는 단계이다. 프로필, 이메일 등 필요한 정보에 대한 동의 설정을 해준다.

 

동의 항목 설정까지 완료했다면 앱 키에서 REST API키를 확인한 후 카카오 로그인 요청 URI를 다음과 같이 설정해준다.

https://auth.kakao.com/oauth/authorize?client_id={본인의 REST API키}&redirect_uri={본인이 설정한 redirect_uri 주소}&response_type=code

즉, 카카오 로그인을 시도할 때 위 URI로 연결해 주면 로그인을 할 수 있는 창으로 연결된다. 로그인이 성공적으로 완료되면 redirect_uri로 인가 코드가 전달된다.

 

인가 코드를 받는 controller 예시

@GetMapping("/user/kakao/callback")
public String kakaoLogin(String code) {
    // authorizedCode: 카카오 서버로부터 받은 인가 코드
    userService.kakaoLogin(code);

    return "redirect:/";
}

 

이 후로 인가 코드를 엑세스 토큰으로 교환한 후 엑세스 토큰을 사용하여(kakao api 호출 가능) user정보를 얻을 수 있다. HTTP 요청을 통해 얻은 user 정보로 서비스에 필요한 처리를 해주면 된다.

 

예시 코드)

UserService 클래스

@Service
public class UserService{

...

    public void kakaoLogin(String authorizedCode) {
        // 카카오 OAuth2 를 통해 카카오 사용자 정보 조회
        KakaoUserInfo userInfo = kakaoOAuth2.getUserInfo(authorizedCode);
        Long kakaoId = userInfo.getId();
        String nickname = userInfo.getNickname();
        String email = userInfo.getEmail();
        
        ...
        
    }
}

 

KakaoOAuth2 클래스

@Component
public class KakaoOAuth2 {
    public KakaoUserInfo getUserInfo(String authorizedCode) {
        // 1. 인가코드 -> 액세스 토큰
        String accessToken = getAccessToken(authorizedCode);
        // 2. 액세스 토큰 -> 카카오 사용자 정보
        KakaoUserInfo userInfo = getUserInfoByToken(accessToken);

        return userInfo;
    }

    private String getAccessToken(String authorizedCode) {
        // HttpHeader 오브젝트 생성
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

        // HttpBody 오브젝트 생성
        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
        params.add("grant_type", "authorization_code");
        params.add("client_id", "나의 client_id");
        params.add("redirect_uri", "내가 설정한 redirect_uri");
        params.add("code", authorizedCode);

        // HttpHeader와 HttpBody를 하나의 오브젝트에 담기
        RestTemplate rt = new RestTemplate();
        HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
                new HttpEntity<>(params, headers);

        // Http 요청하기 - Post방식으로 - 그리고 response 변수의 응답 받음.
        ResponseEntity<String> response = rt.exchange(
                "https://kauth.kakao.com/oauth/token",
                HttpMethod.POST,
                kakaoTokenRequest,
                String.class
        );

        // JSON -> 액세스 토큰 파싱
        String tokenJson = response.getBody();
        JSONObject rjson = new JSONObject(tokenJson);
        String accessToken = rjson.getString("access_token");

        return accessToken;
    }

    private KakaoUserInfo getUserInfoByToken(String accessToken) {
        // HttpHeader 오브젝트 생성
        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization", "Bearer " + accessToken);
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

        // HttpHeader와 HttpBody를 하나의 오브젝트에 담기
        RestTemplate rt = new RestTemplate();
        HttpEntity<MultiValueMap<String, String>> kakaoProfileRequest = new HttpEntity<>(headers);

        // Http 요청하기 - Post방식으로 - 그리고 response 변수의 응답 받음.
        ResponseEntity<String> response = rt.exchange(
                "https://kapi.kakao.com/v2/user/me",
                HttpMethod.POST,
                kakaoProfileRequest,
                String.class
        );

        JSONObject body = new JSONObject(response.getBody());
        Long id = body.getLong("id");
        String email = body.getJSONObject("kakao_account").getString("email");
        String nickname = body.getJSONObject("properties").getString("nickname");

        return new KakaoUserInfo(id, email, nickname);
    }
}

 

KakaoInfo 클래스

@AllArgsConstructor
@Getter
public class KakaoUserInfo {
    Long id;
    String email;
    String nickname;
}