[Error] window.Kakao.Auth.login is not a function

 

개발환경

vue.js (version : 2)

 

문제 상황

카카오 로그인 API 연동 과정 중 window.Kakao.Auth.login is not a function 발생하였다.

 

파일명 : index.html

카카오에서 제공하는 Javascript SDK를 등록했다.

   <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js" integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
    </script>

 

카카오 로그인 클릭했을 때 실행되는 함수는 다음과 같이 정의하였다.

methods: {
    kakaoLogin(){
      window.Kakao.Auth.login({
        scope: 'profile_nickname,account_email',
        success: this.getKakaoAccount,
      });
      
    },

    getKakaoAccount(authObj) {
      window.Kakao.API.request({
        url : '/v2/user/me',
        success: res => {
          const kakao_account = res.kakao_account;
          console.log(kakao_account);
        }
      })
	},

 

 

에러 발생 원인

SDK 설정 문제로 확인된다. 위의 버전은 login 함수가 정의되어 있지 않음

 

해결 방법

파일명 : index.html

SDK는  다음과 같이 정의해야함

다음과 같이 바꾸고 로그인하니까 해당 에러 발생하지 않으며, 정상적으로 확인된다.

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

 

결과 화면 

쿠키 

 

콘솔로그 

로그인 화면

 

기존 로그인한 카카오 계정을 로그아웃 하고싶다면?

아래 링크로 이동하여 로그아웃하면 된다. 

https://accounts.kakao.com/weblogin/account/security/security_diagnosis

카카오계정

 

삽질

- window.Kakao.Auth.authorize 로 하면 다음과 같이 새창에서 열리는 것이 아니라 기존 window에서 열림

-> 내가 원한건 이게 아니었음 ㅠ...... ㅠ.ㅠ.ㅠ... 

 

 

---

References

 

카카오 로그인 API 

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

Kakao Developers

 

https://jun-itworld.tistory.com/53

[Vue.js] 카카오 로그인처리