spring board 프로젝트 security 적용

**시큐리티랑 css 나 js 등 같이 있으면 충돌남

Securityconfig에 설정하는 코드 작성해야 함.

//css, js, img 등 충돌 안 나게 하는 코드
@Bean
public WebSecurityCustomizer webSecurityCustomizer() {
    return (web) -> web.ignoring().requestMatchers("/js/**", "/css/**", "/img/**");
}

 

 회원가입 시 비밀번호 암호화 설정.

> 암호화 설정하려면 암호화 객체를 생성해야 함.

SecurityConfig에 @Bean으로 객체 등록해주면 됨.(위치 상관 없음)

//암호화 객체 생성
@Bean
public PasswordEncoder getPasswordEncoder() {

    return new BCryptPasswordEncoder();
}

회원가입 controller가 있는 MemberController에 암호화 객체 불러옴

//암호화 객체
@Autowired
private PasswordEncoder encoder;

회원가입 기능에 비밀번호 암호화 작업 코드 작성.

//회원가입
@PostMapping("/join")
public String join(MemberVO memberVO) {
    //비밀번호 암호화 작업
    String encodePw = encoder.encode(memberVO.getMemPw());
    memberVO.setMemPw(encodePw);

    memberService.joinMember(memberVO);

    return "redirect:/member/login";

}

 

 

시큐리티로 로그인 방식 변경

> 로그인 자동으로 실행시켜주는 userDetailsServiceImpl 생성해야 함.

시큐리티가 로그인 할 수 있게 UserDetails에 로그인 정보 세팅

 

로그인 할 정보를 조회하는 메소드 사용을 위해 mapper 수정

이전의 로그인하는 쿼리를 수정하면 됨.

<!-- 로그인 정보 조회 쿼리 -->
<select id="login" resultMap="member">
    SELECT MEM_ID
        , MEM_NAME
        , IS_ADMIN
        , MEM_PW
    FROM SPRING_BOARD_MEMBER
    WHERE MEM_ID = #{memId}

</select>

채워줄 빈 값이 하나로 줄었음

> Id값만 받아오게 MemberService 메소드 수정

//시큐리티 로그인
MemberVO login(String memId);

MemberServiceImpl도 동일하게 수정.

//시큐리티 로그인
@Override
public MemberVO login(String memId) {
    return sqlSession.selectOne("memberMapper.login", memId);	
}

 

UserDetailsServiceImpl로 돌아와서 로그인 정보 담기.

메소드 사용을 위해 memberService 객체 들고와야 함.

@Resource 어노테이션으로 객체 가져오기.

@Service("userDetailsService")//객체 생성
public class UserDetailsServiceImpl implements UserDetailsService {
	
	@Resource(name = "memberService")
	private MemberService memberService;
	
	@Override
	public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
		
		//로그인 정보 조회                     //로그인할 때 입력한 id를 매개변수로 받아옴
		MemberVO userInfo = memberService.login(username);
		
		//로그인 시 입력한 ID가 없는 계정인 경우 예외 강제 발생
		if(userInfo == null) {
			throw new UsernameNotFoundException("오류");
		}
		
		//로그인 정보 담기
		UserDetails user = User.withUsername(userInfo.getMemId())
								.password(userInfo.getMemPw())
								.roles(userInfo.getIsAdmin()) //권한이 'Y' / 'N' 으로 들어옴
								.build();
		
		return user;
	}

}

 

SecurityConfig에 회원가입 및 로그인 기능 모든 사용자 접근 허용하게 설정.

@Configuration
@EnableWebSecurity
public class SecurityConfig {
	
	@Bean
	public SecurityFilterChain filterChain (HttpSecurity security) throws Exception {
		
		//인증 인가 설정
		security.csrf().disable()
				.authorizeHttpRequests()
					.requestMatchers("/board/list"
							, "/member/join"
                            , "/member/login").permitAll()
					//.requestMatchers(HttpMethod.POST ,"/join").permitAll() POST 방식 이동경로만 사용하고 싶은 경우
					.anyRequest().authenticated()
				.and()
					.formLogin()
					.loginPage("/member/login")
					.usernameParameter("memId")
					.passwordParameter("memPw")
					.loginProcessingUrl("/loginProcess") //로그인 시도하는 경로랑, 로그인 하는 페이지 경로 같아도 됨.
					.defaultSuccessUrl("/member/loginResult", true) //무조건 해당 페이지로 이동하게 true 넣어줌
					//.failureUrl("/member/loginResult")
					.failureHandler(getFailureHandler()) //실패했을 때 클래스 실행 됨 (실패했을 때 클래스에서 여러 조작 가능)
					.permitAll();
		
		return security.build();
	}
	
	//암호화 객체 생성
	@Bean
	public PasswordEncoder getPasswordEncoder() {
		
		return new BCryptPasswordEncoder();
	}
	
	//css, js, img 등 충돌 안 나게 하는 코드
	@Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.ignoring().requestMatchers("/js/**", "/css/**", "/img/**");
    }
}

로그인 실패 시 지정한 클래스로 이동

FailureHandler 클래스 생성

