[카카오 로그인] Kakao Developers 설정

Kakao Developers 설정

카카오 로그인을 구현하려면 Kakao Developers 콘솔에서 설정이 필요하다. 이 글에서는 카카오 로그인 기능을 활성화하는 방법과 필요한 설정 과정을 설명한다. 백엔드 개발자가 모든 처리를 담당하면, 프론트엔드에서 직접 설정할 필요가 없다. 하지만, 어떻게 동작하는지 이해하는 것이 중요하다.

 

1. 내 애플리케이션 등록

• Kakao Developers 콘솔에 접속한다.
• "애플리케이션 추가하기" 버튼을 클릭한다.
• 앱 이름과 사업자명을 등록한다.
  • 실제 서비스가 아닐 경우, 사업자명은 임의로 등록해도 된다.

 

2. 카카오 로그인 설정

카카오 로그인 기능을 사용하려면 아래의 설정이 필요하다.

1) 카카오 로그인 활성화

• 내 애플리케이션 -> 제품 설정 -> 카카오 로그인 메뉴로 이동한다.
• "카카오 로그인 활성화" 옵션을 "ON" 으로 변경한다.

2) 플랫폼 등록 (도메인 설정)

카카오 로그인을 사용할 웹사이트의 도메인을 등록해야 한다.

• 앱 설정 → 플랫폼 메뉴로 이동한다.
• "웹" 을 선택한 후, 사용할 클라이언트 도메인을 입력한다.
  • 예: http://localhost:3000 (로컬 환경)
  • 실제 서비스 배포 시에는 운영 도메인으로 수정해야 한다.

3) Redirect URI 등록

Redirect URI는 OAuth 2.0 인증 과정에서 로그인 후 사용자가 다시 돌아올 주소이다.

• 카카오 로그인 설정 화면에서 아래로 스크롤하면 Redirect URI 입력란이 보인다.
• 프론트엔드 또는 백엔드에서 처리할 Redirect URI를 등록한다.
  • 예: http://localhost:3000/callback
  • 백엔드에서 설정한 URI와 동일해야 한다.

 

3. Redirect URI를 프론트엔드에서 직접 처리 시 발생할 수 있는 문제점

카카오 로그인을 프론트엔드에서 직접 처리할 수도 있지만, 보안 문제로 인해 권장되지 않는다.

문제점	내용
액세스 토큰이 노출될 가능성	URL, 로컬스토리지, 세션스토리지 등에 저장된 토큰이 악성 코드(XSS 공격)로 인해 탈취될 가능성이 있음.
CSRF 공격 가능성	공격자가 Redirect URI를 조작하면 사용자의 인증 정보를 가로채 다른 서버로 보낼 수 있음.
API 키 유출 위험	프론트엔드에서 REST API 키를 직접 사용하면, 네트워크 요청을 통해 키가 노출될 수 있음.

 

4. 백엔드에서 처리시 장점

문제점	내용
OAuth 토큰을 안전하게 저장	백엔드에서 카카오 액세스 토큰을 관리하므로, 프론트엔드에서 노출될 위험이 없음.
프론트엔드에는 자체 발급한 토큰만 제공	백엔드는 카카오에서 받은 토큰을 검증한 후, 별도의 JWT 토큰을 만들어 프론트엔드에 전달.
API 키 유출 방지	REST API 키를 백엔드에서만 사용하여 외부에 노출되지 않도록 보호.
토큰 갱신 관리 가능	카카오의 액세스 토큰이 만료되면 백엔드에서 갱신(Refresh Token 활용)하여 유지 가능.

즉, Auth 2.0 인증 처리는 백엔드에서 하는 것이 보안적으로 안전하다.

 

5. 앱 키 확인

Kakao Developers 콘솔에서 앱 키를 확인할 수 있다.

 

• JavaScript 키 → 프론트엔드에서 사용
• REST API 키 → 백엔드에서 사용

 

다시 한번 말하지만 백엔드 개발자가 이 모든 처리를 담당하면, 프론트엔드에서 직접 설정할 필요가 없다. 하지만 프론트엔드에서 앱을 등록하거나 키를 준비해야 하는 상황일 경우 위의 방법을 참고한다.

 

 

참고 자료

• Kakao Developers 공식 문서
• 카카오 로그인 구현 관련 블로그