[Spring] API 서버에서 카카오 로그인 구현 (1/2) : 인가 코드 받기

 

들어 가기 전

 

코드가 이해가 되지 않는다면 전체 코드는 GitHub 에 있으니 참고하시면 됩니다!

Web으로 개발을 해볼 것이며 간단한 React 코드와 Spring으로 진행하였습니다.

 

 

 

 

카카오 로그인 과정 이해하기

 

뻔하지만 카카오 로그인 인증 흐름을 설명하려고 합니다.

 

1. 사용자가 카카오 로그인 버튼을 누릅니다.
2. 사용자는 카카오 로그인 정보를 입력합니다.
3. 사용자는 사용자 약관 동의를 설정하고 로그인 요청을 합니다.
4. 애플리케이션 서버에서 사용자 토큰을 가져옵니다.
5. 가져온 토큰으로 카카오에게 사용자 정보를 조회해 옵니다.
6. 로그인을 성공합니다.

 

[그림1] 카카오 로그인 이해하기

 

 

 

 

기능 개발에 앞서서 카카오 디벨로퍼에서 값 세팅하기

 

1. 플랫폼 등록하기

[내 어플리케이션] → [앱설정] → [플랫폼] 으로 진입합니다.

Web으로 진행할 것이기 때문에 사이트 도메인을 입력해주시면 됩니다.

 

Front 서버, API 서버를 나눠서 진행할 것이라면 Front서버의 도메인을 입력해주세요.

나는 Spring, Express.js 등에서 타임리프, ejs 를 사용하려면 API 서버의 도메인을 입력해주세요.

# Front 서버, API 서버가 분리 되어있을 시 
http://localhost:3000
http://[내 로컬IP]:[Front 서버 어플리케이션 기동 포트]


# Spring, Express.js 1개로만 진행할 시
http://localhost:8080
http://[내 로컬IP]:[Back 서버 어플리케이션 기동 포트]

[그림2] 플랫폼 등록하기

 

2. 카카오 로그인 활성화

[내 어플리케이션] → [제품 설정] → [카카오 로그인] 으로 진입합니다.

카카오 로그인을 사용할 수 있도록 ON으로 변경해 줍니다.

 

[그림3] 카카오 활성화 설정

 

3. Redirect URI 설정하기

[내 어플리케이션] → [제품 설정] → [카카오 로그인] → [Redirect URI] 으로 진입합니다.

2번 설정한 페이지랑 동일합니다.

 

• 이 설정한 URI로 로그인 요청한 인가코드와 토큰을 받을 것 입니다.
• REST API를 사용하려면 Redirect URI을 반드시 등록해야합니다.
• 어플리케이션 합쳐서 최대 10개만 등록할 수 있습니다.
• HTTP와 HTTPS 프로토콜을 구분하므로 개발서버와 운영서버, 로컬서버를 구분해야 할 것입니다.

[그림4] Redirect URI 설정

 

4. 동의 항목 설정하기

[내 애플리케이션] → [제품 설정] → [카카오 로그인] → [동의 항목] 으로 진입합니다.

 

[그림5] 동의 항목 설정

설정으로 상세 동의 설정도 할 수 있습니다.

• 필수 동의
• 선택 동의
• 이용 중 동의
• 사용 안함

[그림6] 약관 동의 상세 설정

 

 

 

 

카카오 로그인  프론트 로그인 개발

 

간단한 React로 진행하겠습니다.

카카오 로그인 버튼은 카카오 디벨로퍼에서 이미지 다운로드해와서 서버에 넣었습니다.

여러분은 css가 없기때문에 이쁘지 않을 수 있습니다.

 

• [내 IP] 에 있는 것을 localhost나 여러분의 로컬 IP를 넣어주시면 됩니다.
• 저는 /api/oauth/kakao/authorize 엔드포인트로 보낼 것입니다.
• 인가 코드를 받기 위해 요청하는 URL을 받아오는 엔드포인트 라고 보시면 됩니다.

App.jsx

import React from 'react';
import './App.css';

