51. 스프링시큐리티 로그인 페이지 커스터마이징

UserController

• 주소변경을 한다.
• 인증이 안된 사용자들이 출입할 수 있는 경로를 설정 ⇒ /auth/** 허용
• 그냥 주소가 / 이면 index.jsp 도 허용
• static 이하에 있는 resuouce 파일 js, css, image 폴더도 허용
• joinForm() - /auth 붙인다.
• loginForm() - /auth

 

UserApiController

• 주소변경을 한다.
• save() - “/api/user” → “/auth/joinProc” 로 변경한다.

 

UserService

로그인() 주석처리한다.

//    @Transactional(readOnly = true) // Select 할 때 트랜잭션 시장, 서비스 종료시에 트랜잭션 종료(정합성)
//    public User 로그인(User user) {
//        return userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
//    }

 

UserRepository

findByUsernameAndPassword() 주석처리한다.

// JPA Naming 전략
// Select * from user Where username = ? and password = ?;
// User findByUsernameAndPassword(String username,String password);

 

loginForm.jsp

• form태그 밖에 있던 submit버튼 form태그 안으로 위치 변경한다.
• form 태그에 속성 action 넣어준다.
• input 태그에 name 넣어준다.

<form action="/auth/loginProc" method="post">

    <div class="form-group">
      <label for="username">username:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
    </div>


    <button id="btn-login" class="btn btn-primary">로그인</button>

</form>

 

header.jsp

a 링크 href에 /auth 붙여준다.

<c:when test="${empty principal}">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="/auth/loginForm">로그인</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/auth/joinForm">회원가입</a>
        </li>
    </ul>
</c:when>

 

User.js

• #btn-login 클릭 이벤트 주석처리한다.
• 회원가입 url 변경한다.

$("#btn-login").on("click",()=>{ // function(){} 대신 ()=> 사용한 이유는 this를 바인딩하기 위해서
    this.login();
});

save: function(){
    // alert('user의 save호출됨');
    let data = {
        username: $("#username").val(),
        password: $("#password").val(),
        email: $("#email").val()
    }
    // console.log(data);

    $.ajax({
        type: "POST",
//            url: "/api/user",
        url: "/auth/joinProc",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function(resp){
        if(resp.status==5){
            alert("회원가입에 실패하였습니다.");
        }else{
            alert("회원가입이 완료 되었습니다.")
        }

        location.href="/";
    }).fail(function(error){
        alert(JSON.stringify(error));
    });


},// save end

 

SecurityConfig

config 패키지 생성, SecurityConfig 클래스 생성 후 아래 코드 추가한다.

// 빈등록: 스프링 컨테이너에서 객체를 관리할 수 있게 하는 것

@Configuration // IoC
public class SecurityConfig {

    @Bean
    public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
        return authenticationConfiguration.getAuthenticationManager();
    }

    @Autowired
    private PrincipalDetailService principalDetailService;

    @Bean
    BCryptPasswordEncoder encodePWD() {
        return new BCryptPasswordEncoder();
    }

    // 시큐리티가 대신 로그인해주는데 pw를 가로채기를 하는데
    // 해당 pw가 뭘로 해쉬가 되어 회원가입이 되었는지 알아야
    // 같은 해쉬로 암호화해서 DB에 있는 해쉬랑 비교할 수 있음

//    @Bean
//    protected void configure(AuthenticationManagerBuilder auth) throws Exception{
//        auth.userDetailsService(principalDetailService).passwordEncoder(encodePWD());
//    }



    @Bean
    SecurityFilterChain configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeRequests()
                .antMatchers("/","/auth/**","/js/**","/image/**","/css/**","/dummy/**") // 누구나 밑에 코드는 들어갈 수 있는 페이지 설정
                .permitAll()
                .anyRequest()
                .authenticated()
            .and()
                .formLogin()
                .loginPage("/auth/loginForm")
                .loginProcessingUrl("/auth/loginProc") // 스프링 시큐리티가 해당 주소로 요청오는 로그인을 가로채서 대신 로그인 해준다.
                .defaultSuccessUrl("/");
        return http.build();
    }

}

 

application.properties

spring.jpa.hibernate.ddl-auto를 다시 한 번 create 로 바꾸고 run 한 후 update로 바꿔준다.

why?? 비밀번호를 해쉬 암호화해서 넣을 예정이기 때문이다.

spring.jpa.hibernate.ddl-auto=create

spring.jpa.hibernate.ddl-auto=update