login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>login</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" th:href="@{/css/login.css}">
<script th:src="@{js/login.js}"></script>
</head>
<body>
<div class="login-container">
<h1>로그인</h1>
<form id="login-form" method="post">
<input type="text" name="id" id="id" placeholder="ID">
<input type="password" name="pwd" id="pwd" placeholder="Password">
<button class="login-btn" type="button" onclick="login()">로그인</button>
</form>
<div class="find-form">
<button class="findid-btn" type="button" onclick="findId()">아이디찾기</button>
<button class="findpwd-btn" type="button" onclick="findPwd()">비밀번호찾기</button>
</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]];
var messageType = [[${messageType}]];
var text = [[${text}]];
/*]]>*/
$(document).ready(function() {
if (message && messageType) {
Swal.fire({
title: message,
text: text,
icon: messageType
});
}
});
</script>
</body>
</html>
19번째 줄 : <button class="login-btn" type="button" onclick="login()">로그인</button> '로그인'버튼을 누르면
11번째 줄 : <script th:src="@{js/login.js}"></script> 는 login.js에 있는 login()함수를 호출한다.
login.js
// 로그인
function login() {
// 1. ID 필드가 비어 있는지 확인
if ($("#id").val() == "") {
swal.fire({
title: 'ID를 입력해 주세요',
icon: 'warning'
});
return false;
}
// 2. Password 필드가 비어 있는지 확인
else if ($("#pwd").val() == "") {
swal.fire({
title: 'Password를 입력해 주세요',
icon: 'warning'
});
return false;
}
// 3. 모든 필드가 채워졌다면 폼을 제출
$("#login-form").attr("action", "/login").submit();
}
$("#id") 로 ID 입력 필드의 값을 가져오고, .val() 메서드를 사용해 그 값을 확인합니다.
만약 값이 비어 있다면,
swal.fire({
title: 'ID를 입력해 주세요',
icon: 'warning'
});
를 사용해 경고 메시지를 표시하고 함수를 종료합니다.
return false; 를 통해 폼 제출이 중단한다.
Password 입력 필드 역시 같은 방식으로 확인합니다. 값이 비어 있을 경우 경고 메시지가 표시되고 함수가 종료되어, 사용자는 Password 필드를 입력해야 다음 단계로 넘어갈 수 있습니다.
$("#login-form").attr("action", "/login").submit(); > 모든 필드가 채워졌다면 $("#login-form") 의 action 속성을 /login으로 설정하고, submit() 메서드를 호출해 서버의 /login URL로 폼 데이터를 전송합니다. 이때, 서버는 이 데이터를 받아 로그인 처리를 하게 됩니다.
이 함수에서는 jQuery를 사용하여 #login-form의 action을 /login으로 설정하고, submit()을 호출해 Controller에 로그인 요청을 전송한다.
MemberRepository
@Query(value="SELECT * FROM member WHERE id =:id", nativeQuery=true)
Member findByLoginId(String id);
@Query 어노테이션을 사용해 데이터베이스에서 ID로 회원 정보를 검색.
nativeQuery=true 를 통해 네이티브 SQL을 사용합니다. "SELECT * FROM member WHERE id =:id" 쿼리는 id 값에 해당하는 회원 정보를 Member 객체로 반환.
MemberServiceImpl
@Override
public int loginId(Member vo) {
int result = -1;
// 회원 조회
Member member = memberRepo.findByLoginId(vo.getId());
if (member != null) {
if(member.getPwd().equals(vo.getPwd())) {
result = 1; // id, pwd 일치
} else {
result = 0; // pwd 불일치
}
} else {
result = -1; // id 없음
}
return result;
}
memberRepo.findByLoginId(vo.getId()) 를 호출해 id에 해당하는 회원 정보를 가져옵니다. 만약 해당 ID가 없으면 null이 반환됩니다.
if문을 통한 로그인 유효성 검사 :
- member != null && member.getPwd().equals(vo.getPwd()): id와 password가 모두 일치하는 경우, result를 1로 설정합니다.
- member != null && !member.getPwd().equals(vo.getPwd()): id는 있지만 password가 일치하지 않는 경우, result를 0으로 설정합니다.
- member == null: id 자체가 없는 경우, result를 -1로 설정하여 ID가 없음을 나타냅니다.
MemberController
@Autowired를 사용하여 Spring이 MemberService의 인스턴스를 자동으로 memberService 필드에 주입.
@Autowired
private MemberService memberService; MemberService의 메서드들을 사용할 수 있도록 한다.
// 로그인 처리
@PostMapping("/login")
public String loginAction(HttpSession session, Member vo, Model model) {
int result = memberService.loginId(vo);
model.addAttribute("message", null); // 초기화
if(result == 1) {
Member user = memberService.getMember(vo.getId());
session.setAttribute("loginUser", user); // 세션에 로그인 사용자 정보 저장
return "redirect:/main";
} else if(result == -1) {
model.addAttribute("message", "ID가 존재하지 않습니다.");
model.addAttribute("messageType", "warning");
} else {
model.addAttribute("message", "비밀번호가 틀립니다.");
model.addAttribute("messageType", "error");
}
return "login/login";
}
@PostMapping("/login") : /login URL로 들어오는 POST 요청을 @PostMapping을 통해 처리.
memberService.loginId(vo); : 로그인 요청을 처리하고, 결과값 result를 반환받습니다.
이때 Member 객체 vo는 login.html에서 사용자가 입력한 ID와 Password.
- result == 1: ID와 비밀번호가 일치하는 경우, memberService.getMember(vo.getId())를 호출하여 사용자 정보를 가져오고, session.setAttribute("loginUser", user)로 세션에 사용자 정보를 저장합니다. 이후 홈 화면으로 리다이렉트합니다.
- result == -1: ID가 존재하지 않는 경우, Model 객체에 "ID가 존재하지 않습니다." 메시지와 messageType을 "warning"으로 추가하고, 다시 로그인 페이지로 이동합니다.
- result == 0: 비밀번호가 일치하지 않는 경우, 오류 메시지와 messageType을 "error"로 설정하여 로그인 페이지로 돌아갑니다.
- 로그인 요청을 처리하는 Controller에서 로그인 결과에 따라 message, messageType, text 값을 설정합니다. 이 값들은 Model 객체에 저장되어 HTML로 전달됩니다.
login.html에서 26번째 줄에 있는
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]];
var messageType = [[${messageType}]];
var text = [[${text}]];
/*]]>*/
$(document).ready(function() {
if (message && messageType) {
Swal.fire({
title: message,
text: text,
icon: messageType
});
}
});
</script>
Spring Boot와 SweetAlert2를 활용한 로그인 결과
ID가 존재하지 않을 때
비밀번호가 틀렸을 때
'SpringBoot 프로젝트' 카테고리의 다른 글
| Spring Boot - 리뷰 CRUD기능 구현하기 (3) (2) | 2024.11.19 |
|---|---|
| Spring Boot - 리뷰 CRUD기능 구현하기 (2) (0) | 2024.11.19 |
| Spring Boot - 리뷰 CRUD기능 구현하기 (1) (4) | 2024.11.18 |
| Spring Boot로 간단한 ID와 비밀번호 찾기 기능 구현하기 (0) | 2024.11.18 |
| Spring Boot로 회원가입 기능 구현 (2) | 2024.11.18 |