[자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp

실제 구현 예

 카카오 로그인 API (OAuth 2.0)

 

 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 카카오 로그인을 구현해 보겠습니다.

 

 

카카오 로그인 API 흐름

 

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

 

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

 

 

카카오 로그인 API 사용을 위한 애플리케이션 설정

 

 개발의 흐름은 먼저 카카오 개발자 사이트에서 애플리케이션을 세팅을 한 후 사이트 코드를 작성해 주면 됩니다.

 

먼저 아래 사이트에서 회원가입을 합니다.

https://developers.kakao.com/

 

회원가입 후 내 애플리케이션 - 애플리케이션 추가하기에서 자유롭게 입력 후 저장합니다.

(* 차후 카카오 비즈니스로 업그레이드하실 것이 아니라면 아무렇게나 입력해도 무방합니다.)

 

 

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

(테스트를 위해 저는 http://localhost:8181로 등록했습니다.)

 

 

사진1

 

사진2

url 등록 후 아래 버튼을 클릭한 후(사진 1)활성화(사진 2)를 해주시면 됩니다. 

 

마지막으로 제품 설정에서 카카오 로그인- 동의 항목 - 동의 항목 설정을 해주시면 원하는 정보를 받을 수 있고, 앱 또한 활성화가 되었으므로 이제 정상적으로 카카오 로그인을 사용하실 수 있습니다.

 

(몇몇 항목들은 카카오 비즈니스로 가입하셔야 사용이 가능합니다. )

 

코드 - javascript & jsp

 

활성화가 되었기 때문에 이제 앱 키를 활용할 수 있습니다. javascript키를 활용해서 이제 코드를 작성합니다.

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

단순하게 해당 코드를 사용하고자 하는 html페이지나 jsp페이지에 붙여놓습니다.

 

<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를 반환해 줍니다.

 

그리고 아래는 카카오 로그인, 로그아웃에 대한 함수입니다. 위 예제만 잘 가공해서 사용한다면 멋진 카카오 로그인을 만드실 수 있습니다.

 

 

TIP

한번 로그인이 진행이되면 가입이되어, 동의 항목 없이 자동으로 넘어가집니다. 다시 처음부터 테스트를 해보고 싶으실 땐

accounts.kakao.com/weblogin/account/info

해당 사이트에서 연결 해제를 하고 다시 진행하시면 됩니다~

 

 

페이스북 로그인 구현 방법

tyrannocoding.tistory.com/50

[자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- Javascript,Jsp

 

구글 로그인 구현 방법

tyrannocoding.tistory.com/51

[자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- Javascript,Jsp

 

네이버 로그인 구현 방법

https://tyrannocoding.tistory.com/60

[자바스크립트] 네이버 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp, 로그아웃