TEAM Project (11.25) - 카카오 소셜 로그인 구현

카카오 소셜 로그인을 구현하기 위해

OAuth 2.0 방식으로 로그인을 구현
OAuth 2.0 은 소셜 로그인 방식에 주로 사용되는데 무료로 해당 API를 제공해주는 카카오 로그인 API를 선택

1. 애플리케이션 추가하기에서 앱 등록 (https://developers.kakao.com/console/app)

1. 애플리케이션이 생성되면 인증키 발급
2. 플랫폼 등록에서 Web 등록
3. 카카오 로그인을 사용할 url 입력 ( http://localhost:8081 등록)
   

   

우리 사이트에서 카카오 로그인 시 어떤 정보를 가져올지 선택하기 위해 동의항목을 들어가보니

우리는 전화번호, 이름 정보는 가져와야하는데, 위처럼 권한없음이라 뜸
위의 개인정보 동의항목 심사 신청해서 기다려야겠다.
(아이콘 등록 해야함)

 

--> 전화번호와 이름 정보는 사업자 등록을 해야 얻어올 수 있더라... 어쩔 수 없이 구현하는데에만 집중하고 전화번호는 비워두는걸로..

---

 

카카오 로그인 흐름

1. 사용자가 카카오 로그인 버튼을 클릭하면 카카오 로그인 페이지로 이동
2. 카카오 로그인 후 인증 코드(code) 반환받음
3. 인증 코드로 카카오 서버에 액세스 토큰 요청
4. 액세스 토큰으로 카카오 사용자 정보를 요청
5. 사용자 정보를 확인하여 기존 회원이면 로그인, 아니면 회원가입

@GetMapping("/auth/kakao/login")
public String redirectToKakaoLogin() {
    String kakaoLoginUrl = String.format(
            "https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=%s&redirect_uri=%s",
            kakaoClientId, kakaoRedirectUri
    );
    return "redirect:" + kakaoLoginUrl;
}

• 사용자가 로그인 버튼을 클릭했을 때 카카오 로그인 페이지로 리다이렉트한다.
• 카카오 서버로 이동하여 client_id(REST API 키)와 redirect_uri(콜백 URL)을 전달한다.

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

 

-> 카카오 서버에 GET 요청을 한 후, 사용자가 카카오 로그인을 하면 카카오 서버가 설정된 redirect_uri로 인증코드를 반환한다.

/*카카오 로그인 콜백 처리*/
    @GetMapping("/auth/kakao/callback")
    @ResponseBody
    public String handleKakaoCallback(@RequestParam String code, HttpServletRequest request) {

        // 세션 확인
        HttpSession session = request.getSession(false);
        if (session != null && session.getAttribute("member") != null) {
            // 이미 로그인된 상태라면 로그인 시도를 막음
            Member loggedInMember = (Member) session.getAttribute("member");
            return Ut.jsReplace(loggedInMember.getNickname() + "님 이미 로그인 중입니다!", "/usr/home/main");
        }

        // 세션 초기화 및 재생성
        if (session != null) {
            session.invalidate(); // 기존 세션 무효화
        }
        session = request.getSession(true); // 새로운 세션 생성

        // 기존 로직
        String accessToken = getAccessTokenFromKakao(code);

        if (accessToken == null) {
            return Ut.jsReplace("카카오 로그인 실패!", "/");
        }

        Member member = fetchKakaoUserInfo(accessToken);
        if (member == null) {
            return Ut.jsReplace("사용자 정보 처리 중 오류 발생!", "/");
        }

        if (member.isDelStatus()) {
            rq.logout();
            return Ut.rejoin("F-1", Ut.f("탈퇴한 회원입니다, 복구하시겠습니까?"), "/usr/member/doRejoin?id=" + member.getId(), "/usr/home/main");
        }

        // 로그인 성공: 세션에 사용자 정보 저장
        rq.login(member);
        session.setAttribute("member", member); // 새로운 세션에 사용자 정보 저장
        return Ut.jsReplace(member.getNickname() + "님 환영합니다!", "/usr/home/main");
    }

• 현재 로그인 상태인지 세션으로 확인하여, 이미 로그인된 경우 새로운 로그인을 막는다.
• 카카오로부터 인증 코드(code)를 받고 이를 처리하여 액세스 토큰과 사용자 정보를 가져온다.

private String getAccessTokenFromKakao(String code) {
    String tokenRequestUrl = "https://kauth.kakao.com/oauth/token";

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

    String requestBody = String.format(
            "grant_type=authorization_code&client_id=%s&redirect_uri=%s&code=%s",
            kakaoClientId, kakaoRedirectUri, code
    );

    HttpEntity<String> requestEntity = new HttpEntity<>(requestBody, headers);

    RestTemplate restTemplate = new RestTemplate();
    ResponseEntity<String> response = restTemplate.exchange(tokenRequestUrl, HttpMethod.POST, requestEntity, String.class);

    if (response.getStatusCode() == HttpStatus.OK) {
        return extractAccessToken(response.getBody());
    }
    return null;
}

 

카카오 서버에 인증코드(code)를 보내고 액세스 토큰을 받는다.

 

---

 

 

Redirect UR로 카카오 로그인에서 사용할 URI 를 설정 ( REST API로 개발하는 경우 필수로 설정해야한다.)