Shop 프로젝트 Security 적용

Spring

Shop 프로젝트 Security 적용

byeol_dev 2023. 4. 25. 12:16

gradle에 security 사용을 위해 아래 코드 추가

implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
testImplementation 'org.springframework.security:spring-security-test'

Security에서 자동 로그인 해주기 위해 memberController에 작성한 로그인 기능 코드 삭제

Security로 로그인에 맞춰서 쿼리 수정.

<select id="login" resultMap="member">
    SELECT MEM_ID
        , MEM_PW
        , MEM_ROLE
    FROM SHOP_MEMBER
    WHERE MEM_ID = #{memId}
    AND MEM_STATUS != 3 <!-- 탈퇴 계정이면 안 됨!  -->

</select>

SecurityConfig 클래스 생성

css, img, js와 security 충돌 막아주는 코드 작성.

//css,js,img security와 충돌 방지하는 코드
@Bean
public WebSecurityCustomizer webSecurityCustomizer() {
    return (web) -> web.ignoring().requestMatchers("/js/**", "/css/**", "/upload/**");
}

인증 인가 설정 코드 작성

@Configuration
@EnableWebSecurity
public class SecurityConfig {
	
	@Bean
	public SecurityFilterChain filterChain(HttpSecurity security) throws Exception{
		
		security.csrf().disable()
				.authorizeHttpRequests()
					.requestMatchers("/"
									, "/item/itemList"
									, "/item/itemDetail"
									, "/member/isDuplicateMemId" //id 중복 체크 페이지
									, "/member/join"
									, "/member/loginForm").permitAll()
					.requestMatchers("/admin/**").hasRole("ADMIN") //해당 권한만 들어올 수 있게 인가 설정.
									// /admin/* 코드 작성 시 
									// /admin/manage (O)
									// /admin/item/manage(x)
					//.requestMatchers("/admin/**").hasAnyRole("ADMIN", "MANAGER")) //둘 중 하나만 권한 있으면 들어올 수 있음
					.anyRequest().authenticated()
				.and()
					.formLogin()
					.loginPage("/member/loginForm")
					.usernameParameter("memId")
					.passwordParameter("memPw")
					.loginProcessingUrl("/member/login") //로그인 ajax와 동시 실행됨. 동일하게 ajax에서 이동 경로 맞춰주면 됨.
					.successHandler(getSucessHandler()) //로그인 성공 시 실행되는 클래스
					.failureHandler(getFailureHandler())
					.permitAll();
		
		return security.build();
	}
    
    //css,js,img security와 충돌 방지하는 코드
	@Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.ignoring().requestMatchers("/js/**", "/css/**", "/upload/**");
    }
	
	//비밀번호 암호화 객체 생성
	@Bean
	public PasswordEncoder getPasswordEncoder() {
		return new BCryptPasswordEncoder();
	}
	
	//로그인 실패 시 실행되는 클래스 객체 생성
	@Bean
	public FailureHandler getFailureHandler() {
		return new FailureHandler();
	}
	
	//로그인 성공 시 실행되는 클래스 객체 생성
	@Bean
	public SucessHandler getSucessHandler() {
		return new SucessHandler();
	}
    
  }

shop 프로젝트에서는 로그인을 ajax를 통해서 하고 있음

> 로그인 성공 및 실패 시 실행되는 클래스를 생성 해서 security 로그인 설정

- 로그인 성공

SucessHandler 생성

SimpleUrlAuthenticationSuccessHandler 인터페이스는 로그인 성공 시 실행되는 메소드를 가지고 있음.

이 인터페이스를 상속 받아서 메소드 오버라이딩.

로그인 성공 시 실행되는 SucessHandler 클래스는 로그인 ajax와 동시에 실행됨.

ajax를 통해 로그인하고 있기 때문에 로그인 성공 후 ajax의 success 구문으로 돌아가서 페이지 이동.

public class SucessHandler extends SimpleUrlAuthenticationSuccessHandler{
	
	//로그인 성공 시 실행되는 클래스
	@Override
	public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,
			Authentication authentication) throws IOException, ServletException {

		System.out.println("success handler 실행~");
		
		//자바에서 html 글자 그리는 코드
		PrintWriter p = response.getWriter();
		p.write("success"); //로그인 성공하면 이 클래스와 header.js의 ajax(로그인하는) 동시에 실행되기 때문에 로그인 후 success 구문으로 돌아감.
							//success라는 글자를 ajax의 success 구문 result로 받아가는 것.
		p.flush();
		
		//super.onAuthenticationSuccess(request, response, authentication);
	}
	
	
}

-로그인 실패

FailureHandler 생성

SimpleUrlAuthenticationFailureHandler 인터페이스는 로그인 실패 시 실행되는 메소드를 가지고 있음.

이 인터페이스를 상속 받아서 메소드 오버라이딩.

로그인 실패 시 실행되는 FailureHandler 클래스는 로그인 ajax와 동시에 실행됨.

