카카오 간편 로그인 (react-kakao-login 라이브러리)

안녕하세요! 

이번 게시글에서는 Spring + React 프로젝트의 카카오 간편 로그인 기능 구현을 공유하려 합니다.

---

📌 Kakao Devlopers

우선 카카오의 간편 로그인 기능을 구현하기 위해서는 kakao developers를 설정해줘야 합니다.

 

저는 조금 더 간편하게 구현하기 위해서  JavaScript SDK를 이용해서 진행했습니다.

 

아래는 JavaScript SDK를 사용한 카카오 로그인 과정을 나타낸 시퀀스 다이어그램(Sequence diagram)입니다.

자세한 설명은 카카오 개발자 센터 API 문서를 참고해주세요.

Kakao Developers

 

시퀀스 다이어그램(Sequence diagram)

 

Kakao Developers 설정 방법

 

1. 내 애플리케이션 등록

• Kakao Developers 사이트에 접속하여 내 애플리케이션을 등록합니다.

Kakao Developers

 

 

2. 카카오 로그인 활성화

• 제품 설정 → 카카오 로그인 → 활성화 설정

 

3. 플랫폼 등록

• 앱 설정 → 플랫폼 → Web
• 카카오 로그인을 사용할 클라이언트 도메인 주소를 입력합니다. (예: http://localhost:3000)

 

4. Redirect URI 등록

• 제품 설정 → 카카오 로그인 → Redirect URI
• Redirect URI를 등록합니다. (예:  http://localhost:3000/auth)

5. 동의 항목 설정

• 제품 설정 → 카카오 로그인 - 동의항목
• 필요한 항목을 동의합니다. 이메일을 기준으로 로그인할 경우, 이메일 항목에 동의해야 합니다. (비즈 앱 전환 필요)

 

참고: 개인 개발자 비즈 앱 전환 방법

Kakao Developers

 

앱 키

• 내 애플리케이션 → 앱 설정 → 앱 키

 

---

 

📌 카카오 간편 로그인 구현

이제 카카오 로그인을 구현해보겠습니다. 저는 React에서 react-kakao-login 라이브러리를 사용하여 구현했습니다.

 

react-kakao-login 설치

npm install react-kakao-login

 

카카오 로그인 컴포넌트

import KakaoLogin from 'react-kakao-login';

const kakaoClientId = 'KAKAO_JAVASCRIPT_KEY'; // 실제 카카오 JavaScript SDK 키 사용

// 카카오 로그인 성공, 실패
const onKakaoSuccess = async (data: any)=>{
    const idToken = data.response.access_token;  // 엑세스 토큰 백엔드로 전달
    // 토큰을 이용해서 로그인 구현
}
const onKakaoFail = () => {
    alert('카카오 로그인에 실패했습니다. 다시 시도해주세요.');
};

if (!kakaoClientId) return null;

<KakaoLogin
  token={kakaoClientId}
  onSuccess={onKakaoSuccess}
  onFail={onKakaoFail}
  render={(props) => (
    <button className='gsi-material-button kakao' onClick={props.onClick}>
      <div className='gsi-material-button-state'></div>
      <div className='gsi-material-button-content-wrapper'>
        <div className='gsi-material-button-icon'>
          <div style={{ background: `url(${kakaoIcon}) no-repeat center`, width:'20px', height:'20px', backgroundSize: '20px' }} />
        </div>
        <span className='gsi-material-button-contents'>카카오 로그인</span>
      </div>
    </button>
  )}
/>

• KakaoLogin 버튼을 클릭하면 토큰을 확인하여 성공과 실패 여부를 반환합니다.
• token은 카카오에서 발급받은 JavaScript SDK키를 전달합니다.
• 전달받은 token이 성공적으로 반환되면 카카오에서 발급한 엑세스 토큰이 전달됩니다. 
• 저는 다른 간편 로그인 기능도 구현할 것이기 때문에 버튼의 사이즈와 요소의 배치를 맞추기 위해 reder 항목을 이용해서 커스텀을 해주었습니다. 커스텀을 안하실 분들은 reder 항목 없이 쓰시면 됩니다.

 

Backend로 구현할 경우 (사용자 정보 가져오는 코드)

//HttpHeader 생성
HttpHeaders headers = new HttpHeaders();
headers.add("Authorization", "Bearer " + idToken); // 카카오에서 발급한 access token
headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

//HttpHeader 담기
RestTemplate rt = new RestTemplate();
HttpEntity<MultiValueMap<String, String>> httpEntity = new HttpEntity<>(headers);
ResponseEntity<String> response = rt.exchange(
        "https://kapi.kakao.com/v2/user/me",
        HttpMethod.GET,
        httpEntity,
        String.class
);

ObjectMapper objectMapper = new ObjectMapper();
JsonNode rootNode = objectMapper.readTree(response.getBody());
String email = rootNode.path("kakao_account").path("email").asText();

Frontend로 구현할 경우 (사용자 정보 가져오는 코드)

const idToken = data.response.access_token;
try {
  const response = await fetch('https://kapi.kakao.com/v2/user/me', {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${idToken}`,
      'Content-Type': 'application/json',
    },
  });

  if (!response.ok) console.log('카카오 유저 정보 가져오기 실패');

  // userInfo에서 필요한 데이터 사용 가능
  const userInfo = await response.json();
  const email = userInfo.kakao_account?.email;
  
} catch (error) {
  console.error('카카오 유저 정보 요청 중 오류:', error);
}

• 카카오 로그인 버튼을 클릭해서 성공했을 때 반환 받은 카카오 access token을 활용해서 사용자 정보를 가져옵니다.
• 각각의 방식은 장단점이 존재하는데 백엔드로 구현할 경우 프론트엔드보다 보안은 강화되지만, 응답속도는 느리고, 프론트엔드에서는 그 반대로 생각하시면 됩니다.
• 저는 보안을 좀 더 고려해서 백엔드에서 사용자 정보를 가져오는 방식을 사용하였습니다.

 

카카오 로그인 버튼 커스텀

• 카카오 로그인 버튼을 커스텀하실 분들은 카카오 로그인 디자인 가이드를 참고해주세요.

Kakao Developers

 

 

※ JavaScript SDK 키는 보안이 매우 중요합니다. 이를 .env 파일에 저장하고 gitignore로 관리하는 것이 좋습니다.

 

 

---

 

이상으로 이번 포스팅을 마치겠습니다.

제 게시물이 다른 분들에게도 도움이 되면 좋겠네요. 다음 게시물에서 또 인사드릴게요.

오늘도 행복한 하루 되세요!