카카오톡 로그인 API

오늘은 카카오톡 로그인 API 사용방법을 정리해보겠다!

카카오톡 Developer 사이트에 로그인 후 어플리케이션 추가하기

JavaScript Key 복사해놓기

나중에 로그인 기능 구현 코드를 위해서 필요하다.

플랫폼 설정하기 (domain & Redirect URI)

웹에서 내가 사용하고자 하는 사이트의 domain까지만 작성한다. (Domain까지만!!)

그 후 밑에 등록하러 가기 버튼을 클릭해서 Redirect 설정페이지로 이동한다.
활성 상태를 ON으로 변경해주고 아래 Redirect URI는 나의 페이지 전체 주소를 입력한다.

웹사이트에서 사용원하는 항목들 체크하기

나의 웹사이트에서 필요할 것 같은 정보들을 설정해놓은 후 나중에 코드 구현할 때 각각 ID를 집어넣으면 된다.

코드 만들기

<!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>Document</title>
</head>

<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('JavaKey넣으면 됩니다!');
        function kakaoLogin() {
            window.Kakao.Auth.login({
                scope: 'profile_nickname, account_email', //동의항목 페이지에 있는 개인정보 보호 테이블의 활성화된 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)
                        }
                    });
                },
                fail: function (error) {
                    console.log(error);
                }
            });
        }
    </script>
</body>
</html>

Author And Source

이 문제에 관하여(카카오톡 로그인 API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dudgjs13579/카카오톡-로그인-API

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)