로그인 실패 시 에러 메세지가 뜨게 예외처리 설정.

다시 로그인 페이지로 가도 이전에 입력한 id값 남아 있게 memId 데이터 가져가야함.

ajax를 통해 로그인하고 있기 때문에 로그인 실패 후 header.js의 로그인 ajax success 구문으로 돌아가서 오류 메시지를 화면에 뿌려준다.

//로그인 실패 시 자동으로 실행되는 클래스
public class FailureHandler extends SimpleUrlAuthenticationFailureHandler{

	@Override
	public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response,
			AuthenticationException exception) throws IOException, ServletException {
		
		//에러 메세지
		String eMsg = "";
		
		if(exception instanceof BadCredentialsException) {
			eMsg = "아이디 혹은 비밀번호를 확인하십시오.";
		}
		else if(exception instanceof UsernameNotFoundException) {
			eMsg = "계정이 존재하지 않습니다.";
		}
		else {
			eMsg = "알 수 없는 이유로 로그인에 실패하였습니다. 관리자에게 문의하십시오.";
		}
		
		//로그인 시 입력한 id값
		String memId = request.getParameter("memId");

		//java에서 html로 텍스트 보냄(?
		PrintWriter p = response.getWriter();
		p.write("fail");
		p.flush();
				
	}

}

header.js 수정

