[JavaScript] 카카오 스토리

2020-11-30 최초등록
[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('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'); //★ 수정 할 것

        // 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:share()">Share</Button>
                <Button onclick="javascript:open()">Open</Button>
                <p id="kakaostory-follow-button"></p>
                <p id="kakaostory-share-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 share() {
            Kakao.Story.share({
                url: 'https://developers.kakao.com',
                text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
            });
        }

        function open() {
            Kakao.Story.open({
                url: 'http://blog.kakaocorp.co.kr/390',
                text: '카카오검색에서 카카오스토리를! #카카오스토리 #카카오검색 :)'
            });
        }
        follow();
        function follow() {
            Kakao.Story.createFollowButton({
                container: '#kakaostory-follow-button',
                id: 'kakao'
            });
        }
        btn_share();
        function btn_share() {
            Kakao.Story.createShareButton({
                container: '#kakaostory-share-button',
                url: 'https://developers.kakao.com',
                text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)'
            });
        }
    </script>

</body>

</html>
[Reference]
카카오 스토리 Top : developers.kakao.com/docs/latest/ko/kakaostory/common
카카오 스토리 JavaScript : developers.kakao.com/docs/latest/ko/kakaostory/js
[Infomation]
kakao-TAM

[JavaScript] 카카오 스토리 - v20201130

댓글

티스토리툴바
