카카오 로그인 구현 javascript

푸핫을 만들면서 로그인을 카카오 로그인으로 개발하려고 한다.

 

카카오 가이드 문서를 참고하면 쉽게 만들 수 있다.

https://developers.kakao.com/docs/latest/ko/kakaologin/js

 

기본적으로 카카오 내 애플리케이션 > 카카오 로그인이 활성화 되어있어야하고 정보 받을 항목을 동의항목에서 설정해주어야 한다.

 

나는 이름, 프로필 사진, 이메일을 설정했다.

 

그리고 플랫폼 메뉴에 들어가서 Web에 도메인을 넣어주어야 한다. 개발할땐 http://localhost를 넣어주어야 하지만 배포후 보안상을 위해 제거하도록 하자. 

 

설정 완료 후, sdk를 페이지에 포함시켜주어야 스크립트로 로그인 구현이 가능하다.

Kakao.init으로 초기화를 해줘야하는데 이때 값으로 javascript 키값을 넣어주어야한다.

보안상 넣어도 되나 싶었는데 플랫폼 설정에 넣어준 도메인만 적용되기때문에 여기서 localhost를 지워줘야 하는 이유를 떠올릴 수 있다.

 

isInitialized()는 true나 false를 리턴한다. 콘솔에 찍어서 확인할 수 있다.

 

 

이제 로그인 버튼을 달아준다.

직접 커스터마이징 해도 되지만 디자인 가이드에 나와있는 기본 버튼을 사용했다.

https://developers.kakao.com/tool/demo/login/login?method=dynamic 

데모를 통해 쉽게 얻을 수 있다.

<a id="custom-login-btn" onClick=핸들러>
  <img
    src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="242"
  />
</a>

 

이제 카카오 로그인을 붙여준다. 핸들러에 들어갈 함수다.

function loginWithKakao() {
    Kakao.Auth.login({
      success: function(authObj) {
        alert(JSON.stringify(authObj))
      },
      fail: function(err) {
        alert(JSON.stringify(err))
      },
    })
  }

 

 

처음 로그인 할 때 동의 항목이 나오는데 이미 테스트로 몇번 로그인해서 동의 항목은 캡처하지못했다.

로그인 성공하면 alert이 뜬다.

토큰 관련 정보가 나온다. 이제 콜백함수 안에 로그인 완료 후 넣고싶은 기능을 추가하면 끝이다.

 

나는 로그인 완료 후에 사용자 정보를 가져와서 회원인 경우 로그인 처리를, 아닌 경우 회원에 추가하고 로그인 처리를 할 계획이었다.

아래는 소스 코드다.

Kakao.Auth.login({
          success: function(authObj) {
            //alert(JSON.stringify(authObj))
            Kakao.API.request({
                url: '/v2/user/me',
                success: function(response) {
                    let id = "kakao_" + response.id;
                    let email = (response.kakao_account.email != undefined ? response.kakao_account.email : '');
                    
                    let properties = response.properties;
                    let name = properties.nickname;
                    let profile_image = properties.profile_image;
                    
                    let member = {
                        id : id,
                        password : id,
                        email : email,
                        name : name,
                        profile : profile_image,
                        snsyn : 'Y'
                    }
                    kakaoLogin(member).then(res => {
                        if(res.status == 200){
                            getLoginInfo().then(result => {
                                if(result.status == 200){
                                    setLoginInfo(result.data);
                                    closeLoginPop();
                                }
                            })
                        }
                    })

                },
                fail: function(error) {
                    console.log(error);
                }
            });
          },
          fail: function(err) {
            alert(JSON.stringify(err))
          },
        })

/v2/user/me로 사용자의 동의 받은 항목에 대한 정보를 가져올 수 있고, 그 정보로 member 변수를 정의해서 구현해놓았던 로그인 로직 처리를 했다.

 

프로필 이미지를 받은 이유는 로그인 완료 후 아바타에 넣어주기 위해서다.

로그인 전

로그인 후