[JS] 카카오톡 로그인/로그아웃/탈퇴하기 방법 및 html 파일 (코드있음)

🟩 Frontend-HTML & CSS & +JS/🔰JavaScript

[JS] 카카오톡 로그인/로그아웃/탈퇴하기 방법 및 html 파일 (코드있음)

ramen2 2025. 1. 24. 20:36

1.카카오 개발자 사이트에서 web용 애플리케이션 만듬

사이트 도메인은 로컬이라 로컬로 지정

2. 등록하러가기 버튼을 눌러, 로그인 성공후 갈 곳 지정

3. 아래의 동의항목 넣음

(더하려면 비즈니스 계정 변환 필요)

4. js 앱키 복사 해놓고 html 둘 다에 넣음

| 폴더구성

| index.html (로그인 할 곳 코드)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>매인 페이지</title>
</head>
<body>
    <a href="#0" id="kakaoLogin"><img src="./kakao_login.png" alt="카카오계정 로그인" style="height: 100px;" /></a>
    <p>해당 Live Demo는 테스트용이기 때문에 반드시 소스 코드에 '본인 API 키'를 넣어야 제대로 사용할 수 있습니다.</p>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        // Kakao SDK 초기화
        window.Kakao.init('bdddddddddddd4');
        // 본인 js api 키 넣어야함

        // 로그인 함수
        function kakaoLogin() {
            window.Kakao.Auth.login({
                scope: 'profile_nickname, profile_image', // 닉네임과 프로필 이미지 (다른거 쓰려면 카톡개발자에 비즈니스 신청해서 email등도 가져올 수있음)
                success: function(response) {
                    const token = response.access_token;

                    // 사용자 정보 요청
                    window.Kakao.API.request({
                        url: '/v2/user/me',
                        success: (res) => {
                            const kakao_account = res.kakao_account;
                            const userInfo = {
                                nickname: kakao_account.profile.nickname,
                                profile_image: kakao_account.profile.profile_image_url,
                            };

                            // 사용자 정보와 토큰을 sessionStorage에 저장
                            sessionStorage.setItem('AccessKEY', token);
                            sessionStorage.setItem('UserInfo', JSON.stringify(userInfo));

                            // 로그인 성공 후 리다이렉션
                            window.location.href = '/ex/kakao_login.html';
                        },
                        fail: (error) => {
                            console.error('사용자 정보 요청 실패', error);
                        }
                    });
                },
                fail: function(error) {
                    console.error('로그인 실패', error);
                }
            });
        }

        // 로그인 버튼 클릭 이벤트 연결
        const login = document.querySelector('#kakaoLogin');
        login.addEventListener('click', kakaoLogin);
    </script>
</body>
</html>

| kakao_login.html (로그인 한 후 redirection 될 곳 코드)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirect URI</title>
</head>
<style>
    #profile {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-align: center;
    }
    #profile img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
    }
</style>
<body>
    <div id="profile">
        <!-- 프로필 정보 표시 -->
        <p>로딩 중...</p>
    </div>
    <a href="#0" id="kakaoLogout">로그아웃</a> | 
    <a href="#0" id="secession">탈퇴</a>

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        // Kakao SDK 초기화
        window.Kakao.init('bdddddddddddd4');
        // 본인 js api 키 넣어야함

        // sessionStorage에서 사용자 정보 가져오기
        const userInfo = JSON.parse(sessionStorage.getItem('UserInfo'));
        const profileDiv = document.querySelector('#profile');

        // 사용자 정보 표시
        if (userInfo) {
            profileDiv.innerHTML = `
                <img src="${userInfo.profile_image}" alt="프로필 이미지" />
                <p>닉네임: ${userInfo.nickname}</p>
            `;
        } else {
            profileDiv.innerHTML = `<p>사용자 정보를 불러오지 못했습니다.</p>`;
        }

        // 로그아웃 기능
        function kakaoLogout() {
            if (!Kakao.Auth.getAccessToken()) {
                console.log('Not logged in.');
                return;
            }
            Kakao.Auth.logout(function() {
                alert('로그아웃 완료');
                sessionStorage.clear(); // 모든 세션 데이터 제거
                window.location.href = '/';
            });
        }

        // 탈퇴 기능
        function secession() {
            Kakao.API.request({
                url: '/v1/user/unlink',
                success: function() {
                    alert('탈퇴 완료');
                    sessionStorage.clear();
                    window.location.href = '/';
                },
                fail: function(error) {
                    console.error('탈퇴 실패', error);
                },
            });
        }

        // 이벤트 리스너 연결
        document.querySelector('#kakaoLogout').addEventListener('click', kakaoLogout);
        document.querySelector('#secession').addEventListener('click', secession);
    </script>
</body>
</html>

| 파일 다운

kakaoLogin-공유용-api키본인것+웹주소등록하여사용.zip

0.02MB

저작자표시 비영리 변경금지

'🟩 Frontend-HTML & CSS & +JS > 🔰JavaScript' 카테고리의 다른 글

자바스크립트 기초 정리 문제 및 풀이 (2)	2024.10.24
5. 배열 객체의 메소드 (push,pop,shift등) (1)	2024.10.02
4. 연산자 (산술,비교,대입,증감,논리,비트,삼항 연산자) (1)	2024.09.30
3. 자바스크립트 대화상자 (alert, confirm, prompt) (0)	2024.09.30
2. 자바스크립트의 타입변환 (암시적 타입변환, 명시적 타입변환) (0)	2024.09.30

현재글[JS] 카카오톡 로그인/로그아웃/탈퇴하기 방법 및 html 파일 (코드있음)

기록장