본문 바로가기
카카오 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('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]

 

[Infomation]

  •  

 

 

 

댓글0