본문 바로가기
카카오 REST API & SDK/카카오톡 채널

[JavaScript] 카카오톡 채널 - v20201130

by kakao-TAM 2020. 11. 30.
2020-11-30 최초등록

 

[Sample]

 

 

[Code] 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kakao JavaScript SDK</title>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'); //★ 수정 할 것

        // SDK 초기화 여부를 판단합니다.
        console.log(Kakao.isInitialized());
    </script>
</head>

<body>
    <table border="1">
        <tr>
            <td>Login (PopUp)</td>
            <td>
                <a id="custom-login-btn" href="javascript:loginWithKakao()">
                    <img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222" />
                </a>
            </td>
        </tr>
        <tr>
            <td>Logout</td>
            <td>
                <Button onclick="javascript:logoutWithKakao()">Logout</Button>
            </td>
        </tr>
        <tr>
            <td>Unlink</td>
            <td>
                <Button onclick="javascript:unlinkWithKakao()">Unlink</Button>
            </td>
        </tr>
        <tr>
            <td>Kakao Story</td>
            <td>
                <Button onclick="javascript:add()">Add</Button>
                <Button onclick="javascript:chat()">Chat</Button>
                <Button onclick="javascript:plusfriends()">plusfriends</Button>
                
                <p id="kakao-talk-channel-chat-button"></p>
                <p id="kakao-add-channel-button"></p>

            </td>
        </tr>
    </table>

    <script type="text/javascript">
        function loginWithKakao() {
            Kakao.Auth.login({
                success: function (authObj) {
                    alert(JSON.stringify(authObj));
                    Kakao.Auth.setAccessToken(authObj.access_token);
                    //★ 추가 할 것 : 로그인 성공 후 처리 
                },
                fail: function (err) {
                    alert(JSON.stringify(err))
                },
            })
        }

        function logoutWithKakao() {
            if (!Kakao.Auth.getAccessToken()) {
                console.log('Not logged in.');
                return;
            }
            console.log(Kakao.Auth.getAccessToken()); //before Logout
            Kakao.Auth.logout(function () {
                console.log(Kakao.Auth.getAccessToken()); //after Logout
                //★ 추가 할 것 : 로그아웃 성공 후 처리 
            });
        }

        function unlinkWithKakao() {
            Kakao.API.request({
                url: '/v1/user/unlink',
                success: function (response) {
                    console.log(response);
                },
                fail: function (error) {
                    console.log(error);
                }
            });
        }

        function add() {
            Kakao.Channel.addChannel({
                channelPublicId: '_xcLqmC'
            });
        }

        function chat() {
            Kakao.Channel.chat({
                channelPublicId: '_xcLqmC' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
            });
        }
        btn_chat();
        function btn_chat() {
            Kakao.Channel.createChatButton({
                container: '#kakao-talk-channel-chat-button',
                channelPublicId: '_xcLqmC' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
            });
        }
        btn_added();
        function btn_added() {
            Kakao.Channel.createAddChannelButton({
                container: '#kakao-add-channel-button',
                channelPublicId: '_xcLqmC' // 채널 홈 URL에 명시된 id로 설정합니다.
            });
        }

        function plusfriends() {
            Kakao.API.request({
                url: '/v1/api/talk/plusfriends',
                success: function (response) {
                    console.log(response);
                },
                fail: function (error) {
                    console.log(error);
                }
            });
        }
    </script>

</body>

</html>

 

[Reference]

 

[Infomation]

 

 

 

'카카오 REST API & SDK > 카카오톡 채널' 카테고리의 다른 글

카카오톡 채널 채팅 시, 이전 url을 함께 보낼 수 있나요?  (1) 2021.06.11
한 페이지에서 카카오톡 채널 채팅 버튼 두개 사용하기  (0) 2021.05.07
PHP 예제 - [카카오톡 채널] 고객 관리: 파일 만들기 / 파일 보기 / 사용자 추가하기 / 사용자 삭제하기  (0) 2021.03.10
[PHP] 카카오톡 채널 추가/차단 콜백 API 만들기  (2) 2021.01.06
카카오톡 채널 - v20201210  (0) 2020.12.10

관련글

댓글

티스토리툴바