ETC - 2021. 4. 22.

카카오톡 로그인 API 사용하기

👨‍💻카카오톡 로그인 API 사용하기

안녕하세요 TriplexLab입니다 :)

오늘은 JavaScript로 카카오 로그인하는 모습을 보여 드리겠습니다.

🎯카카오톡 로그인 API 실행 결과

카카오톡 로그인 API 실행 결과

먼저 하단에 카카오 개발자 사이트를 방문하셔서 로그인을 해줍니다.

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

로그인 후 > 내 애플리케이션 탭을 클릭합니다.

그리고 애플리케이션 추가하기 버튼을 클릭합니다.
그럼 다음과 같은 팝업이 나옵니다. 만들고자 하는 앱 이름을 작성해 줍니다.

그럼 다음과 같은 페이지로 이동합니다.

요약 정보 탭에서 앱키라는 영역에 각각의 해당 키들이 발급된 것을 확인할 수 있습니다.

🎯플랫폼 등록

저는 web에 적용할것이기 때문에 web 플랫폼 등록 버튼을 클릭합니다.

그럼 다음과 같은 팝업이 나옵니다.
본인이 사이트 도메인을 작성해줍니다.
(저는 테스트를 할것이기 때문에 로컬 IP번호를 작성했습니다.)

저장 버튼을 클릭하면 다음과 같은 화면이 나옵니다.
그리고 Redirect URI를 등록 버튼을 클릭합니다.

그럼 다음과 같은 화면이 나옵니다.
여기서 활성화설정을 ON으로 변경합니다.
Redirect URI 등록 버튼을 클릭합니다.

다음과 같은 팝업이 나옵니다.
여기서는 로그인이 성공적으로 된 후에 Redirect 될만한 URL을 등록합니다.
(저는 테스트를 위해서 이미의 경로를 넣어놨습니다.)

그리고 저장 버튼을 누르면 다음과 같이 장상적으로 등록된 모습을 확인할 수 있습니다.

🎯동의 항목

동의 항목 메뉴를 클릭하면 개인정보 보호라는 필드들이 보입니다.
이 중에서 내가 사용자로부터 받고 싶은 필드들을 활성화시켜주면 됩니다.

저 같은 경우에는 프로필, 카카오 계정만 받아보겠습니다.

다음과 같이 2개의 필드만 활성화했습니다.

🎯카카오톡 로그인 API의 코드

이제 이상태에서 개발을 해보도록 하겠습니다.

카카오톡 개발 문서는 여기를 참고해주세요

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

다음 코드는 카카오톡 개발 문서를 참고하여 로그인을 구현해놓은 코드입니다.

<body>
    <a href="javascript:kakaoLogin();"><img src="./kakao_login.png" alt="카카오계정 로그인" style="height: 100px;"/></a>

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        window.Kakao.init('본인 JAVASCRIPT API 키');

        function kakaoLogin() {
            window.Kakao.Auth.login({
                scope: 'profile, account_email, gender, age_range, birthday', //동의항목 페이지에 있는 개인정보 보호 테이블의 활성화된 ID값을 넣습니다.
                success: function(response) {
                    console.log(response) // 로그인 성공하면 받아오는 데이터
                    window.Kakao.API.request({ // 사용자 정보 가져오기 
                        url: '/v2/user/me',
                        success: (res) => {
                            const kakao_account = res.kakao_account;
                            console.log(kakao_account)
                        }
                    });
                    // window.location.href='/ex/kakao_login.html' //리다이렉트 되는 코드
                },
                fail: function(error) {
                    console.log(error);
                }
            });
        }
    </script>
</body>

🎯카카오톡 로그아웃

window.Kakao.init('본인 JAVASCRIPT API 키');
	function kakaoLogout() {
    	if (!Kakao.Auth.getAccessToken()) {
		    console.log('Not logged in.');
		    return;
	    }
	    Kakao.Auth.logout(function(response) {
    		alert(response +' logout');
		    window.location.href='/'
	    });
};

🎯카카오톡 회원 탈퇴(연결 끊기)

function secession() {
	Kakao.API.request({
    	url: '/v1/user/unlink',
    	success: function(response) {
    		console.log(response);
    		//callback(); //연결끊기(탈퇴)성공시 서버에서 처리할 함수
    		window.location.href='/'
    	},
    	fail: function(error) {
    		console.log('탈퇴 미완료')
    		console.log(error);
    	},
	});
};

🎯파일 공유

해당 내용 github로 공유합니다. 👍👍👏👏🎉🎉

GitHub - younhoso/younhoso

Contribute to younhoso/younhoso development by creating an account on GitHub.

github.com

저작자표시

Contents

새소식

인기 검색어