이 클래스는 SimpleUrlAuthenticationFailureHandler 클래스를 상속 받아야 함

SimpleUrlAuthenticationFailureHandler 클래스는 실패 시 실행되는 메소드를 이미 가지고 있음.

해당 메소드 오버라이딩 해서 사용.

 

@Override					//요청 : 넘어오는 데이터 받기 가능	//응답
public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response,
        AuthenticationException exception) throws IOException, ServletException {
                                //예외 정보(로그인 실패 왜 했는지)
    super.onAuthenticationFailure(request, response, exception);
}

FailureHandler 클래스에 대한 객체를 만들어줘야 메소드를 실행할 수 있음.

Securityconfig로 돌아가서 실패 시 작동할 FailureHandler 객체 생성.

@Bean
//로그인 실패 시 실행되는 클래스 객체 생성
public FailureHandler getFailureHandler() {

    return new FailureHandler();
}

인증 인가 설정하는 코드에서 실패 시 FailureHandler 클래스 실행 되게 매개변수로 getFailureHandler 메소드 넣어줌.

이제 로그인 실패 시 작동할 코드를 FailureHandler에 작성.

//로그인 실패 시 자동으로 실행되는 클래스
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");
		
		//로그인 실패 시 페이지 이동
		//웹 상에서 적용되는 utf-8로 문자열 인코딩 해야 함. (인코딩 안 하면 위험한 데이터로 인식하여 안 넘어감)
		eMsg = URLEncoder.encode(eMsg, "UTF-8");
		setDefaultFailureUrl("/member/login?eMsg=" + eMsg + "&isError=true&memId=" + memId);
		
		System.out.println(eMsg);
		
		super.onAuthenticationFailure(request, response, exception);
	}
	
}

 

로그인 실패하면 다시 로그인 창으로 가게 됨.

페이지 이동할 때 오류 메시지와 isError(오류가 발생했는지 안 했는지 여부) 데이터를 가져가게 함.

그리고 이전에 입력한 id도 뜰 수 있게 id값도 가져간다.

 

MemberController 작성

로그인 페이지 이동 controller에서 오류 메시지, 오류 발생 여부 데이터 받을 수 있음.

오류 메시지 오류 발생 여부 데이터를 매개변수로 받아주고 넘어오는 데이터 필수값(실패 시만 넘어옴)이 아니기 때문에 @RequestParam 어노테이션 사용.

데이터 login.html로 넘기기.

넘어온 id 값은 커맨드 객체 memberVO에서 받아서 html로 자동 전달됨!

//로그인 페이지 이동
@GetMapping("/login")
public String loginForm(MemberVO memberVO
        //넘어오는 데이터 필수 X(로그인 실패 시만 넘어옴)
        , @RequestParam(required = false) String eMsg
        , @RequestParam(required = false, defaultValue = "false") String isError
        , Model model) { 

    model.addAttribute("eMsg", eMsg);
    model.addAttribute("isError", isError);


    return "content/member/login"; 
}

login.html에서 오류 메시지 데이터와 오류 발생 여부 뿌려줌.

th:field로 memId 설정되어 있기 때문에 이전에 입력한 id를 value 값으로 자동으로 가져옴

<div>아이디 <input type="text" th:field="*{memId}"></div>
<!-- 오류 메시지 -->
<div th:if="${isError}" th:text="${eMsg}"></div>
<div>비밀번호 <input type="password" th:field="*{memPw}"></div>
<div>
    <input type="submit" value="로그인">
    <input type="button" value="회원가입" th:onclick="|location.href='@{/member/join}';|">
</div>

 

로그인 실패하면 아래처럼 오류 메시지가 뜨고 이전에 입력한 id값 나옴

이제 시큐리티가 로그인 자동으로 해주기 때문에 MemberController의 로그인 controller 삭제

 

 

로그인 성공 시 상단에 로그인한 사람의 이름 뜨게 설정.

로그인 성공하면  /member/loginResult로 페이지 이동

MemberController에 페이지 이동 메소드 작성

//로그인 후 이동하는 페이지
@GetMapping("loginResult")
public String loginResult () {

    return "content/member/login_result";
}

login_result.html 수정

시큐리티 문법 쓰려면 html에 상단에 아래 코드 추가

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

시큐리티 문법 사용하여 로그인 성공 시 alert 창 뜨게 코드 변경. 

<!-- 로그인 성공 -->
<div sec:authorize="isAuthenticated()">
	<script type="text/javascript">
		alert('로그인 성공');
		location.href='/board/list';
	</script>
</div>

로그인 실패 시에 작동되는 이전에 작성한 코드는 지워도 됨!

 

다시 MemberController로 돌아와서 본격적으로 이름 뽑는 코드 작성.

로그인 후 이동하는 페이지 controller에서 로그인 성공 시 로그인한 사람의 이름을 찾아서 세션에 등록해야함.

시큐리티는 세션에 로그인한 사람이 아이디 값과 권한만 들고 있어서 바로 이름 뽑을 수 없음.

우선, 매개변수에 Authentication 추가 세션에 저장된 데이터 뽑기