const handleKakaoLogin = async () => {
  try {
    const response = await fetch("http://[내 IP]:8080/api/oauth/kakao/authorize", {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const redirectUrl = await response.text();
    window.location.href = redirectUrl; // 받은 URL로 이동

  } catch (error) {
    console.error("카카오 로그인 오류:", error);
  }
};

function App() {
  return (
    <div className="login-container">
      <h2>로그인</h2>
      <div className="social-buttons">
        <button button onClick={handleKakaoLogin} style={{ border: "none", background: "none", padding: 0 }}>
          <img src="/image/kakao_login_bar.png" alt="Kakao Login" style={{ width: '100%', height: '100%' }} />
        </button>
      </div>
    </div>
  );
}

export default App;

 

[그림7] 프론틍레 카카오 로그인 버튼 생성

 

 

Tip) 동의 화면 나오고 동의하면 API호출하여 아래와 같은 응답 값을 받게 될 것입니다.

 

응답 값

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

 

 

 

 

Spring 서버에서 인가코드 요청 URL 내려주기

 

OauthController.java

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/oauth")
public class OauthController {

    private final KakaoService kakaoService;

    /**
     * 카카오 로그인 하기전 인증 URL 요청
     * @return
     */
    @GetMapping("/kakao/authorize")
    public String kakaoLoginRequest() {
        return kakaoService.getAuthUrl();
    }
}

 

KakaoService.java

• application.yml에 값을 넣어서 가져왔습니다.
• kakao.auth.url : https://kauth.kakao.com/oauth/authorize
• kakao.auth.client.id : 카카오 디벨로퍼의 REST API 앱키
• kakao.redirect.url : 이전 설정 3번에서 Redirect URI의 값 

@Service
@RequiredArgsConstructor
public class KakaoService {

    @Value("${kakao.auth.url}")
    private String KAKAO_URL;

    @Value("${kakao.auth.client.id}")
    private String KAKAO_CLIENT_ID;

    @Value("${kakao.redirect.url}")
    private String KAKAO_REDIRECT_URL;

    /**
     * 카카오 로그인 하기전 인증 URL 요청
     * @return
     */
    public String getAuthUrl(){
        return UriComponentsBuilder.fromHttpUrl(KAKAO_URL)
                .queryParam("client_id", KAKAO_CLIENT_ID)
                .queryParam("redirect_uri", KAKAO_REDIRECT_URL)
                .queryParam("response_type", "code")
                .build()
                .toUriString();
    }
}

 

그럼 이제 프론트 에게 API 응답을 했을 것이고 바로 location.href로 요청을 할 것입니다.

 

 

 

 

Redirect URI로 된 곳으로 인가 코드 받기

 

OauthController에서 인가 코드 받는 엔드포인트를 만들어 봅시다!

이제 Redirect 되면서 인가 코드를 받을 것입니다.

OauthController.java

@Slf4j
@RestController
@RequiredArgsConstructor
@RequestMapping("/api/oauth")
public class OauthController {

    private final KakaoService kakaoService;

    /**
     * 카카오 로그인 하기전 인증 URL 요청
     * @return
     */
    @GetMapping("/kakao/authorize")
    public String kakaoLoginRequest() {
        log.info("KaKao Login =====>> 로그인 시도");
        return kakaoService.getAuthUrl();
    }

    /**
     * 카카오 로그인 콜백
     * @param code
     * @return
     */
    @GetMapp
    @GetMapping("/kakao/redirect")
    public String kakaoLoginRedirect(@RequestParam String code) {
        log.info("코드 : {}", code);
        return "test"
    }
}

 

아래와 같이 로그인 시도를 하여 URL을 응답하였고

Redirect 되어서 인증 코드를 받은 것을 확인 하였습니다.

 

[그림8] 인가코드 받기

 

응답도 잘 된 것으로 확인 되었고 이제 카카오 로그인한 (Redirect URI)에 사용자 정보를 조회해 와서

토큰으로 만들고 로그인 요청한 사용자에게 JWT를 내려주면 될 것 같습니다.

[그림9] 등록된 Redirect URI 이동 완료

 

 

 

 

개발자 관점 로그인 과정 및 지금까지 해온 과정

 

맨 처음에는 사용자 관점에서 플로우를 이미지로 보았습니다.

지금은! 개발자관점에서 보는 이미지입니다.

 

딱! 보면 인증 요청을 하는데 로그인하고 약관 동의를하면 인가코드를 받는 플로우를 볼 수 있습니다.

실제로는 로그인하고 동의 하고 KAKAO에 인증 요청을 보낸거 같은데 ㅡㅡ

[그림10] 개발자 관점 로그인 과정

 

 

 

 

마무리

 

다음은 토큰을 받아서 사용자 정보를 가져오고 저장하고 로그아웃 및 연결 끊기를 진행 해보도록 하겠습니다.

 

감사합니다.