카카오 로그인 API [TEAM PROEJCT]

카카오 로그인 API 의 흐름

카카오 로그인의 흐름은 간단하다.

리소스 오너(사이트)가 카카오 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 카카오 API 서버에 넘긴다.

전달받은 정보를 가지고 카카오 API 서버는 데이터를 식별하고 클라이언트가 인증에 성공한 데이터를 통해 5~6시간 로그인을 유지할 수 있는 토큰을 발급해 준다.

우리는 단순하게 이 토큰을 활용하면 됩니다.

 

먼저 카카오 개발자 사이트에서 애플리케이션을 세팅을 한 후 사이트 코드를 작성하면 된다.

만든 앱을 클릭하여 들어간 후 앱 설정의 플랫폼을 클릭하고, 카카오 로그인을 사용할 url을 등록한다.

(우리가 사용하는 로컬서버 http://localhost:8088로 등록)

 

url 등록 후 다음 사진처럼 실행

 

 

활성화가 되었기 때문에 이제 앱 키를 활용 가능

javascript키를 활용해서 이제 코드를 작성

 

CDN 추가 

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

 

<ul>
	<li onclick="kakaoLogin();">
      <a href="javascript:void(0)">
          <span>카카오 로그인</span>
      </a>
	</li>
	<li onclick="kakaoLogout();">
      <a href="javascript:void(0)">
          <span>카카오 로그아웃</span>
      </a>
	</li>
</ul>
<!-- 카카오 스크립트 -->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('8890a67c089173194979845f9389950d'); //발급받은 키 중 javascript키를 사용해준다.
console.log(Kakao.isInitialized()); // sdk초기화여부판단
//카카오로그인
function kakaoLogin() {
    Kakao.Auth.login({
      success: function (response) {
        Kakao.API.request({
          url: '/v2/user/me',
          success: function (response) {
        	  console.log(response)
          },
          fail: function (error) {
            console.log(error)
          },
        })
      },
      fail: function (error) {
        console.log(error)
      },
    })
  }
//카카오로그아웃  
function kakaoLogout() {
    if (Kakao.Auth.getAccessToken()) {
      Kakao.API.request({
        url: '/v1/user/unlink',
        success: function (response) {
        	console.log(response)
        },
        fail: function (error) {
          console.log(error)
        },
      })
      Kakao.Auth.setAccessToken(undefined)
    }
  }  
</script>

먼저 내 javascript키를 호출하고 초기화가 잘 되었는지 확인

키를 정확하게 입력하고, 카카오 디벨로퍼에서 앱 활성화가 잘 되었다면,

kakao.isInitKakao.isInitialized() 함수가 true를 반환

프로젝트에서 사용할 때에는 
카카오 로그인을 실행하고 만약 카카오 로그인한 회원의 정보를 담아서
AJAX를 통해 서버에서 DB에 들어 있는지 확인하고

DB에 들어있다면
로그인에 성공하고
아니라면 바로 회원가입을 시켜서 DB에 넣어주는 로직으로 구성했다.