36_Step : spring security로 로그인 기능 만들기(2)

 로그인 기능 만들기(1)에 살 붙이기 

 

35_Step에서 만들었던 것들은 로그인의 가장 기본적인 기능이기 때문에 이를 그대로 사용할 수가 없고, 이를 통해 로그인 기능이 원활하게 작동한다는 것을 확인했으면 이제 디자인적인 부분과 보안 관련 기능을 보강해야 한다.

첫 번째로 내가 만든 로그인 페이지로 전환과 두 번째로 로그인 할 때 ID와 password를 내가 회원가입할 때 기입한 문자로 가능하게 하는 기능을 삽입해야 한다.

 

1. 로그인 페이지 전환

resources의 하위 폴더에 있는 templates와 static 폴더에 본인의 css나 login,index 파일을 넣고 경로를 꼭꼭!! 잘 확인해서 링크를 연결해 준다.

 

 

 

 

이렇게 했으면 본인이 만든 페이지로 전환이 되었으니 디자인적인 부분은 해결이 됐다고 볼 수 있다. 그런데 여기서 끝내면 안되고, WebSecurityConfig에 내가 만들어서 각각의 폴더에 알맞게 넣어놨으니 적용해 달라고 입력을 해야한다. 

 

 

.and()
    // 로그인 기능 허용
    .formLogin()
    .defaultSuccessUrl("/")
    .permitAll()

 

 

formLogin() 부분을 기존의 상태에서 로그인 페이지를 내가 만들어 놓은 페이지의 url을 입력해주고 접속이 실패할 수도 있으니 실패지 오류 메세지까지 띄어 놓는다. 

 

 

.and()
    // 로그인 기능 허용
    .formLogin()
    .loginPage("/user/login")
    .defaultSuccessUrl("/")
    .failureUrl("/user/login?error")
    .permitAll()

 

 

WebSecurityConfig에 잘 입력을 했으면 이제 Controller를 생성하여 로그인 페이지와 기능이 연동되도록 만들어 준다.

UserController에서 다음과 같이 로그인 시 가져와서 연결될 페이지의 url과 회원가입 시 연결될 페이지의 url를 연동시켜준다. 본인이 설계한 url을 잘 맞춰서 기입해야 한다. 오타 발생하고 못찾으면 끔찍한 일이....

 

 

@Controller
public class UserController {
    // 회원 로그인 페이지
    @GetMapping("/user/login")
    public String login() {
        return "login";
    }
    // 회원 가입 페이지
    @GetMapping("/user/signup")
    public String signup() {
        return "signup";
    }
}

 

 

모두 바르게 입력했다면 연동 테스트를 거친 후 localhost:8080/해당url로 접속하여 본인의 페이지가 잘 나오나 확인한다.

이상하게 내가 만든 로그인 페이지가 나오지 않고 css가 적용이 안된 페이지가 나오거나 오류가 발생하는 경우가 있다.

 

 

 

 

내가 만든 페이지는 앞의 화면인데 이를 기대하고 실행시켰을 때 뒤의 화면이 나오게 되는 경우가 있다. 이러한 화면은 css파일이 적용되지 않을 때 발생하는 전형적인 모습이다.

 

 

개발자 도구의 network 화면

 

 

본인이 의도한 바와 같이 진행되지 않을 때는 개발자도구(f12)를 켜서 어떤 오류인지 확인하고 해결해야한다. 위의 경우처럼 연동은 잘 됐는데 css가 말썽일 때는 security가 보안상 css를 막아버리는 경우가 많다. 때문에 WebSecurityConfig에 가서 css가 보안을 해치지 않으니 별도의 허가없이 css 파일 사용을 허용한다는 말을 입력해 줘야한다.

 

 

http.authorizeRequests()
    // 어떤 요청이든 '인증'
    .anyRequest().authenticated()

 

 

기존의 코드에 image와 css를 허용한다는 문자를 입력해 주면 css 파일이 잘 적용되어 로그인 페이지가 본인이 만들었던 상태 그대로 보여질 것이다.

 

 

http.authorizeRequests()
    // image 폴더를 login 없이 허용
    .antMatchers("/images/**").permitAll()
    // css 폴더를 login 없이 허용
    .antMatchers("/css/**").permitAll()
    // 어떤 요청이든 '인증'
    .anyRequest().authenticated()

 

 

이렇게 하면 35_Step에서 security가 자동으로 만들어줬던 로그인 페이지가 아닌 내가 만든 페이지가 잘 나오게 된다.

디자인적인 부분은 해결됐고, 다음에는 회원가입 기능을 추가해서 security가 정해준 임의의 ID와 password가 아니라 내가 가입 때 기입한 정보를 가지고 로그인이 될 수 있도록 만들어보자!