카카오 로그인

detail.jsp 댓글삭제에 onclick 이벤트 추가한다. 댓글 리스트 ${reply.content} 작성자: ${reply.user.username} 삭제 Board.js replyDelete: function (boardId,replyId) { $.ajax({ type: "DELETE", url: `/api/board/${boardId}/reply/${replyId}`, dataType: "json", }).done(function (resp) { alert("댓글 삭제 완료되었습니다."); location.href = `/board/${boardId}`; }).fail(function (error) { alert(JSON.stringify(error)); }); }, BoardApiControl..

지난강의에서 댓글 작성시 해당 DB에 넣어야할 데이터들을 DTO로 만들어서 매개변수로 넣어서 댓글작성 완성했다. 하지만 Service에 값을 넣을때 Object를 찾아서 넣어야하기때문에 찾는것자체(=영속화)가 귀찮아진다. ReplyRepository JPA 에 mSave()란 것은 없다. 따라서 알려줘야한다. how? mSave()위에 @Query 를 붙여줘서 이것이 어떤 역할을 하는지 알려준다. 더보기 아래와 같은 error가 뜬다면 코드에 @Modifying 를 안붙여서이다. why? insert, delete, update를 하면 업데이를 한 개수를 리턴해준다. @Modifying @Query(value = "insert into meta_reply( userId, boardId,content) v..

지난강의에서.. 데이터를 받을 때 dto없이 넘겨왔다. 하지만 데이터 받을 때 컨트롤러에서 dto를 만들어서 받는게 좋다. 이 강의서 dto를 받지않은 이유는 OAuth 흐름을 알기위한 미니 프로젝트이기때문이다. ReplySaveRequestDto @Data @AllArgsConstructor @NoArgsConstructor public class ReplySaveRequestDto { private int userId; private int boardId; private String content; @Data @NoArgsConstructor @AllArgsConstructor @Builder public static class ResponseDto { // HttpStatus status; int ..

Board 댓글이 작성된 순서 내림차순으로 정렬되서 가져와야하기때문이다. @OrderBy("id desc") @JsonIgnoreProperties({"board"}) @OneToMany(mappedBy = "board",fetch = FetchType.EAGER,cascade = CascadeType.REMOVE) // mappedBy 연관관계의 주인이 아니다. private List replys; board.js replySave() 함수를 작성하면 되는데 가져올 때 해당 Board의 원글의 정보도 알아야한다. (몇 번째 원글인지) 따라서 detail.jsp 수정하여 해당 번호를 알 수 있도록 하자. $("#btn-reply-save").on("click",()=>{ this.replySave(); ..

DB - 댓글 데이터 넣기 댓글 리스트 목록을 보기위한 데이터를 먼저 넣는다. ReplayRepository public interface ReplyRepository extends JpaRepository { } BoardService 글 상세보기 시 해당글에 댓글도 같이 들고 와야한다. 하지만 BoardEntity를 보면 reply가 db에는 없지만 들고 오는것을 확인 가능하므로 따로 코드를 추가 할 필요없다. detail.jsp forEach를 사용하여 댓글리스트 출력한다. 댓글 리스트 ${reply.content} 작성자: ${reply.user.username} 삭제 여기서 문제점 Board - User, Reply // Reply - User, Board 서로 연관관계를 갖고있다. 지금은 문제..

detail.jsp 등록 댓글 리스트 내용 작성자: 지니 삭제

UserController kakaoCallback() 작성하였던것을 실행시켜보면 아래와 같은 결과가 나오는 것을 확인가능하다. 아래 결과로 나온 정보를 Object에 담을 것이다. OAuthToken model 패키지 하위에 OAuthToken.java 생성한다. package com.cos.blog.model; import lombok.Data; @Data public class OAuthToken { private String access_token; private String token_type; private String refresh_token; private String scope; private int expires_in; private int refresh_token_expires_in;..

loginForm.jsp static > image 폴더만들고 kakao 버튼 이미지 넣기 loginForm.jsp에 카카오 로그인 버튼을 만든다. 더보기 href=””에 링크를 넣어줘야하는데 그 링크는 카카오 문서 > 카카오 로그인 > 인증 코드 받기 에서 확인가능하다. UserController 위의 인증된 코드를 통해 액세스토큰을 부여받을 것이다. 어떻게 전달을 받아야하는가? Post 방식으로 key = value 데이터를 카카오 쪽으로 요청을 해야한다. Post방식이므로 a링크로 전달은 못한다. 이때 필요한 라이브러리가 RestTemplate 이다. 이것을 쓰면 Http 요청을 편하게 할 수있다. 예전에는 HttpsURLConnection을 통해 사용했다. (Retrofit2,OkHttp 라이브러..

OAuth2.0 설명을 하긴전 OAuth2.0 로그인을 한다면 인증처리 수고 덜 수 있다는 장점이 있으나 어떤 쇼핑몰이 있고 주소나 등급관리가 필요하다면 추가로 필요하다. OAuth란 무엇인가? 🤔 Open Auth로 인증 처리를 대신해준다 라는 개념이다. 홍길동이라는 클라이언트가 있고 블로그 서버가 하나 있다면 홍길동이 블로그에 로그인 요청을 하면 블로그는 로그인응답을 해준다. 하지만 OAuth는 조금 다르다. 홍길동이 Blog에 로그인 요청을 한다. Blog는 홍길동에게 로그인페이지를 보여준다. 홍길동은 로그인페이지에서 카카오로그인을 보고 카카오로그인 버튼을 누른다. (여기서 카카오 정보를 입력하고 동의창이 나온다. ) 카카오정보 입력 후 동의를 하면 카카오 API서버에 홍길동은 카카오로그인요청을 하..

카카오 개발자 센터 카카오 개발자 센터에 들어가서 애플리케이션 추가 REST API키 플랫폼 설정 등록 http://localhost8080 등록 Redirect URI 등록 http://localhost:8080/auth/kakao/callback Logout Redirect URI 등록(선택사항) http://localhost:8080/auth/kakao/logout 동의항목 설정 프로필정보(필수동의 체크, 동의목적 : 카카오 로그인 개발 테스트) email(선택 동의 체크, 동의목적 : 카카오 로그인 개발 테스트)

UserApiController 내용 추가 하기전에 회원정보를 수정하더라도 세션이 변경이 되지않아 로그아웃을 하고 다시 로그인해야지만 변경된 정보를 확인할 수 있었다. ⇒ 강제로 session에 값 저장하려 했으나 안됐다. ⇒ SecurityConfig에가서 authenticationManagerBean()을 bean등록과 override 해준 후 사용한다. 더보기 참고 @Autowired private AuthenticationManager authenticationManager; @PutMapping("/user") public ResponseDto update(@RequestBody User user) { userService.회원수정(user); // //여기서는 트랜잭션이 종료되기 때문에 DB에..

UserContrller @GetMapping("/user/updateForm") public String updateForm(){ return "user/updateForm"; } updateForm.jsp Stacked form username: Password: Email: 정보 수정완료 user.js $("#btn-update").on("click",()=>{ // function(){} 대신 ()=> 사용한 이유는 this를 바인딩하기 위해서 this.update(); }); update: function(){ let data = { id: $("#id").val(), username: $("#username").val(), password: $("#password").val(), email: ..