10) 카카오 로그인 API 사용하기(내 사이트 로그인 및 회원가입) - Spring Project(OTT Service)

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.

 

이전 글 목록

1) 주어진 RFP를 바탕으로 주제 선정 - Spring Project(OTT 서비스)
2) ERD 설계 - Spring Project(OTT 서비스)
3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)
4) 로그인, 로그아웃 기능 구현 - Spring Project (OTT 서비스)
5) 상세 페이지 및 회원 정보 수정 - Spring Project (OTT 서비스)
6) CRUD를 한번에 → 게시판 만들기(QNA게시판) - Spring Project(Mybatis) (OTT 서비스)
7) 게시판 페이징 처리 - Spring Project (OTT 서비스)
8) 카카오 지도 API 사용하기 - Spring Project (OTT 서비스)
9) (네아로) 네이버 로그인 API 활용 사이트 로그인 및 회원가입 - SPRING Project(OTT 서비스)

 

카카오 로그인 API 사용하기

---

아래의 카카오 공식 문서에서 자세한 사용법을 참조하자.

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

Kakao Developers

 

카카오 디벨로퍼에서 내 애플리케이션 생성 후

https://developers.kakao.com/

Kakao Developers

 

 

 

카카오 로그인 탭에서 활성화 설정 및, Redirect URI설정을 해 준다.

 

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

로그인을 사용할 view에서 카카오에서 제공되는 SDK를 추가해 준다.

 

 

사용하기

---

Kakao.init('my kakao Javascript KEY'); //발급받은 키 중 javascript키를 사용해준다.
//console.log(Kakao.isInitialized()); // sdk초기화여부판단
//카카오로그인 시 API 이용하여 정보 받아오기 - 02.10 장재호
//naverCallback.jsp와 같은 형식이니 참조하세요
function kakaoLogin() {
    Kakao.Auth.login({
      success: function (response) {
        Kakao.API.request({
          url: '/v2/user/me',
          success: function (response) {
        	  console.log(response);
        	  const id = response.id;
        	  const nickname = response.properties.nickname;
        	  const email = response.kakao_account.email;
        	  $.ajax({
        		  type : 'post',
        		  url : 'user/kakaoLogin',
        		  data : {"id" : id, "nickname" : nickname, "email" : email},
        		  dataType : 'text',
        		  success: function(result){
        			  if(result=="ok"){
        				  var newNickname = prompt('사용하실 닉네임을 입력해주세요');
        				  if(newNickname != null){
        					  $.ajax({
        						  type : 'post',
        						  url : 'kakaoSignUp',
        						  data : {"id" : id, "nickname" : newNickname, "email": email}
        					  });
        					  alert(newNickname + "님 환영합니다.");
        					  location.href = "/video/list";
        				  }
        				  else{
        					  location.href = "/user/signin";
        				  }
        			  }
        			  else{
        				  $.ajax({
        					  url : '/user/kakaoLogins',
        					  data : {"id" : id},
        					  dataType : 'text',
        					  type : 'post',
        					  success : function(data){
        						  console.log(data);
                				  alert(data + "님 반갑습니다.")
                				  location.href = "/video/list";
        					  }
        				  })

        			  }
        		  }
        		  
        	  })
          },
          fail: function (error) {
            console.log(error)
          },
        })
      },
      fail: function (error) {
        console.log(error)
      },
    })
  }

 

카카오 아이디로 로그인 시 아래의 해당 유저의 정보를 받아올 수 있으며

해당 정보들을 바탕으로 프로젝트 사이트의 가입처리 및 로그인 처리를 진행하였다.