230607 [Spring BOOT] 암호화, External Library(로그인 까지)

 

 

 

22_EncoderMember

 

설정 : db&logger, 세큐리티 체크 , jsp

 

- 회원가입

 

원래는 스프링 부트에 기본적인 login 그 페이지가 있는데

securityconfig 클래스에 빈등록하고 http.build 로 사용할거 하고 안사용할거 안사용한다 해주면 원래 jsp 로 돌아간다?

 

MemberDTO

@Alias("member")
public class MemberDTO {
	
	private String id;
	private String pw;
	private String name;
	private int age;
	private String gender;
	private String email;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
}

 

MemberController

@Controller
public class MemberController {
	
	Logger logger = LoggerFactory.getLogger(getClass());
	
	@Autowired MemberService service;
	
	
	@GetMapping(value="/")
	public String home() {
		return "login";
	}
	
	@GetMapping(value="/join.go")
	public String joinForm() {
		return "joinForm";
	}
	
	@PostMapping(value="/join.do")
	public String join(MemberDTO dto) {
		service.join(dto);
		return "login";
	}

 

MemberService

@Service
public class MemberService {
	
	Logger logger = LoggerFactory.getLogger(getClass());
	
	@Autowired MemberDAO dao;
	
	@Autowired PasswordEncoder encoder;
	

	public void join(MemberDTO dto) {
		logger.info(dto.getId()+"/"+dto.getPw());
		// 암호화 시킨 다음에 dto 에 집어넣기
		String enc_pass = encoder.encode(dto.getPw());
		dto.setPw(enc_pass);
		int row = dao.join(dto);
		logger.info("join row : "+row);
	}

 

dao 생략

member_mapper

  <mapper namespace="kr.co.gudi.dao.MemberDAO">
   
