[SpringBoot JSP] OPEN API (KaKao Login)

1. 회원가입

https://developers.kakao.com/

 

2. 내 애플리케이션 - 애플리케이션 추가하기

 

3. 카카오 로그인을 사용할 url을 등록 ( http://localhost:8181 )

 

4.  web 활성화 설정

 

5. 제품 설정에서 카카오 로그인- 동의 항목 - 동의 항목 설정

(원하는 정보 받고 싶은 것 필수 동의 또는 선택동의)

 

6. JavaScript 키 받아오기

 

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

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

 

8. 카카오 로그인, 로그아웃 로직

Kakao.init('발급받은 키 중 javascript키를 사용');

kakaoLogout(); // 로그인 페이지 접속시 로그아웃 시켜준다

<script>
//카카오로그인
function kakaoLogin() {
    Kakao.Auth.login({
      success: function (response) {
        Kakao.API.request({
          url: '/v2/user/me',
          success: function (response) {
        	  console.log(response)
              //(선택적) 이메일 필수 입력을 위한 코드 짜준다
              let email = response.kakao_account.email ;
              let kakaoId = response.id;

              if(email == '' || email == undefined){
                 alert("전체 동의하기 또는 카카오계정(이메일)을 필수 선택해주세요")
                 kakaoLogout();
              }else{
                 responseSuccessLogin(email, kakaoId);
              }
              
          },
          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>

 

9. 카카오아이디와 이메일을 받기 위한 ajax 로직 

<script>
function responseSuccessLogin(email, kakaoId) {

    $.ajax({

        type: 'POST',
        url: 'kakao/sns/login',
        data: {
            "email": email,
            "kakaoId": kakaoId
        },
        success: function(response) {
            // 로그인
            location.href = "/loginBykakao?email="+response.email;
        },
        fail: function(error) {

        },
    })
   </script>

 

10. ajax 통신 받기위한 @RestController 사용

@RestController
@RequiredArgsConstructor
public class kakaoLoginApiController {

    private final LoginApiService loginApiService;

    @ResponseBody
    @PostMapping(value="kakao/sns/login")
    public String responseSuccessLogin(String email, String kakaoId){
        Sign sign = loginApiService.checkUserByKakao(email,kakaoId);//checkUserByKakao 리턴 타입이 Sign
        return sign.getEmail();
    }
}

 

11. @Service에 카카오 로그인을 위한 로직 구성

//todo
// 1) 가입한 사람이 있는지 체크
// (이메일로 가입하고 카카오로그인으로 가입시킨사람을 연동시키기 위해서 따로 둘 수 없으니까)
// 2) 이메일로 가입했으면 카카오로그인만 회원가입 시킴
// 3) 이메일로 가입도 안된사람이라면 이메일가입과 카카오로그인 회원가입 둘다 시킴

public Sign checkUserByKakao(String email, String kakaoId){

    Sign checkInfo =signRepository.getUserInfo(email); //getUserInfo 리턴타입이 Sign

    if(checkInfo == null){ //이메일이 없는 사람 //즉,가입한 사람이 없으면 카카오아이디와 이메일 가지고 회원가입시킴

        Sign sign = new Sign();
        sign.setKakaoId(kakaoId);
        sign.setEmail(email);
        loginApiRepository.joinUserByKakao(sign); //insert쿼리문 이용
        return sign;

    }else{

        //이메일로 가입한 사람이 있으면 카카오아이디만 가지고 와서 회원가입 시킴

        if (checkInfo.getKakaoId() == null){
            // 카카오 아이디 업데이트
            checkInfo.setKakaoId(kakaoId);
            loginApiRepository.updateUserByKakao(checkInfo);
            return checkInfo;
        }else {
            // 카카오 아이디가 이미 존재하기 때문에 로그인만 진행
            return checkInfo;
        }
    }
}

12. @Repository 데이터 저장

 

13. xml(실제로 데이터베이스에 저장하기 위한 sql)

 

14. 반대방향 -> xml -> Repository -> service -> controller -> ajax : success

 

15. 세션 유지 확인

controller에 ajax : success 경로 매핑 -> Model에 담에서 해당 페이지로 연결해준다.

//ajax success 연결 매핑
// Model로 email을 넘겨줘야지 index페이지에서 이사람이 로그인이 된 사람인지 아닌지 확인가능
@GetMapping("/loginBykakao")
public String kakoLogin(String email, Model model){
    Sign sessionUser = signService.userLoginCon(email);
    model.addAttribute("sessionUser",sessionUser);
    return "index";
}

 

16.  해당페이지에서 model에 담은 sessionUser을 뿌려서 확인한다.

<c:if test="${empty sessionUser.email}">
    <p>로그인된 계정이 없습니다.</p>
</c:if>
<c:if test="${not empty sessionUser.email}">
    <p>
        ${sessionUser.email} 님 로그인 되었습니다.
    </p>
</c:if>

 

-----------------------------------------------------------------------------------------------------------------------------------

 

뷰 -> 컨트롤러(login) -> 서비스(새로운메서드:어떠한 로직을 위해)
-> 레퍼지토리로가서(로직에서 만든 데이터를 저장하기위해 만들어)
-> xml(실제로 데이터베이스에 저장하기 위한 sql)

// 여기서 반대방향으로 가는 경우는 리턴타입이 있을 경우
//서비스에서는 레퍼지토리에서 만든 리턴타입을 받아주는 곳
   리턴타입 받아서 변수방 쓰기