//로그인 함수
function login(){
						//joinModal에도 memId 있음 영역 정확하게 지정. 보통 겹치게 작성x
	const memId = document.querySelector('#loginModal #memId').value;
	const memPw = document.querySelector('#loginModal #memPw').value;
	
	//ajax start
	$.ajax({
		url: '/member/login', //요청경로 (security, ajax 코드 동시 실행됨.)
		type: 'post',
		data: { 'memId' : memId, 'memPw' : memPw }, //필요한 데이터
		//success는 함수를 정의한 것.
		success: function(result) {  //시큐리티 로그인 성공 후 실행되는 클래스에서 보낸 success 글자 result에 받아옴.
			//로그인 성공 시 true 
			if(result == 'success') { 
				location.href = '/'; //인덱스 컨트롤러 페이지로 이동 > 상품 목록 화면 이동
			}
			//로그인 실패 (아이디 밑 빨간 글자)
			else{
				//alert('로그인 정보를 확인하십시오.');
				
				//로그인 오류 메시지
				//로그인 실패 시 추가되는 div 태그 삭제(문구 실패한 수만큼 뜨는 것 방지)
				const error_div = document.querySelector('#errorDiv');

				if (error_div != null) {
					error_div.remove();
				}	
				
			//로그인 실패 시 오류 문구
			let str = '';
	        str += '<div id="errorDiv" style="color: red; font-size: 0.9rem;">';
	        str += '로그인 정보를 확인하십시오.';
	        str += '</div>';
	     
	        const login_error_div = document.querySelector('#loginErrorDiv');
	        login_error_div.insertAdjacentHTML('beforeend', str);
				
				
				//id, pw input 태그 초기화 (로그인 버튼 빼고 다 들고와야 돼서 All)
				//새로운 for문							//타입이 버튼인 것 제외하고 input 태그 다 선택.
				document.querySelectorAll('#loginModal input:not([type="button"])').forEach(function(t, index){
					t.value;  //input 태그 자체가 t임.
				});
				
				/*자주 쓰던 for문
				 const tags = document.querySelectorAll('#loginModal input:not([type="button"])');
				
				 for(const t of tags) {
					t.value = '';
				} */
				
				
			}
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
}

로그인 실패 시 아래처럼 아이디값 남아 있고, 로그인 정보 확인하라는 오류 메시지 뜸

header 부분 버튼 인증 인가 컨트롤

header.html에 시큐리티 문법 사용을 위해 아래 코드 추가

xmlns:sec="http://www.thymeleaf.org/extras/spring-security"

000님 반갑습니다. 문구 및 MYPAGE, LOGOUT 버튼 인증 됐을 때만 보이게 변경.

<span sec:authorize="isAuthenticated()">
    [[${#authentication.name}]]님 반갑습니다. <!-- 로그인한 사람 id -->
    <a th:href="@{/cart/cartList}">MY PAGE</a>
    <a th:href="@{/member/logout}">LOGOUT</a>
</span>

<span sec:authorize="isAnonymous()">
    <span data-bs-toggle="modal" data-bs-target="#loginModal" style="cursor: pointer;">LOGIN</span>
    <span data-bs-toggle="modal" data-bs-target="#joinModal" style="cursor: pointer;">JOIN</span>
</span>

Security 로그아웃 기능

우선 MemberController 로그아웃 코드 삭제

SecurityConfig에 로그아웃 시 설정 코드 추가

@Bean
public SecurityFilterChain filterChain(HttpSecurity security) throws Exception{

    security.csrf().disable()
            .authorizeHttpRequests()
                .requestMatchers("/"
                                , "/item/itemList"
                                , "/item/itemDetail"
                                , "/member/isDuplicateMemId"
                                , "/member/join"
                                , "/member/loginForm").permitAll()
                .anyRequest().authenticated()
            .and()
                .formLogin()
                .loginPage("/member/loginForm")
                .usernameParameter("memId")
                .passwordParameter("memPw")
                .loginProcessingUrl("/member/login")
                .successHandler(getSucessHandler())
                .failureHandler(getFailureHandler())
                .permitAll()
            .and()
                .logout()
                .logoutUrl("/member/logout")
                .invalidateHttpSession(true)
                .logoutSuccessUrl("/"); //

    return security.build();
}

각각controller 수정

session 정보 사용하는 것들 수정해야 함.

admincontroller 카테고리 관리 페이지 세션 메소드 지우기

id 뽑는 시큐리티 코드 사용.

//카테고리 관리 페이지
@GetMapping("/cateManage")
public String cateManage(Model model, AdminSubMenuVO adminSubMenuVO) {

    //관리자로 로그인 한 경우 첫 페이지 카테고리 페이지로 이동.(가져가는 데이터 X)
    //인덱스 컨트롤러에서 올 때는 데이터 없기 때문에 서브 메뉴 코드 데이터 넣기.
    adminSubMenuVO.setMenuInfo(ConstVariable.DEFAULT_MENU_CODE, ConstVariable.DEFAULT_SUB_MENU_CODE_1);

    //카테고리 목록 조회
    model.addAttribute("cateList", adminService.getCateListForAdmin());
    //model.addAttribute("menuCode", "MENU_001"); //인터셉터에서 데이터 받을 때 넘기는 데이터 이름이 key가 됨
    //model.addAttribute("MemberVO", new MemberVO());

    return "content/admin/cate_manage";
}

buycontroller 바로 구매 기능

memId 구하는 코드 수정

매개변수 authentication 추가 후 시큐리티 문법 사용

바로구매

선택구매

구매내역 페이지

cartController

장바구니 상품 등록

장바구니 페이지

config 인증 인가 수정

일반 회원이 url 주소를 알고 있으면 admin 관련 페이지 이동 가능

설정해줘야 함.

아래 코드 추가

.requestMatchers("/admin/**").hasRole("ADMIN") //해당 권한만 들어올 수 있게 인가 설정.

user로 로그인 해도 이제 권한 없어서 오류처럼 페이지 뜸

인가가 안 나서 튕겼을 경우

권한 없다고 알려주는 페이지 설정 가능.

indexController에 컨트롤러 코드 추가

//미인가 시 이동할 페이지
@GetMapping("/accessDeny")
public String accessDeny() {

    return "content/access_deny";
}

content에 html 생성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>접근이 거부되었습니다.</h3>
<h5><a th:href="@{/}">홈으로 가기</a></h5>
</body>
</html>

시큐리티 적용 후 기능 오류 잡기

- 관리자 로그인 시 관리자 상단 메뉴 오류

header.html 수정

로그인 여부에 따라 메뉴 나오는 코드 수정 필요 session 안 쓰기 때문에 조건문 지워주고

시큐리티 문법 사용하여 아래처럼 코드 수정

<ul class="navbar-nav">
<!-- 로그인 X -->
<th:block sec:authorize="isAnonymous()">
    <th:block th:each="category : ${categoryList}">
        <li class="nav-item">
            <a class="nav-link">[[${category.cateName}]]</a> 
        </li>
    </th:block>
</th:block>

<th:block sec:authorize="isAuthenticated()">
    <!-- 로그인 O, 일반회원 -->
    <th:block sec:authorize="hasRole('ROLE_USER')">
        <th:block th:each="category : ${categoryList}">
            <li class="nav-item">
                <a class="nav-link">[[${category.cateName}]]</a> 
            </li>
        </th:block>
    </th:block>
    <!-- 로그인 O, 관리자 -->
    <th:block sec:authorize="hasRole('ROLE_ADMIN')">
        <th:block th:each="adminMenu : ${adminMenuList}">
            <li class="nav-item">
                <a class="nav-link" th:href="@{'/admin' + ${adminMenu.menuUrl}(menuCode=${adminMenu.menuCode})}">[[${adminMenu.menuName}]]</a> 
            </li>
        </th:block>
    </th:block>
</th:block>

</ul>

- 상품 상세 페이지 장바구니 클릭 시 로그인 인식 못 하는 오류

item_detail.html

장바구니 버튼 클릭 시 세션으로 memId 가져가게 되어 있음 > 수정

<input type="button" class="btn btn-outline-success" value="장 바 구 니" 						
    th:onclick="regCart([[${#authentication.name}]], [[${item.itemCode}]]);">

security는 로그인 하지 않은 상태에도 익명으로 임시 아이디를 가지기 때문에 유의!

연결된 item_detail.js의 regCart 함수 수정

익명으로 임시 아이디인 anonymousUser 경우에 로그인 하게 설정.