📌 카카오톡 채널 연결 및 간편 추가 버튼 구현

My Pale Blue Dot·2025년 5월 13일

API Spring Springboot kakao 카카오 카카오톡 카카오톡 채널

SPRING BOOT

목록 보기

24/40

📅 2025-05-13

📝 학습 내용

✅ 1. 카카오톡 채널 연결 개요

기능 목적: 사용자가 카카오 로그인을 할 때, 카카오톡 채널을 자동으로 추가할 수 있도록 유도함
전제 조건:
- 비즈니스 채널 등록 및 연결
- 앱의 플랫폼 등록 (http://localhost:8090 등)
- 카카오 로그인 기능 활성화
- 사용자 동의 항목 설정 (카카오톡 채널 추가 항목 포함)

✅ 2. 개발자센터 설정 흐름

카카오 개발자센터 접속
앱 선택 → [제품 설정 > 카카오 로그인] 이동
Redirect URI 등록
JavaScript 키 복사
[채널 > 간편 채널 추가] 활성화
비즈니스 채널 연결 (필수)

✅ 3. JavaScript SDK 설치 및 초기화

📌

에 SDK 삽입

<script crossorigin="anonymous"
        integrity="sha384-dok87au0gKqJdxs7msEdBPNnKSRT+/mhTVzq+qOhcL464zXwvcrpjeWvyj1kCdq6"
        src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.5/kakao.min.js"></script>

📌

또는 JS 스크립트에 초기화 코드 삽입

console.log("Kakao", Kakao);
Kakao.init('73a8a62da7b85318e859cbc1d3bfec6a'); // 본인의 JavaScript 키 입력

✅ 4. 채널 간편 추가 버튼 구현

🔹 HTML 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KAKAO CHANNEL</title>
    <script crossorigin="anonymous"
            integrity="sha384-dok87au0gKqJdxs7msEdBPNnKSRT+/mhTVzq+qOhcL464zXwvcrpjeWvyj1kCdq6"
            src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.5/kakao.min.js"></script>
</head>
<body>

    <h1>KAKAO CHANNEL</h1>
    <!-- 카카오톡 채널 추가 버튼이 들어갈 위치 -->
    <a href="javascript:void(0)" id="kakao-add-channel-button"></a>

    <script>
        // SDK 초기화
        console.log("Kakao", Kakao);
        Kakao.init('73a8a62da7b85318e859cbc1d3bfec6a');

        // 버튼 생성
        Kakao.Channel.createAddChannelButton({
            container: '#kakao-add-channel-button',
            channelPublicId: '_xcXyBn' // 카카오톡 채널의 고유 ID (홈 URL에서 @ 제외하고 입력)
        });
    </script>

</body>
</html>

✅ 5. 결과 테스트

테스트 URL: 브라우저 주소창에 입력하여 확인

http://localhost:8090/kakao/channel

기대 결과: 채널 추가 버튼이 렌더링되고, 클릭 시 카카오 계정으로 해당 채널이 추가됨

🔥 정리

항목	설명
플랫폼 등록	http://localhost:포트 포함 필요
SDK 불러오기	에 스크립트 삽입
초기화	Kakao.init('자바스크립트 키')
버튼 생성	Kakao.Channel.createAddChannelButton()
채널 ID	@ 제외한 _xxxx 형태 사용
필수 설정	비즈니스 채널 연결 + 로그인 동의 항목 설정

🔗 참고 자료

😊 느낀 점

카카오톡 채널 연결은 생각보다 간단했지만, 비즈니스 채널 연결 여부, 플랫폼 등록, 그리고 정확한 channelPublicId 설정이 중요했다.

버튼 하나로 채널 추가까지 유도할 수 있다는 점에서 UX적으로도 큰 장점이 있었다.

My Pale Blue Dot

Here, My Pale Blue.🌏

이전 포스트

📌 Spring Boot로 카카오톡 친구에게 메시지 보내기

다음 포스트

📌 카카오톡 채널 연결 및 간편 추가 버튼 구현

SPRING BOOT

📅 2025-05-13

📝 학습 내용

✅ 1. 카카오톡 채널 연결 개요

✅ 2. 개발자센터 설정 흐름

✅ 3. JavaScript SDK 설치 및 초기화

📌

에 SDK 삽입

📌

또는 JS 스크립트에 초기화 코드 삽입

✅ 4. 채널 간편 추가 버튼 구현

🔹 HTML 예제

✅ 5. 결과 테스트

🔥 정리

🔗 참고 자료

😊 느낀 점

📌 Spring Boot로 카카오톡 친구에게 메시지 보내기

📌 SpringBoot에서 카카오페이 결제 API 연동하기

0개의 댓글