카카오 로그인 API (1) - 자바스크립트에 API 가져오기

1️⃣ 카카오 developers에서 애플리케이션 추가

링크 접속 👉 애플리케이션 추가하기 👉 정보 입력 👉 저장

 

https://developers.kakao.com/console/app

 

 

 

 

 

2️⃣ 메뉴 - 카카오 로그인 설정

생성한 애플리케이션 클릭 👉 메뉴에서 카카오 로그인 클릭 👉 활성화 설정 ON 👉 Redirect URI 등록 👉 localhost로 설정

 

 

 

3️⃣ 메뉴 - 플랫폼 설정

메뉴에서 플랫폼 클릭 👉 Web 플랫폼 등록 👉 localhost 설정 저장

 

 

 

4️⃣ 메뉴 - 동의 항목 설정

메뉴에서 동의항목 클릭 👉 개인정보와 접근 항목에서 원하는 설정 클릭(닉네임, 프사는 필수) 👉 동의 단계 선택, 목적 작성 후 저장

 

5️⃣ 메뉴 - 앱 키에서 키 복사

메뉴에서 앱 키 클릭 👉 js 키 복사

 

 

6️⃣ js에 API 호출

1) API 소스

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

 

 

2)카카오 로그인, 로그아웃 버튼 구현

<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>

 

 

3)카카오 로그인, 로그아웃 함수 구현

<script>
Kakao.init('본인 키');
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>

 

 

✅ 결과

 

짠~ 카카오 로그인 화면이 뜬다.

물론 로그인 기능을 구현 안했으므로 다음으로 넘어가도 아무 일도 안일어난다.