Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Tags
- 프로그래머스
- javascript
- nomadcoders
- SQL 개발자
- boj
- SQLD
- 자격증
- IT 지식
- 공부를 가장한 일기일지도
- 구름edu
- 노마드 코더
- 노개북
- Do it! 시리즈
- 오블완
- js
- 티스토리챌린지
- 알고리즘
- 이해할 수 있는
- 모던 자바스크립트 deep dive
- 개발자북클럽
- 자바스크립트
- K-Digital Credit
- 백준
- 비전공자를 위한
- CodeStates
- 노마드코더
- 톺아보기
- 엘리스코딩
- 최원영 저자
- 제로베이스
Archives
- Today
- Total
개발자를 희망하는 초보의 자기개발 이야기
[카카오 로그인] 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 키 → 백엔드에서 사용
다시 한번 말하지만 백엔드 개발자가 이 모든 처리를 담당하면, 프론트엔드에서 직접 설정할 필요가 없다. 하지만 프론트엔드에서 앱을 등록하거나 키를 준비해야 하는 상황일 경우 위의 방법을 참고한다.
참고 자료
반응형
'프론트엔드(Front-end)' 카테고리의 다른 글
[카카오 로그인] 리액트로 카카오 로그인 구현하기 - 프론트엔드 (2) (0) | 2025.03.17 |
---|---|
[카카오 로그인] 리액트로 카카오 로그인 구현하기 - 프론트엔드 (1) (0) | 2025.03.06 |
코딩 질문 잘하는 방법 (0) | 2024.08.22 |
자주 사용하는 마크다운 문법 12가지 (0) | 2024.08.05 |
웹의 주요 프로그래밍 언어 3가지 (2) | 2023.11.04 |