카카오 로그인 API를 사용하여 웹 애플리케이션에 로그인 구현하기

카카오 로그인 API를 사용하여 웹 애플리케이션에 손쉽게 로그인 기능을 구현할 수 있습니다. 이 기능을 사용하려면 몇 가지 단계를 따라야 합니다. 아래는 카카오 로그인 API를 이용한 웹 애플리케이션 로그인 구현에 대한 가이드입니다.

 

1. 카카오 개발자 계정 및 앱 생성

1) 카카오 개발자 사이트(https://developers.kakao.com/)에 접속하여 계정을 생성하고 로그인합니다.

2) 개발자 계정으로 로그인한 후 "내 애플리케이션"에서 새 애플리케이션을 생성합니다. 애플리케이션 이름과 플랫폼(웹)을 선택합니다.

3) 생성된 애플리케이션 설정에서 "플랫폼" 탭으로 이동하고 웹 플랫폼에 사이트 도메인을 추가합니다.
4) "일반" 탭에서 앱 키를 확인하고, 이 키를 사용하여 웹 애플리케이션에서 카카오 API를 호출할 수 있습니다.

 

2. 웹 페이지에 카카오 SDK 스크립트 추가

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

3. JavaScript 코드로 카카오 로그인 구현

<script>
Kakao.init('YOUR_KAKAO_APP_KEY'); // 앞서 생성한 앱 키를 사용합니다.

  // 카카오 로그인 함수
  function kakaoLogin() {
    Kakao.Auth.login({
      success: function (response) {
        // 로그인 성공 시 호출되는 콜백 함수
        Kakao.API.request({
          url: '/v2/user/me',
          success: function (response) {
            console.log(response); // 정상적으로 동작하면 response에 카카오 회원 정보가 담김 
            const email = response.kakao_account.email;
            sendEmailToServer(email);   
            // kakao계정의 email을 받아서 sendEmailToServer함수로 보냅니다.
            // sendEmailToServer함수는 제가 임의로 만든 함수입니다.(database의 user 테이블로 보내서 기존 회원인지 비교)
          },
          fail: function (error) {
            console.log(error);
          },
        });
      },
      fail: function (error) {
        console.log(error);
      },
    });
  }

  // 서버로 이메일 전송 함수
  function sendEmailToServer(email) {
    const emailData = {
      email: email
    };

    $.ajax({
      url: '/user/json/emailCheck', // 백엔드 서버의 API 엔드포인트 주소
      method: 'POST',
      data: JSON.stringify(emailData),
      contentType: 'application/json',
      success: function (response) {
        console.log('데이터 전송 성공:', response); // db에서 user 정보를 받음

        if (response.userId == null) {
          alert('회원이 아닙니다. 가입해주세요.');
          window.location.href = 'http://localhost:8080/user/addUserView.jsp'; // 회원가입 페이지로 이동
        } else if (response.userId != null) {
          alert('로그인되었습니다.');
          window.location.href = 'http://localhost:8080/index.jsp'; // 메인 페이지로 이동
        }
      },
      error: function (error) {
        console.log('데이터 전송 실패:', error);
      },
    });
  }
  </script>

 4. HTML 버튼으로 카카오 로그인 실행

<button onclick="kakaoLogin()">카카오로 로그인</button>

위 코드를 사용하면 카카오 로그인을 웹 애플리케이션에 통합할 수 있습니다. 사용자가 "카카오로 로그인" 버튼을 클릭하면 카카오 로그인 팝업이 나타나고, 로그인 후에는 사용자 정보를 가져와 서버로 전송합니다. 서버는 이 정보를 처리하고 로그인 또는 가입 여부에 따라 동작합니다.

카카오 로그인을 사용하면 사용자 경험을 향상시키고, 웹 애플리케이션에 간편한 로그인 기능을 제공할 수 있습니다. 이를 바탕으로 사용자의 로그인 상태를 관리하고 애플리케이션을 보안적으로 강화할 수 있습니다.