카카오 로그인 기능, 업데이트 뉴스 소식 팝업창 ( 쿠키로 관리) 기능 추가

이번에 카카오 로그인 기능과  소식 팝업창 기능을 추가하였다 .

 

 

 

 

카카오 쪽은

OAuth2를  사용해서 구현 해주었다. 

그래서 카카오에서 로그인 될때마다 로그인 처리를 해주었다.

첫 로그인 하는 카카오 ID 라면 db 에 유저 정보를 새롭게 저장하고

 이미 있다면 db 에 있는 내용을 찾아서 그정보로 로그인 하게 하였다. 

 

그리고 쿠키를 직접 써보았다.

원래 스프링시큐리티 에서 쿠키와 세션 처리를 다해주었기 때문에 

간단한 쿠키 사용법이라도 한번 써보고자 해서 작은 기능을 넣었다.

 

원리는 엄청 간단하다.

 

일단 사진에 있는 체크 박스를 하고 창을 닫으면 

그 정보가 서버에 전송되게 하였다.

@PostMapping("/stop/newsPopup")
@ResponseBody
public String stopPopup(HttpServletResponse res){
    System.out.println("쿠키 생성");
    Cookie cookie = new Cookie("newsPopup","stop");

    cookie.setDomain("localhost");
    cookie.setPath("/");
    // 10초간 팝업 정지
    cookie.setMaxAge(10);
    cookie.setSecure(true);
    res.addCookie(cookie);
    return "소식 팝업 정지";
}

그럼 이렇게 쿠키가 생성 되고 일단 테스트여서 10초간 이 쿠키가 유지되게 하였다.

 

그리고 페이지가 로드 될떄 js 에서 

@GetMapping("/newsCookies")
@ResponseBody
public String getNewsCookies(HttpServletRequest req){
    System.out.println("asdasd");
    Cookie[] cookies = req.getCookies();
    if (cookies != null) {
        for (Cookie cookie : cookies) {
            if(cookie.getName().equals("newsPopup")){
                System.out.println("쿠키 있음");
                //팝업 정지를 원하는 쿠키가 존재하면 참 반환
                return "{\"message\": \"true\"}";
            }
        }
    }
    System.out.println("쿠키 없음");

    return "{\"message\": \"false\"}";
}

이 api 를 호출하게 하였다. 

 

그래서 js 에서는 

window.onload = function() {
    if(getJson("/newsCookies","").message=="true") {

        //이게 참이면 쿠키가 있으니 팝업창 안뛰움
    }
    else {
               layerPop('newsPopup');

    }

};

 

이렇게 만들었다.  서버에서는 newsPopup 이라는 쿠키가 있으면 아직 쿠키가 있다는 것이니 

팝업을 안띄우게 했다.!! 

이렇게 별로 중요하지 않는 정보는 쿠키로 저장하게 해서 매우 간편했다.!