//로그인 후 이동하는 페이지
@GetMapping("loginResult")
public String loginResult (Authentication authentication, HttpSession session) {

    //로그인 성공 시 로그인한 회원의 이름을 찾아서 세션에 등록
    User user = (User)authentication.getPrincipal();

    return "content/member/login_result";
}

현재 로그인한 아이디 같은 사람의 이름을 조회해야 됨.

member-mapper에서 이름 조회 쿼리 작성

<!-- 로그인한 사람 아이디 조회 -->
<select id="getUserNameById" resultType="String">
    SELECT MEM_NAME
    FROM SPRING_BOARD_MEMBER
    WHERE MEM_ID = #{memId}
</select>

MemberService 메소드 작성

//로그인한 회원 이름 정보
String getUserNameById(String memId);

MemberServiceImpl 메소드 구현

//로그인한 사람 이름 조회
@Override
public String getUserNameById(String memId) {

    return sqlSession.selectOne("memberMapper.getUserNameById", memId);
}

MemberController 작성 메소드 실행

조회한 회원 이름을 세션에 데이터 세팅

//로그인 후 이동하는 페이지
@GetMapping("loginResult")
public String loginResult (Authentication authentication, HttpSession session) {

    //로그인 성공 시 로그인한 회원의 이름을 찾아서 세션에 등록
    User user = (User)authentication.getPrincipal();
    String userName = memberService.getUserNameById(user.getUsername());
    
    //세션에 회원 이름 세팅
    session.setAttribute("userName", userName);
    
    return "content/member/login_result";
}

 header.html로 가서 로그인한 사람 이름 뿌려주면 됨.

<div sec:authorize="isAuthenticated()">
    [[${session.userName}]]님 반갑습니다.
    <a th:href="@{/member/logout}">LOGOUT</a> 
</div>

로그인 성공하면 아래처럼 상단에 이름 잘 가져옴.

 

시큐리티 로그아웃 기능 설정.

시큐리티가 자동으로 로그아웃 기능 해주기 때문에 MemberContoller의 이전에 작성한 로그아웃 컨트롤러 삭제

SecurityConfig 작성

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

    //인증 인가 설정
    security.csrf().disable()
            .authorizeHttpRequests()
                .requestMatchers("/board/list"
                                , "/member/join"
                                , "/member/login").permitAll()
                //.requestMatchers(HttpMethod.POST ,"/join").permitAll() POST 방식 이동경로만 사용하고 싶은 경우
                .anyRequest().authenticated()
            .and()
                .formLogin()
                .loginPage("/member/login")
                .usernameParameter("memId")
                .passwordParameter("memPw")
                .loginProcessingUrl("/loginProcess") //로그인 시도하는 경로랑, 로그인 하는 페이지 경로 같아도 됨.
                .defaultSuccessUrl("/member/loginResult", true) //무조건 해당 페이지로 이동하게 true 넣어줌
                //.failureUrl("/member/loginResult")
                .failureHandler(getFailureHandler()) //실패했을 때 클래스 실행 됨 (실패했을 때 클래스에서 여러 조작 가능)
                .permitAll() 
            .and()
                .logout()
                .logoutUrl("/member/logout")
                .invalidateHttpSession(true) //로그아웃 하면 세션 데이터 지우는 것
                .logoutSuccessUrl("/board/list");

    return security.build();
}

logoutUrl와 header.html의 로그아웃 경로 맞춰주면 됨!

로그아웃 버튼은 로그인 했을 때만 보여야하기 때문에 시큐리티 문법으로 설정.

 

 

추가적인 버튼 컨트롤

1. header.html의 로그인 및 회원 가입 버튼은 로그인 안 한 경우에만 보여야 됨.

시큐리티 문법 사용하여 로그인 안 한 경우에만 보이게 코드 작성.

2.board_list.html의 글등록 버튼 로그인 한 경우만 보이게 설정.

html 상단에 시큐리티 문법 코드 추가

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

 

아래처럼 로그인한 경우만 보이게 코드 추가.

 

 

 

글 상세 페이지

1. 상세보기 페이지에 하단에 게시글 수정, 삭제 버튼 컨트롤

로그인 되었을 때만 버튼 보이게 시큐리티 문법으로 설정

로그인한 사람이 글 작성한 사람과 일치 or 관리자인 경우(ROLE이 'Y')

수정, 삭제 버튼 보여야 하기 때문에 if문으로 조건 설정

<div th:if="${board.boardWriter == #authentication.name}">
    <input type="button" value="삭제" th:onclick="goDelete([[${board.boardNum}]]);">
    <input type="button" value="수정" th:onclick="goUpdate([[${board.boardNum}]]);">
</div>
    <!-- 로그인한 사람 == 관리자 -->
<div sec:authorize="hasRole('ROLE_Y')">
    <div th:if="${board.boardWriter !== #authentication.name}">
        <input type="button" value="삭제" th:onclick="goDelete([[${board.boardNum}]]);">
        <input type="button" value="수정" th:onclick="goUpdate([[${board.boardNum}]]);">
    </div>
</div>

 

2. 댓글 등록 버튼 로그인 했을 때만 보이게

스프링 보드 권한 n - 일반사용자 y - 관리자