django

카카오 로그인 (FrontEnd)

베스트오버 2023. 6. 17.

목차

    카카오 개발자 docs에 있는 내용이다.

    var access_token = localStorage.getItem('access_token');
    
    // 카카오 로그인 ###############################################
    function loginWithKakao() {
        access_token || Kakao.Auth.authorize({
            redirectUri: `${frontend_base_url}/temp.html`,
        });
    }

     

    리소스는 카카오 개발자 docs에 있으므로 그곳에서 다운 받아 사용하면 될 것이다.

    <head>
    <!-- jQuery CDN -->
        <script src="https://code.jquery.com/jquery-3.7.0.min.js"
            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    
        <!-- kakao js -->
        <script type="text/javascript" src='../static/js/base.js' async></script>
        <script type="text/javascript" src='../static/js/login.js' async></script>
    </head>
    <bodY>
        <!-- kakao js -->
        <script src=" https://t1.kakaocdn.net/kakao_js_sdk/2.2.0/kakao.min.js"
            integrity="sha384-x+WG2i7pOR+oWb6O5GV5f1KN2Ko6N7PTGPS7UlasYWNxZMKQA63Cj/B2lbUmUfuC"
            crossorigin="anonymous"></script>
        <script>
            Kakao.init('13071058148f34624ffc0412a6af5381'); // 사용하려는 앱의 JavaScript 키 입력
    
            // SDK 초기화 여부를 판단합니다.
            console.log(Kakao.isInitialized());
        </script>
        <div class="sns_login">
                <a id="kakao-login-btn" href="javascript:loginWithKakao()">
                    <img src="../static/img/kakao_login_large_wide.png" class="kakao-login-img" alt="카카오 로그인 버튼" />
                </a>
        </div>
    </body>

    댓글