[JS] 카카오 로그인 API 구현 방법

java script 의 openAPI 를 이용해서 직접 만든 사이트의 로그인 부분에 

카카오 로그인을 구현해보려고 합니다. 

 

카카오는 카카오 디벨로퍼에 openAPI가 잘 설명되어 있어서  어떤 기능이 있고 어떻게 구현하는지 

여러번 읽어보고 차례차례 따라하면 됩니다. 

 

그럼 카카오 로그인을 구현하는 방법을 순서대로 설명하도록 하겠습니다. 

---

로그인 API 구현 흐름 

 

1. 클라이언트(WEB) 에서 로그인

2. 카카오서버는 redirect url로 code를 전달

3,4. code를 이용하여 access_token을 발급

5. access_token을 서버로 전송

6,7. 서버에서는 받은 access_token을 이용하여 카카오 서버에서 사용자 정보를 받음

8. 받은 사용자 정보를 이용하여 회원가입 또는 로그인을 진행

9. JWT 등과 같이 사용자 식별 정보를 클라이언트로 보냄

 

 

   JWT ( JSON Web Token ) 

- 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 토큰

- JSON 포맷을 이용한 Web Token

- 회원 인증, 정보 전달에 주로 사용

---

1. 웹 만들기 ( 회원가입) 

https://developers.kakao.com/docs/latest/ko/getting-started/app

Kakao Developers

카카오 디벨로퍼 사이트에 회원가입 

애플리케이션 추가하기에서 앱 등록하기 

애플리케이션이 생성되면 인증키 발급 

플랫폼 등록에서 Web 선택 

카카오 로그인을 사용할 url을 입력

( 저는 제가 사용하는 서버의 포트번호인 http://localhost:9090로 등록을 했습니다. ) 

제품설정 > 카카오 로그인 > 활성화 설정

제품설정 > 동의항목 

자신의 사이트에서 카카오 로그인 시 어떤 정보를 가져올지 선택.

설정을 누른 후 내용을 기입하고 설정하기

 

---

 

2. 카카오 SDK 로드 

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js

Kakao Developers

카카오 API를 사용하기 위해서는 SDK를 다운로드 받거나 

해당 코드를 사용하고자 하는 HTML 페이지에 코드를 입력 

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

 

---

★ 로그인 API 동작 구조  : 권한접근  ->  토근발급  ->  토큰을 이용한 정보 수집 ★ 

 

 

3. 초기화 

( 권한접근 ) 

Kakao.init('인증키'); 를 사용해서 초기화

초기화 판단여부는 Kakao.isInitialized() 를 사용

=> 정상적으로 초기화 되었다면 개발자 도구 콘솔에 ( 성공 : true, 실패 :  false )

 // 카카오 초기화
        Kakao.init('인증KEY');
        console.log( Kakao.isInitialized() ); // 초기화 판단여부

 

---

 

4. SDK 데모 버전으로 들어가서 코드 확인 

https://developers.kakao.com/tool/demo/login/login

Kakao Developers

카카오 로그인 방식 설정 ( 팝업으로 선택) 

카카오에서 제공하는 해당 코드를 확인하고 이를 가지고 구현 

카카오 로그인 버튼에  JS 연결 

<li><a href="javascript:loginWithKakao()"></a></li>

 ( 토근발급 )

로그인 이외의 카카오 API를 JavaScript SDK로 호출하려면 토큰 할당을 해야 함

  //카카오 로그인 후 토근 값 저장.
        function loginWithKakao() {
            Kakao.Auth.login({
                success: function (authObj) {
                    console.log(authObj); // access토큰 값
                    Kakao.Auth.setAccessToken(authObj.access_token); // access토큰값 저장

                    getInfo();
                },
                fail: function (err) {
                    console.log(err);
                }
            });
        }

 

---

 

5. 사용자 정보 가져오기 

https://developers.kakao.com/tool/demo/login/userme

Kakao Developers

카카오에서 제공하는 해당 코드를 확인하고 이를 가지고 구현 

( 토큰을 이용한 정보 수집 ) 

 // 엑세스 토큰을 발급받고, 아래 함수를 호출시켜서 사용자 정보를 받아옴.
        function getInfo() {
            Kakao.API.request({
                url: '/v2/user/me',
                success: function (res) {
                    console.log(res);
                    // 이메일, 성별, 닉네임, 프로필이미지
                    var email = res.kakao_account.email;
                    var gender = res.kakao_account.gender;
                    var profile_nickname = res.kakao_account.profile.nickname;
                    var profile_image = res.kakao_account.profile.thumbnail_image_url;
                    var birthday = res.kakao_account.birthday;

                    console.log(email, gender, profile_nickname, profile_image, birthday);
                },
                fail: function (error) {
                    alert('카카오 로그인에 실패했습니다. 관리자에게 문의하세요.' + JSON.stringify(error));
                }
            });
        }

 

---

 

6. 로그아웃 기능 

https://developers.kakao.com/tool/demo/login/logout

Kakao Developers

 

카카오 계정을 로그아웃 하는 것이 아닌, 토큰을 만료시켜서 기능을 사용하지 못하게 하는 것 

 

카카오에서 제공하는 해당 코드를 확인하고 이를 가지고 구현 

// 로그아웃 기능 - 카카오 서버에 접속하는 엑세스 토큰을 만료, 사용자 어플리케이션의 로그아웃은 따로 진행.
        function kakaoLogout() {
            if (!Kakao.Auth.getAccessToken()) {
                alert('Not logged in.');
                return;
            }
            Kakao.Auth.logout(function() {
                alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken());
            });
        }

 

 

※ 사이트에서 로그인이 진행되면 동의 항목 없이 바로 자동으로 넘어가기 때문에 

처음부터 테스트를 하길 원한다면 하기 사이트에서 연결 해제 후 다시 진행하면 됩니다. 

accounts.kakao.com/weblogin/account/info

카카오계정 로그인