TIL

카카오 알림톡 발송하기 -JavaScript 버전(버튼 포함)

개발따라김양 2024. 2. 28. 09:07

1. 카카오 알림톡은 보내는 이와 카카오톡 친구가 아니여도 휴대폰 번호만 알아도 발송이 가능합니다.

2. 사전에 비지니스 계정으로 등록이 필요합니다.

<script>
    //1단계 OAuth 2.0 인증 -> 토큰 발급
    const myHeaders = new Headers();
    const base_url =  "stg-user.bizmsg.kakaoenterprise.com"; //스테이징 - 일반 / 변경 필요
    const client_id = "";
    const client_secret = "";

    myHeaders.append("Authorization", `Basic ${client_id} ${client_secret}`);

    const urlencoded = new URLSearchParams();
    urlencoded.append("grant_type", "client_credentials");

    const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: urlencoded,
    redirect: 'follow'
    };

    fetch(`${base_url}/v2/oauth/token`, requestOptions)
    .then(response => response.text())
    .then(result => {
        console.log(result)
        postKakao(result.access_token)
    })
    .catch(error => console.log('error', error));

      //2단계 카카오톡 메시지 발송
    function postKakao(access_token){
        const myHeaders = new Headers();
        myheaders.append("Authorization", `Bearer ${access_token}`);
        myheaders.append("Content-Type", "application/json");
        
        const sender_key = ""; //비즈 사이트에서 채널 생성 시 발급
        const message = "알림톡 메시지 테스트"; // 1000자 이하
        const button =  {"type": "WL","name": "QR 코드 보기", "url_mobile": `모바일에서 보일 사이트`, "url_pc": `PC에서 보일 사이트` };

        const body = new FormData();
            body.append("message_type", "AT");
            body.append("sender_key", sender_key);
            body.append("cid", cid); //고객사 정의 Key ID
            body.append("template_code", template_code); //실제 발송할 메시지 유형으로 등록된 템플릿의 코드
            body.append("phone_number", phone_number); //수신자 전화번호(국가코드(82) 포함)
            body.append("sender_no", ""); //고객사 발신 전화번호
            body.append("message", message);
            body.append("button", button); 

        const requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: JSON.stringify(body),
            redirect: 'follow'
        };

        fetch(`${base_url}/v2/send/kakao`, requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
    }

</script>