자바 스프링 로그인 기능 구현하기[모달]

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    

모달 연결 시 

link : 로는 CSS(스타일시트) 연결을 할 수 있다. 

Bootstrap의 스타일을 적용한다. 

이는 페이지의 레이아웃이나 디자인을 담당하게 된다. 

 

 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

script : 태그를 이용하여 JavaScript 기능을 활성화 시킬 수 있다. 

모달, 드롭다운 메뉴, 토글 기능 등과 같은 인터랙티브한 동작이 포함된다. 

 

 

<!-- 로그인용 모달 -->
    <div class="modal fade" id="loginModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5">LOGIN</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form action="<%= contextPath %>/member/login" method="post">
                <div class="modal-body">
                    <div class="mb-3">
                    <label for="userId" class="col-form-label">ID:</label>
                    <input type="text" class="form-control" placeholder="Enter ID.." id="userId" name="userId"/>
                    </div>
                    <div class="mb-3">
                    <label for="userPwd" class="col-form-label">PASSWORD:</label>
                    <input type="password" class="form-control" placeholder="Enter Password.." id="userPwd" name="userPwd" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">로그인</button>
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">취소</button>
                </div>
            </form>
          </div>
        </div>
      </div>

 

membr controller :  

 

@RequestMapping("/login")
public String loginMember(Member m, Model model, HttpSession session){

Member loginUser = mService.loginMember(m);

if(loginUser != null && 
bCrypt.matches(m.getUserPwd(), loginUser.getUserPwd())
) { session.setAttribute("loginUser", loginUser);

*  로그인 성공 시 session 영역에 저장한다
return"redirect:/";  =>  url 재요청 (메인페이지)
}else {  
// =>  Model 객체 : requestScope 
model.addAttribute("errorMsg", "로그인의 실패했습니다");

로그인 실패  시 request영역에 에러메세지 저장

return "common/errorPage"; => 에러페이지로 응답
}
}

service : 

필드  주입 방식으로 스프링 컨테이너에서 객체를 생성한다 

 

private final SqlSessionTemplate sqlSession;
private final MemberDao mDao;

 

public Member loginMember(Member m) {
sqlSession 객체 생성 --> 스프링 컨테이너 생성
Dao 객체에 sqlSession, 전달된 데이터 전달하면 요청
return mDao.loginMember(sqlSession, m);

 

public Member loginMember(SqlSessionTemplate sqlSession, Member m) {
return sqlSession.selectOne("memberMapper.loginMember", m);
}

 

암호화 처리 전 sql문 
SELECT * 
  FROM MEMBER
 WHERE USER_ID = #{userId} 
       AND USER_PWD = #{userPwd}
       AND STATUS = 'Y'

암호화 처리 후 sql문
SELECT * 
  FROM MEMBER
 WHERE USER_ID = #{userId} 
       AND STATUS = 'Y'
</select>