	<insert id="join" parameterType="member">
		INSERT INTO member(id,pw,name,age,gender,email)
			VALUES(#{id},#{pw},#{name},#{age},#{gender},#{email})
	</insert>
    
   </mapper>

 

* 에러 

 

return http.httpBasic().disable().build();

 

(type=Forbidden, status=403)

=> url 에 엑세스 할 권한이 없기 때문 (springsecurity) 죽여줘야 할게 있음

 

SecurityConfig

@Configuration
@EnableWebSecurity
public class SecurityConfig {
	
	@Bean //암호화를 사용하기 위한 빈 등록
	public PasswordEncoder getPasswordEncoder() {
		return new BCryptPasswordEncoder();
	}
	
	// http 빌드를 리턴해줄건데 사용할건지 안할건지 정하는거?
	@Bean
	public SecurityFilterChain filterChain(HttpSecurity http) 
			throws Exception {
		
		// csrf 토근 기능을 disable 처리 해 줘야 403(권한 에러) 가 뜨지 않는다.
		// csrf(Cross Site Request Forgery) : 다른 사이트에서 내가 요청하지 않은 내용이 요청되는 해킹 방법
		// 예 : fishing 사이트에 들어갔다가 어떤 js 가 받아졌는데, 이게 버튼에 어떤 명령어를 심어 원치않는 동작을 하게 됨
		// 이거 방지하기 위해 csrf 토근을 발행 해 변조 된 페이지 인지 확인하게 된다.
		// js 로 피싱..?
		
		return http.httpBasic().disable().csrf().disable().build();
	}

}

 

 

* 에러 

 

return http.httpBasic().disable().build();

 

(type=Forbidden, status=403)

=> url 에 엑세스 할 권한이 없기 때문 (springsecurity) 죽여줘야 할게 잇음

 

SecurityConfig

회원가입 member db 확인

회원가입 - id : test0607 pw : 1234

 

 

 

---

 

로그인

matches 사용

controller

@PostMapping(value="/login.do")
	public String login (String id, String pw, HttpSession session, Model model) {
	   logger.info(id+"/"+pw);
	   String page = "login";
	      

	   if(service.login(id,pw)) {
	      page = "main";
	      session.setAttribute("loginId", id);
	   }else {
		  model.addAttribute("msg", "id 또는 pw 를 확인하세요.");
	   }
	      
	   return page;
	}

 

service

public boolean login(String id, String pw) {
		 
		 boolean success = false;
		 // 1. id 를 통해서 해당 암호화된 pw 를 가져온다.
		 String enc_pw = dao.login(id);
		 
		 // 2. 가져온 평문 pw 와 matches 를 통해 일치 여부를 확인한다.
		 if(enc_pw != null && !enc_pw.equals("")) {
			 success = encoder.matches(pw, enc_pw);
		 }
	     logger.info("encodePw : "+enc_pw);
	      
	     return success;
	   }

 

dao 생략

mapper

<select id="login" resultType="String">
      SELECT pw 
      	FROM member WHERE id = #{id}
   </select>

 

결과

id : test0607 pw : 1234

로그인 시

 

---

 

23_Editor (프로젝트 때 적용하기)

 

https://richtexteditor.com/Demos/https://richtexteditor.com/Demos/

Rich Text Editor Demos: Default Toolbar Config

 

 

설정 : db&logger 체크,jsp , static 폴더에 richtexteditor 폴더 붙여넣기 , static 에 img 폴더 만들어서 noimages 파일 붙여넣기

 

 

테이블 생성

이미지자체가 문자화 될것임

create table editor(

idx int(8) primary key

,user_name varchar(50)

,subject varchar(50)

,content longtext

,bHit int(8) default 0

,reg_date date default curdate()

);

 

 

BoardDTO

@Alias("board")
public class BoardDTO {
	
	/* data:image 방식은 일반 파일 용량보다 조금 더 크다.
	  그래서 longtext 타입을 사용할 것이다.(4GB 까지 수용)
	  
	  create table editor(
		idx int(8) primary key auto_increment
		,user_name varchar(50)
		,subject varchar(50)
		,content longtext
		,bHit int(8) default 0
		,reg_date date default curdate()
		);
	 */	
	
	
	private int idx;
	private String user_name;
	private String content;
	private int bHit;
	private Date reg_date;
	private String subject;
	
	
	
	
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getUser_name() {
		return user_name;
	}
	public void setUser_name(String user_name) {
		this.user_name = user_name;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public int getbHit() {
		return bHit;
	}
	public void setbHit(int bHit) {
		this.bHit = bHit;
	}
	public Date getReg_date() {
		return reg_date;
	}
	public void setReg_date(Date reg_date) {
		this.reg_date = reg_date;
	}
}

 

BoardDAO

@Mapper
public interface BoardDAO {

	int write(BoardDTO dto);

	ArrayList<BoardDTO> list();
}

 

BoardController

@Controller
public class BoardController {
	
	@Autowired BoardService service;
	
	Logger logger = LoggerFactory.getLogger(getClass());
	
	@GetMapping(value="/")
	public String home() {
		return "basic";
	}
	
	@PostMapping(value="/write.do")
	public ModelAndView write(BoardDTO dto) {
		
		logger.info(dto.getSubject()+"/"+dto.getUser_name());
		logger.info("content size : "+dto.getContent().length());
		return service.write(dto);
	}
	
	@GetMapping(value="/list.do")
	public ModelAndView list() {
		return service.list();
	}
}

 

BoardService

@Service
public class BoardService {

	@Autowired BoardDAO dao;
	
	Logger logger = LoggerFactory.getLogger(getClass());

	public ModelAndView write(BoardDTO dto) {
		ModelAndView mav = new ModelAndView();
		String page = "basic";
		
		
		if(dao.write(dto)>0) {
			page = "redirect:/list.do";
		}
		mav.setViewName(page);
		
		return mav;
	}

	public ModelAndView list() {
		
		ArrayList<BoardDTO> list = dao.list();
		ModelAndView mav = new ModelAndView("list");
		mav.addObject("list", list);
		
		return mav;
	}
}

 

Basic.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Editor</title>

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<link rel="stylesheet" href="/richtexteditor/res/style.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
	input[type="text"]{
		width : "100%";
		border : 1px solid lightgray;
	}
	table{
		magin-left : 45px;
	}
</style>
</head>
<body>
	<form id="bbs" action="/write.do" method="post">
		<table>
			<tr>
				<td><input type="text" name="user_name" placeholder="작성자 이름"/></td>
			</tr>
			<tr>
				<td><input type="text" name="subject" placeholder="제목을 적으세요"/></td>
			</tr>
			<tr>
				<td>
					<div id="div_editor"></div>
					<input id="content" type="hidden" name="content"/>
				</td>
			</tr>
			<tr>
				<td><input type="button" onclick="save()" value="저장"/></td>
			</tr>
		</table>
	</form>
</body>
<script>
	
	var config = {};
	config.editorResizeMode = "none"; // 에디터 크기 조절 : none
	
	// 파일 업로드
	config.file_upload_handler = function(file,callback){// file 정보, 이미지 경로 변경 함수
		console.log(file); // 크기,이름, 종류 등을 알 수 있다.
		// 1*1024*1024 : 1mb
		if(file.size > (1*1024*1024)){
			alert('1MB 이상의 파일은 올릴 수 가 없습니다.');
			// callback 함수를 사용하여 경로를 바꿀 수 있다.
			callback('img/noimage.png');
		}
	}
	
	var editor = new RichTextEditor('#div_editor',config);
	
	function save() {
	     console.log("저장");
	     var content = editor.getHTMLCode();
	     console.log(content.length);
	     if(content.length>(4*1024*1024)){
	    	 alert("컨텐츠의 크기가 너무 큽니다. 이미지의 크기나 갯수를 줄여주세요.");
	     }else{
	    	 $('input[name="content"]').val(content);
	    	 $('form').submit();
	     }
	  }

	
	/* data : image 방식
		장점 : 서버에서 별도의 파일처리 과정이 없어 사용이 간단하다.
		단점 : 용량제어가 어렵고, 기존파일보다 용량이 커진다.(base64 인코딩시 크기가 커진다.)
		
		tomcat 에서 post 방식으로 허용하는 기본 크기는 2MB 이다.(텍스트만...)
		data : image 를 사용하면 문자열의 크기가 커지기 때문에 controller 에서 null 로 받게 된다.
		
		해결방법 1 : server.xml 에서 Connector 에 maxPostSize="-1"(무제한) 
		을 해주거나 2MB(2*1024*1024) 보다 큰 수를 지정한다.
		
		해결방법 2 : 내장톰캣 사용 시 application.properties 에서 설정 해 준다.
	
	*/
</script>
</html>

 

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>spring boot</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>idx</th>
            <th>제목</th>
            <th>작성자</th>
            <th>조회수</th>
            
         </tr>
      </thead>
      <tbody>
      <c:forEach items="${list }" var="dto">
         <tr>
            <td>${dto.idx }</td>
            <td><a href="detail.do?idx=${dto.idx }">${dto.subject }</a></td>
            <td>${dto.user_name }</td>
            <td>${dto.bHit }</td>
         </tr>
      </c:forEach>
      </tbody>
   </table>
</body>
<script></script>
</html>

 

결과

 

작성 후 리스트

 

 

로거창

이미지 파일 이름이 겁나 길어서 짤린다.