Spring Boot 쇼핑몰 프로젝트 | 로그인 기능 구현

---

 

🤓  UserDetailsService 구현

---

로그인 기능 구현 전에 먼저 UserDetailsService 인터페이스를 설정해야 된다!

 -> DB에서 회원 정보를 가져오기 위함!

 

유데미 클래스에서는 UserDetailsManager만 배웠는데,, 책에서는 UserDetailsService를 구현해서 무슨 차이인지 찾아봄..

UserDetailsService  VS.  UserDetailsManager

 

UserDetailsService는 Spring Security에서 사용자 정보를 가져오는 데 사용되는 인터페이스.

주요 메소드: loadUserByUsername(String username)

용도: 사용자 정보를 로드하기 위해 주로 로그인 과정에서 사용됨. 즉, 사용자가 로그인 시 입력한 사용자 이름을 기반으로 해당 사용자 정보를 데이터베이스에서 조회하는 역할.

 

UserDetailsManager는 UserDetailsService의 확장된 버전으로, 사용자 정보를 조회하는 것 외에도 사용자 추가, 수정, 삭제 등의 작업을 지원하는 인터페이스!

주요 메소드:

  • createUser(UserDetails user) 

  • updateUser(UserDetails user)

  • deleteUser(String username)

  • userExists(String username)

용도: 사용자 정보를 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 지원하며, 더 복잡한 사용자 관리 작업이 필요한 경우 사용됨

가장 많이 사용되는 구현체는 JdbcUserDetailsManager와 InMemoryUserDetailsManager

 -> JdbcUserDetailsManager를 구현하려 하다 user, authority 테이블 필요하다 해서.. 일단 나중에 refactoring 하면서 고쳐보기로함.. 🧐

 

• Service 패키지 아래 UserDetailsService를 구현한 CustomUserDetailsService 클래스 생성

@Service
@RequiredArgsConstructor
public class CustomUserDetailsService implements UserDetailsService {

    public final MemberRepository memberRepository;

    @Override
    @Transactional
    public UserDetails loadUserByUsername(String email) throws UsernameNotFoundException {
        Member theMember = memberRepository.findByEmail(email);

        if(theMember == null) {
            throw new UsernameNotFoundException(email);
        }

        return User.builder()
                .username(theMember.getEmail())
                .password(theMember.getPassword())
                .roles(theMember.getRole().toString())
                .build();

    }
}

 

  - email로 로그인 하기 때문에 파라미터를 email로 넘겨줌.!

  - 존재하지 않는 계정이면 예외처리.

  - User 객체로 변환하여 반환

  - 원래 책에는 MemberService 안에 넣어 줬는데, 나는 아예 따로 빼줌,, remember me 기능 구현에도 쓰이기 때문...!

 

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    private final CustomUserDetailsService customUserDetailsService;

    // 생성자 주입을 사용하여 의존성 주입
    public SecurityConfig(CustomUserDetailsService customUserDetailsService) {
        this.customUserDetailsService = customUserDetailsService;
    }
    
     @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

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

        http.formLogin(form ->
                form.loginPage("/members/login")
                        .defaultSuccessUrl("/")
                        .usernameParameter("email")
                        .failureUrl("/members/login/error")
        );

        http.logout(logout ->
                logout.logoutRequestMatcher(new AntPathRequestMatcher("/members/logout"))
                        .logoutSuccessUrl("/")
        );
    
    ...

 

  💡 Spring Framework에서는 @Autowired 보다 생성자 주입을 권장하고 있다. 이는 코드의 가독성을 높이고, 의존성 관리의 명확성을 보장.

 

  - Spring Security의 인증 과정에서 사용자의 로그인 요청이 들어오면, Spring Security는 UserDetailsService의 loadUserByUsername 메서드를 호출하여 사용자 정보를 조회.

 

 

 

로그인 페이지 생성

---

• templates/member/memberLoginForm.html 생성

    <form role="form" method="post" action="/members/login" novalidate>

        <i class="bi bi-chat-square-heart-fill fs-1" style="color: #FFCFE2;"></i>
        <h1 class="h3 mt-1 mb-3 fw-bold text-muted">Please sign in</h1>

        <div class="form-floating">
            <input type="email" name="email" class="form-control"
                   id="floatingInput" placeholder="name@example.com">
            <label th:for="email">Email address</label>
        </div>

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

        <div th:if="${loginErrorMsg}" class="error" th:text="${loginErrorMsg}"
             style="color: red; font-size: 15px"></div>

        <div class="form-check text-start my-3">
            <input class="form-check-input" type="checkbox" id="rememberMe" name="rememberMe">
            <label class="form-check-label" for="rememberMe">
                Remember me
            </label>
        </div>

        <button class="btn btn-light w-100 py-2 fw-bold text-muted" type="submit"
                style="background-color: #FFCFE2;">Sign in
        </button>
        <p class="mt-3 text-body-secondary">&copy; 2024</p>

    </form>

 

  - remember me 를 추가해서 브라우저를 껐다 켜도 로그인 상태 유지하도록 설정할 예정!

  

 

부트스트랩 모달창을 띄워서 로그인하고 싶었는데, ajax 작동이 잘 안됨.. 콘솔에 에러도 안뜨고 내용도 안 불러와져서 일단 패스..

부트스트랩 문제인지를 잘 모르겠다,, 다른 블로그 글 다 뒤져봤는데두 안나옴 ㅠ,ㅠ..data-bs-toggle과 data-bs-target 속성지정도 제대로 했고...onclick 속성 사용하면 ReferenceError: openLoginModal is not defined at HTMLAnchorElement.onclick 에러뜸 대환장 파티,,시간 너무 오래걸려 일단 나중에 다시 해보기로..ㅎ

 

 

 

MemberController 추가 코드 구현

---

• 회원가입 코드 구현한 곳 아래에 추가

    @GetMapping("/login")
    public String loginMember() {
        return "/member/memberLoginForm";
    }

    @GetMapping("/login/error")
    public String loginError(Model model) {
        model.addAttribute("loginErrorMsg", "Please enter a valid email or password");
        return "/member/memberLoginForm";
    }

 

- SecurityConfig에 로그인 성공시 리다이렉트 될 Url을 설정해줘서 PostMapping은 따로 작성 x

   -> 찾아보니 로그인 관련 설정을 SecurityConfig에서 한 곳에서 관리할 수 있어 보안 설정과 관련된 모든 구성 요소를 쉽게 찾을 수 있어서 이렇게 쓰이는듯!

 

- login/error 경로에 대한 GET 요청이 들어오면 loginError 메서드가 호출 -> 이 메서드는 Model에 오류 메시지를 추가하고 /member/memberLoginForm 템플릿을 반환 -> 렌더링 후 loginErrorMsg가 존재하면 <div> 요소가 표시되고, 오류 메시지가 사용자에게 빨간색으로 나타남

 

 

 

Test Code 작성

---

@SpringBootTest
@AutoConfigureMockMvc
@Transactional
@TestPropertySource(locations = "classpath:application-test.properties")
class MemberControllerTest {

    @Autowired
    private MockMvc mockMvc;

    @Autowired
    MemberService memberService;

    @Autowired
    PasswordEncoder passwordEncoder;

    public Member createMember(String email, String password) {
        MemberFormDTO memberFormDTO = MemberFormDTO.builder()
                .name("홍길동")
                .email(email)
                .password(password)
                .address("서울시 마포구 합정동")
                .build();

        Member member = Member.createMember(memberFormDTO, passwordEncoder);
        return memberService.saveMember(member);
    }

    @Test
    @DisplayName("로그인 성공 테스트")
    public void loginSuccessTest() throws Exception{
        String email = "test@email.com";
        String password = "1234";
        this.createMember(email, password);
        mockMvc.perform(formLogin().userParameter("email")
                        .loginProcessingUrl("/members/login")
                        .user(email).password(password))
                .andExpect(SecurityMockMvcResultMatchers.authenticated());
    }

    @Test
    @DisplayName("로그인 실패 테스트")
    public void loginFailTest() throws Exception {
        String email = "test@email.com";
        String password = "1234";

        this.createMember(email, password);
        mockMvc.perform(formLogin().userParameter(email)
                .loginProcessingUrl("/members/login/error")
                .user(email).password("12345"))
                .andExpect(SecurityMockMvcResultMatchers.unauthenticated());

    }

}

 

https://adjh54.tistory.com/347

[Java] Spring Boot MockMvc 이해하기 : 테스트 흐름 및 사용예제

https://docs.spring.io/spring-security/reference/servlet/test/mockmvc/result-matchers.html

SecurityMockMvcResultMatchers :: Spring Security

 

MockMvc 라이브러리 라는 것도 있었다는 것을 처음 깨달은,,🐰

테스트용으로 많이 쓰인다고 한다!

 

perform() : MockMvc를 사용하여 HTTP 요청을 실행

andExpect() : 컨트롤러의 응답을 검증

 

 

 

Remember Me 기능 구현

---

이왕 부트스트랩 디자인 긁어온거 책에는 안 나와있는 remember 기능 구현 해보자 싶어서 ... 🤓

  http.rememberMe(rememberMe -> rememberMe
                .rememberMeParameter("rememberMe") // default: remember-me, checkbox 등의 이름과 맞춰야함
                .tokenValiditySeconds(3600) // 쿠키의 만료시간 설정(초), default: 14일
                .alwaysRemember(false)); // 사용자가 체크박스를 활성화하지 않아도 항상 실행, default: false
//                .userDetailsService(customUserDetailsService)); // 기능을 사용할 때 사용자 정보가 필요함. 반드시 이 설정 필요함.

 

일단 SecurityFilterChain 안에 이 코드를 넣어줬다!

근데 작동이 안돼서 왜지.. 했는데 html에 input 코드에 id, name은 'rememberMe'로 설정 유지하고 기본적으로 설정되어 있던 value값을 삭제하니깐 작동이 되더라는... ;

 

 

버전 업그레이드 하면서 SecurityFilterChain 사용시 userDetailService 설정안해줘도 된다고 한다!!!

 

 

https://velog.io/@dailylifecoding/spring-security-remember-me

[Spring Security] Remember Me 인증

 

 

remember-me 쿠키가 생성되어야 성공!

 

 

 

 

 

내용 참고 : 책 '스프링 부트 쇼핑몰 프로젝트 with JPA'