최신글
hyeonga_code
reProject_08_회원 정보 찾기 기능 구현(아이디 찾기, 비밀번호 찾기) 본문
반응형
2023.12.23 - [Project] - reProject_08_회원 정보 찾기 기능 구현(아이디 찾기, 비밀번호 찾기)
reProject_07_로그인 기능 구현
2023.12.21 - 2023.12.22 2023.12.23 - [Project] - reProject_06_회원 가입 기능 구현 - 로그인 기능 구현 1. client_login.jsp 파일도 태그를 , 태그로 변경 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
hyeonga493.tistory.com
2023.12.21 - 2023.12.22
기존에 작업했던 form action 방식이 아닌 ajax로 처리
1.client_findInfo.jsp 수정 : <table>태그 수정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEATHERWEAR</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/w2/resources/client/client_js/client_findInfo.js"></script>
<link rel="stylesheet" href="/w2/resources/client/client_css/client_base_style.css">
<link rel="stylesheet" href="/w2/resources/client/client_css/client_findInfo_style.css">
</head>
<body>
<div class="container">
<%@ include file="/WEB-INF/views/client/base/client_header.jspf" %>
<div class="body">
<div class="client">
<h2>정보 찾기</h2>
<ul class="findInfo_ul">
<li><a id="findId">아이디 찾기</a></li>
<li>|</li>
<li><a id="findPwd">비밀번호 찾기</a></li>
</ul>
<!-- 전화번호로 아이디 찾기 -->
<div id="findInfo_id_num">
<form id="findIdNum" method="post" autocapitalize="none">
<div class="client_table findIdNum">
<ul class="client_table_ul">
<li class="client_table_th">이름 : </li>
<li class="client_table_td"><input type="text" name="clientName" placeholder="이름"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_th">전화번호 : </li>
<li class="client_table_td"><input type="text" name="clientNum" placeholder="전화번호"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><input type="submit" class="btn_form" value="아이디 찾기"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><a id="findId_email">이메일로 아이디 찾기</a></li>
</ul>
</div>
</form>
</div>
<!-- 이메일로 아이디 찾기 -->
<div id="findInfo_id_email">
<form id="findIdEmail" method="post" autocapitalize="none">
<div class="client_table">
<ul class="client_table_ul">
<li class="client_table_th">이름 : </li>
<li class="client_table_td"><input type="text" name="clientName" placeholder="이름"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_th">이메일 : </li>
<li class="client_table_td"><input type="text" name="clientEmail" placeholder="이메일"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><input type="submit" class="btn_form" value="아이디 찾기"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><a id="findId_num">전화번호로 아이디 찾기</a></li>
</ul>
</div>
</form>
</div>
<!-- 전화번호로 비밀번호 찾기 -->
<div id="findInfo_pwd_num">
<form id="findPwdNum" method="post" autocapitalize="none">
<div class="client_table">
<ul class="client_table_ul">
<li class="client_table_th">이름 : </li>
<li class="client_table_td"><input type="text" name="clientName" placeholder="이름"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_th">아이디 : </li>
<li class="client_table_td"><input type="text" name="clientId" placeholder="아이디"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_th">전화번호 : </li>
<li class="client_table_td"><input type="text" name="clientNum" placeholder="전화번호"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><input type="submit" class="btn_form" value="비밀번호 찾기"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><a id="findPwd_email">이메일로 비밀번호 찾기</a></li>
</ul>
</div>
</form>
</div>
<!-- 이메일로 비밀번호 찾기 -->
<div id="findInfo_pwd_email">
<form id="findPwdEmail" method="post" autocapitalize="none">
<div class="client_table">
<ul class="client_table_ul">
<li class="client_table_th">이름 : </li>
<li class="client_table_td"><input type="text" name="clientName" placeholder="이름"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_th">아이디 : </li>
<li class="client_table_td"><input type="text" name="clientId" placeholder="아이디"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_th">이메일 : </li>
<li class="client_table_td"><input type="text" name="clientEmail" placeholder="이메일"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><input type="submit" class="btn_form" value="비밀번호 찾기"></li>
</ul>
<ul class="client_table_ul">
<li class="client_table_li col"><a id="findPwd_num">전화번호로 비밀번호 찾기</a></li>
</ul>
</div>
</form>
</div>
<div id="result_div"></div>
</div>
</div>
<%@ include file="/WEB-INF/views/client/base/client_footer.jspf" %>
</div>
</body>
</html>
|
2. client_findInfo_style.css 수정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
@charset "UTF-8";
.client {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.client_table {
width: 400px;
}
.btn_form{
width: 100% !important;
}
.findInfo_ul {
list-style: none;
display: inline-block;
padding-left: 0px;
}
.findInfo_ul > li {
display: inline;
margin: 5px;
}
.findInfo_ul > li > a{
text-decoration: none;
color: grey;
}
#findInfo_id_num {
display: none;
}
#findInfo_id_email {
display: none;
}
#findInfo_pwd_email {
display: none;
}
#findInfo_pwd_num {
display: none;
}
.client_table {
}
.client_table_ul {
list-style-type: none;
display: flex;
justify-content: space-around;
padding-left: 0px;
}
.client_table_th {
margin: 2px;
width: 30%;
display: flex;
align-items: center;
justify-content: center;
}
.client_table_td {
margin: 2px;
width: 70%;
}
.col {
width: 100%;
}
#result_div {
display: none;
flex-direction: column;
}
.result_div_a {
text-decoration: none;
color: dimgrey;
cursor: pointer;
}
#resetPassword {
display: flex;
flex-direction: column;
align-items: center;
}
|
3. client_findInfo.js 파일 작성
-- 기본적으로 박아둔 table div도 모두 script로 그때그때 생성하는 방법을 생각했으나 현재 진행하기로 한 프로젝트 기간으로 인해 추후에 시도해보는 것으로 마무리리
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
|
$(document).ready(function(){
const findId_a = document.querySelector('#findId');
const findPwd_a = document.querySelector('#findPwd');
const findId_num = document.querySelector('#findId_num');
const findPwd_num = document.querySelector('#findPwd_num');
const findId_email = document.querySelector('#findId_email');
const findPwd_email = document.querySelector('#findPwd_email');
const findInfo_id_num = document.querySelector('#findInfo_id_num');
const findInfo_id_email = document.querySelector('#findInfo_id_email');
const findInfo_pwd_num = document.querySelector('#findInfo_pwd_num');
const findInfo_pwd_email = document.querySelector('#findInfo_pwd_email');
const result_div = document.querySelector('#result_div');
const showForm = (target) => {
findInfo_id_num.style.display = 'none';
findInfo_id_email.style.display = 'none';
findInfo_pwd_num.style.display = 'none';
findInfo_pwd_email.style.display = 'none';
result_div.style.display = 'none';
target.style.display = 'flex';
document.querySelectorAll("input[type='text']").forEach(input => {
input.value = '';
});
}
const select = (target) => {
findId_a.style.color="dimgrey";
findId_a.style.fontWeight="normal";
findPwd_a.style.color="dimgrey";
findPwd_a.style.fontWeight="normal";
target.style.color="dimgrey";
target.style.fontWeight="bold";
}
findId_a.addEventListener('click', () => {
showForm(findInfo_id_num);
select(findId_a);
});
findId_num.addEventListener('click', () => {
showForm(findInfo_id_num);
select(findId_a);
});
findId_email.addEventListener('click', () => {
showForm(findInfo_id_email);
select(findId_a);
});
findPwd_a.addEventListener('click', () => {
showForm(findInfo_pwd_num);
select(findPwd_a);
});
findPwd_num.addEventListener('click', () => {
showForm(findInfo_pwd_num);
select(findPwd_a);
});
findPwd_email.addEventListener('click', () => {
showForm(findInfo_pwd_email);
select(findPwd_a);
});
// 아이디 찾기
function findId(url_add, clientName, keyword){
$.ajax({
url: url_add,
type: "POST",
async: true,
dataType: "text",
data: JSON.stringify({
clientName : clientName,
keyword : keyword
}),
contentType: "application/json",
success: function(result){
console.log("ajax result : " + result);
const result_div = document.querySelector('#result_div');
if( result != "null"){
$("#result_div").html("<h3><font color='dimgrey'>고객님의 아이디는 <font color='blue'>"
+ result + "</font>입니다.</font></h3>"
+ "<h4><a class='result_div_a' href='/w2/clientLogin.do'>로그인하기</a></h4>");
} else {
$("#result_div").html("<h3><font color='dimgrey'>일치하는 정보가 존재하지 않습니다. 다시 시도해주세요.</font></h3>"
+ "<h4><a class='result_div_a' onclick='findId_num.click()'>아이디 찾기</a></h4>");
}
showForm(result_div);
},
error: function(error){
alert("아이디 찾기 중 오류가 발생했습니다.<br>다시 시도해주세요");
}
});
}
// 전화번호로 아이디 찾기
document.getElementById("findIdNum").addEventListener("submit", function(event){
// submit 기본 동작 방지
event.preventDefault();
let form = document.getElementById("findIdNum");
let url_add = "/w2/clientFindId.do?type=cNum";
let clientName = form.querySelector("input[name='clientName']").value;
let keyword = form.querySelector("input[name='clientNum']").value;
console.log("name : " + clientName);
console.log("keyword : " + keyword);
findId(url_add, clientName, keyword);
});
// 이메일로 아이디 찾기
document.getElementById("findIdEmail").addEventListener("submit", function(event){
// submit 기본 동작 방지
event.preventDefault();
let form = document.getElementById("findIdEmail");
let url_add = "/w2/clientFindId.do?type=cEmail";
let clientName = form.querySelector("input[name='clientName']").value;
let keyword = form.querySelector("input[name='clientEmail']").value;
console.log("name : " + clientName);
console.log("keyword : " + keyword);
findId(url_add, clientName, keyword);
});
// 전화번호로 비밀번호 찾기
document.getElementById("findPwdNum").addEventListener("submit", function(event){
// submit 기본 동작 방지
event.preventDefault();
let form = document.getElementById("findPwdNum");
let url_add = "/w2/clientFindPwd.do?type=cNum";
let clientName = form.querySelector("input[name='clientName']").value;
let clientId = form.querySelector("input[name='clientId']").value;
let keyword = form.querySelector("input[name='clientNum']").value;
console.log("clientName : " + clientName);
console.log("clientId : " + clientId);
console.log("keyword : " + keyword);
findPwd(url_add, clientName, clientId, keyword);
});
// 이메일로 비밀번호 찾기
document.getElementById("findPwdEmail").addEventListener("submit", function(event){
// submit 기본 동작 방지
event.preventDefault();
let form = document.getElementById("findPwdEmail");
let url_add = "/w2/clientFindPwd.do?type=cEmail";
let clientName = form.querySelector("input[name='clientName']").value;
let clientId = form.querySelector("input[name='clientId']").value;
let keyword = form.querySelector("input[name='clientEmail']").value;
console.log("clientName : " + clientName);
console.log("clientId : " + clientId);
console.log("keyword : " + keyword);
findPwd(url_add, clientName, clientId, keyword);
});
// 비밀번호 확인
function checkPwd(data){
// this로 받아오는 경우 값을 가져오지 않음
const clientPwd = document.getElementById("clientPwd");
const check = document.getElementById("checkPw");
if(data.value == clientPwd.value){
check.innerHTML = "<font color='green' size='2'><b>비밀번호가 일치합니다.</b></font>";
} else {
check.innerHTML = "<font color='red' size='2'><b>비밀번호가 일치하지 않습니다.</b></font>";
data.val('');
}
}
// 비밀번호 찾기
function findPwd(url_add, clientName, clientId, keyword) {
$.ajax({
url: url_add,
type: "POST",
async: true,
dataType: "text",
data: JSON.stringify({
clientName: clientName,
keyword: keyword,
clientId: clientId
}),
contentType: "application/json",
success: function(result){
console.log("ajax result : " + result);
if(result == "1"){
console.log("5. clientId : " + clientId);
$("#result_div").html("<form id='resetPassword' method='post'></form>");
$("#resetPassword").html("<h3>비밀번호 재설정</h3>"
+ "<div class='client_table'>"
+ "<ul class='client_table_ul'><li class='client_table_th'>비밀번호 : </li>"
+ "<li class='client_table_td'><input type='password' name='clientPwd' id='clientPwd' required='required' placeholder='비밀번호'></li>"
+ "<li class='client_table_info'></li></ul>"
+ "<ul class='client_table_ul'><li class='client_table_th'>비밀번호 확인 : </li>"
+ "<li class='client_table_td'><input type='password' name='clientCheckPwd' id='clientCheckPwd' required='required' placeholder='비밀번호 확인'></li>"
+ "<li class='client_table_info'><span id='checkPw'></span></li></ul>"
+ "<ul class='client_table_ul'><li class='client_table_li col'><input type='submit' class='btn_form' value='변경하기'></li></ul></div>");
} else {
$("#result_div").html("<h3><font color='dimgrey'>일치하는 정보가 존재하지 않습니다. 다시 시도해주세요.</font></h3>"
+ "<h4><a class='result_div_a' onclick='findPwd_num.click()'>비밀번호 찾기</a></h4>");
}
showForm(result_div);
// 비밀번호 변경하기
document.getElementById("resetPassword").addEventListener("submit", function(event){
// submit 기본 동작 방지
event.preventDefault();
let form = document.getElementById("resetPassword");
let clientPwd = form.querySelector("input[name='clientPwd']").value;
console.log("clientPwd : " + clientPwd);
$.ajax({
url: "/w2/clientSetPwd.do",
type: "POST",
async: true,
dataType: "text",
data: JSON.stringify({
clientPwd : clientPwd,
clientId : clientId
}),
contentType: "application/json",
success: function(result){
console.log("ajax result : " + result);
if(result == "1"){
$("#result_div").html("성공적으로 변경되었습니다. 3초 후 로그인 페이지로 이동합니다.");
setTimeout(function(){
location.href = "/w2/clientLogin.do";
}, 3000);
} else {
alert("비밀번호 변경 중 오류 발생");
}
},
complete: function(){
console.log("비밀번호 변경 완료");
}
})
});
},
error: function(error){
alert("비밀번호 찾기 중 오류가 발생했습니다.<br>다시 시도해주세요");
}
});
}
});
|
4. ClientPostController.java 작성
/** 아이디 찾기 */
@PostMapping("clientFindId.do")
public void clientFindId(@RequestBody Map<String, String> data, HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientFindId");
String type = request.getParameter("type");
String clientName = data.get("clientName");
String keyword = data.get("keyword");
String id = clientService.clientFindId(type, clientName, keyword);
System.out.println("4. [ Controller ] 결과 : " + id);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(id));
}
/** 비밀번호 찾기 */
@PostMapping("clientFindPwd.do")
public void clientFindPwd(@RequestBody Map<String, String> data, HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientFindPwd");
String type = request.getParameter("type");
String clientName = data.get("clientName");
String clientId = data.get("clientId");
String keyword = data.get("keyword");
int result = clientService.clientFindPwd(type, clientName, clientId, keyword);
System.out.println("4. [ Controller ] 결과 : " + result);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(result));
}
/** 비밀번호 변경 */
@PostMapping("clientSetPwd.do")
public void clientSetPwd(@RequestBody Map<String, String> data, HttpServletResponse response, ClientVO client) throws Exception {
System.out.println("1. [ Client Post Controller ] clientSetPwd");
client.setClientId(data.get("clientId"));
client.setClientPwd(pwden.encode(data.get("clientPwd")));
int result = clientService.clientSetPwd(client);
System.out.println("4. [ Controller ] 결과 : " + result);
response.setContentType("aaplication/json");
response.getWriter().write(String.valueOf(result));
}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
package com.w2.client.controller;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import com.w2.client.ClientService;
import com.w2.client.ClientVO;
@Controller
public class ClientPostController {
@Autowired
private ClientService clientService;
@Autowired // 비밀번호 암호화
private BCryptPasswordEncoder pwden;
/** 로그인 */
@PostMapping("clientLogin.do")
public String clientLogin(HttpServletRequest request) {
System.out.println("1. [ Client Post Controller ] clientLogin");
HttpSession session = request.getSession(false);
String id = request.getParameter("clientId");
String pwd = request.getParameter("clientPwd");
System.out.println("id : " + id + ", pwd : " + pwd);
ClientVO result = clientService.getClient(id);
if(result != null) {
System.out.println("4. [ Controller ] 아이디 존재");
if(pwden.matches(pwd, result.getClientPwd())) {
System.out.println("5. [ Controller ] 비밀번호 일치");
session.setAttribute("session", id);
System.out.println("6. [ Controller ] 세션 설정");
/** 세션 값 확인 방법
* session.getAttribute("session");
* session.getValue("session");
*/
// 최근 로그인 날짜 변경
clientService.setLogDate(id);
return "redirect:/clientMain.do";
}
System.out.println("5. [ Controller ] 비밀번호 불일치");
} else {
System.out.println("4. [ Controller ] 아이디 없음");
}
return "redirect:/clientLogin.do";
}
/** 아이디 찾기 */
@PostMapping("clientFindId.do")
public void clientFindId(@RequestBody Map<String, String> data, HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientFindId");
String type = request.getParameter("type");
String clientName = data.get("clientName");
String keyword = data.get("keyword");
String id = clientService.clientFindId(type, clientName, keyword);
System.out.println("4. [ Controller ] 결과 : " + id);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(id));
}
/** 비밀번호 찾기 */
@PostMapping("clientFindPwd.do")
public void clientFindPwd(@RequestBody Map<String, String> data, HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientFindPwd");
String type = request.getParameter("type");
String clientName = data.get("clientName");
String clientId = data.get("clientId");
String keyword = data.get("keyword");
int result = clientService.clientFindPwd(type, clientName, clientId, keyword);
System.out.println("4. [ Controller ] 결과 : " + result);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(result));
}
/** 비밀번호 변경 */
@PostMapping("clientSetPwd.do")
public void clientSetPwd(@RequestBody Map<String, String> data, HttpServletResponse response, ClientVO client) throws Exception {
System.out.println("1. [ Client Post Controller ] clientSetPwd");
client.setClientId(data.get("clientId"));
client.setClientPwd(pwden.encode(data.get("clientPwd")));
int result = clientService.clientSetPwd(client);
System.out.println("4. [ Controller ] 결과 : " + result);
response.setContentType("aaplication/json");
response.getWriter().write(String.valueOf(result));
}
/** 중복 체크 */
@PostMapping("clientCheck.do")
public void clientCheck(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientCheck");
String comp = request.getParameter("comp");
String with = request.getParameter("checkWith");
System.err.println("comp : " + comp + ", with : " + with);
int check = clientService.clientCheckService(comp, with);
System.out.println("5. [ Controller ] 결과 : " + check);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(check));
}
/** 회원 가입 */
@PostMapping("clientSignup.do")
public String clientSignup(HttpServletRequest request, ClientVO client, Model model) {
System.out.println("1. [ Client Post Controller ] clientSignup");
System.out.println("EmailCheck : " + request.getParameter("clientEmailCheck"));
// 신규 회원 기본 설정
client.setGradeId("S");
client.setClientPoint(3000);
if(request.getParameter("clientEmailCheck") != null) {
client.setClientEmailCheck("Y");
} else {
client.setClientEmailCheck("N");
}
// 비밀번호 암호화
client.setClientPwd(pwden.encode(client.getClientPwd()));
int result = clientService.clientSignup(client);
model.addAttribute("result", result);
if(result == 1 ) {
System.out.println("4. [ Controller ] 가입 성공");
return "client_login";
}
System.out.println("4. [ Controller ] 가입 실패");
return "client_signup";
}
}
|
5. ClientService.java 인터페이스 작성
// 아이디 찾기
public String clientFindId(String type, String clientName, String keyword);
// 비밀번호 찾기
public int clientFindPwd(String type, String clientName, String clientId, String keyword);
// 비밀번호 변경
public int clientSetPwd(ClientVO client);|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
package com.w2.client;
public interface ClientService {
// 중복 체크(아이디, 닉네임)
public int clientCheckService(String comp, String with);
// 회원 가입
public int clientSignup(ClientVO client);
// 회원정보 가져오기
public ClientVO getClient(String id);
// 최근 로그인 일자 저장
public void setLogDate(String id);
// 아이디 찾기
public String clientFindId(String type, String clientName, String keyword);
// 비밀번호 찾기
public int clientFindPwd(String type, String clientName, String clientId, String keyword);
// 비밀번호 변경
public int clientSetPwd(ClientVO client);
}
|
6. ClientServiceImpl.java 클래스 작성
// 아이디 찾기
@Override
public String clientFindId(String type, String clientName, String keyword) {
System.out.println("2. [ Impl ] : clientFindId");
HashMap<String, String> info = new HashMap<String, String>();
info.put("type", type);
info.put("clientName", clientName);
info.put("keyword", keyword);
return clientdao.clientFindId(info);
}
// 비밀번호 찾기
@Override
public int clientFindPwd(String type, String clientName, String clientId, String keyword) {
System.out.println("2. [ Impl ] : clientFindPwd");
HashMap<String, String> info = new HashMap<String, String>();
info.put("type", type);
info.put("clientName", clientName);
info.put("clientId", clientId);
info.put("keyword", keyword);
return clientdao.clientFindPwd(info);
}
// 비밀번호 변경
@Override
public int clientSetPwd(ClientVO client) {
System.out.println("2. [ Impl ] : clientSetPwd");
return clientdao.clientSetPwd(client);
}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
package com.w2.client.impl;
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.w2.client.ClientDAO;
import com.w2.client.ClientService;
import com.w2.client.ClientVO;
@Service
public class ClientServiceImpl implements ClientService {
@Autowired
private ClientDAO clientdao;
// 중복 체크(아이디, 닉네임)
@Override
public int clientCheckService(String comp, String with) {
System.out.println("2. [ Impl ] : clientCheckService : " + comp + " with : " + with);
HashMap<String, String> check = new HashMap<String, String>();
check.put("comp", comp);
check.put("with", with);
int result = clientdao.clientCheck(check);
if (result == 1) {
System.out.println("4. >> clientCheck 중복 : " + result);
} else {
System.out.println("4. >> clientCheck 가능 : " + result);
}
return result;
}
// 회원 가입
@Override
public int clientSignup(ClientVO client) {
System.out.println("2. [ Impl ] : clientSignup : " + client.toString());
return clientdao.clientSignup(client);
// 약관 동의
}
// 회원 정보 가져오기
@Override
public ClientVO getClient(String id) {
System.out.println("2. [ Impl ] : getClient : id : " + id);
return clientdao.getClient(id);
}
// 최근 로그인 일자 저장
@Override
public void setLogDate(String id) {
System.out.println("7. [ Impl ] : setLogDate");
clientdao.setLogDate(id);
}
// 아이디 찾기
@Override
public String clientFindId(String type, String clientName, String keyword) {
System.out.println("2. [ Impl ] : clientFindId");
HashMap<String, String> info = new HashMap<String, String>();
info.put("type", type);
info.put("clientName", clientName);
info.put("keyword", keyword);
return clientdao.clientFindId(info);
}
// 비밀번호 찾기
@Override
public int clientFindPwd(String type, String clientName, String clientId, String keyword) {
System.out.println("2. [ Impl ] : clientFindPwd");
HashMap<String, String> info = new HashMap<String, String>();
info.put("type", type);
info.put("clientName", clientName);
info.put("clientId", clientId);
info.put("keyword", keyword);
return clientdao.clientFindPwd(info);
}
// 비밀번호 변경
@Override
public int clientSetPwd(ClientVO client) {
System.out.println("2. [ Impl ] : clientSetPwd");
return clientdao.clientSetPwd(client);
}
}
|
7. CilentDAO.java 클래스 작성
// 아이디 찾기
public String clientFindId(HashMap<String, String> info) {
System.out.println("3. [ Client DAO ] clientFindId : " + info.toString());
return sqlSessionTemplate.selectOne("ClientDAO.clientFindId", info);
}
// 비밀번호 찾기
public int clientFindPwd(HashMap<String, String> info) {
System.out.println("3. [ Client DAO ] clientFindPwd : " + info.toString());
return sqlSessionTemplate.selectOne("ClientDAO.clientFindPwd", info);
}
// 비밀번호 변경
public int clientSetPwd(ClientVO client) {
System.out.println("3. [ Client DAO ] clientSetPwd : " + client.toString());
return sqlSessionTemplate.update("ClientDAO.clientSetPwd", client);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
package com.w2.client;
import java.util.HashMap;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import lombok.extern.slf4j.Slf4j;
@Repository
public class ClientDAO {
@Autowired
private SqlSessionTemplate sqlSessionTemplate;
// 중복 확인
public int clientCheck(HashMap<String, String> check) {
System.out.println("3. [ Client DAO ] clientCheck : " + check.toString());
return sqlSessionTemplate.selectOne("ClientDAO.checkService", check);
}
// 회원 가입
public int clientSignup(ClientVO client) {
System.out.println("3. [ Client DAO ] clientSignup : " + client.toString());
return sqlSessionTemplate.insert("ClientDAO.clientSignup", client);
}
// 회원 정보 가져오기
public ClientVO getClient(String clientId) {
System.out.println("3. [ Client DAO ] getClient : " + clientId);
return sqlSessionTemplate.selectOne("ClientDAO.getClient", clientId);
}
// 최근 로그인 일자 저장
public void setLogDate(String clientId) {
System.out.println("8. [ Client DAO ] setLogDate");
sqlSessionTemplate.update("ClientDAO.setLogDate", clientId);
}
// 아이디 찾기
public String clientFindId(HashMap<String, String> info) {
System.out.println("3. [ Client DAO ] clientFindId : " + info.toString());
return sqlSessionTemplate.selectOne("ClientDAO.clientFindId", info);
}
// 비밀번호 찾기
public int clientFindPwd(HashMap<String, String> info) {
System.out.println("3. [ Client DAO ] clientFindPwd : " + info.toString());
return sqlSessionTemplate.selectOne("ClientDAO.clientFindPwd", info);
}
// 비밀번호 변경
public int clientSetPwd(ClientVO client) {
System.out.println("3. [ Client DAO ] clientSetPwd : " + client.toString());
return sqlSessionTemplate.update("ClientDAO.clientSetPwd", client);
}
}
|
8. client-mapping.xml 파일 작성
-- 비밀번호 변경시 비밀번호 변경 일자도 업데이트
-- 추후 비밀번호 3번이상 오류시 변경일자 표시하게 기능 구현 예정
<!-- 아이디 찾기 -->
<select id="clientFindId" parameterType="Map" resultType="String">
SELECT cId FROM client WHERE cName = #{ clientName } AND ${ type } = #{ keyword }
</select>
<!-- 비밀번호 찾기 -->
<select id="clientFindPwd" parameterType="Map" resultType="int">
SELECT COUNT(*) FROM client
WHERE cId = #{ clientId }
AND cName = #{ clientName }
AND ${ type } = #{ keyword }
</select>
<!-- 비밀번호 변경 -->
<update id="clientSetPwd" parameterType="client">
UPDATE client SET cPwd = #{ clientPwd }, chPwdDate = CURRENT_TIMESTAMP
WHERE cId = #{ clientId }
</update>|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<?xml version="1.0" encoding="UTF-8"?>
<!-- MyBatis 다운 파일 PDF 에서 붙여넣은 내용입니다. -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="ClientDAO">
<resultMap type="com.w2.client.ClientVO" id="client">
<id property="clientId" column="cId" />
<result property="clientPwd" column="cPwd" />
<result property="clientName" column="cName" />
<result property="clientNum" column="cNum" />
<result property="clientEmail" column="cEmail" />
<result property="clientEmailCheck" column="cEmailCheck" />
<result property="clientBirth" column="cBirth" />
<result property="clientNickName" column="cNickName" />
<result property="gradeId" column="grId" />
<result property="clientPoint" column="cPoint" />
<result property="clientLogDate" column="cLogDate" />
<result property="chPwdDate" column="chPwdDate" />
</resultMap>
<!-- 사용 가능
<sql id="미리 지정가능">지정하고 싶은 값 입력 가능</sql>
<include refid="미리 지정가능"/>
-->
<!-- 정보 중복 확인 -->
<select id="checkService" resultType="int" parameterType="Map">
SELECT COUNT(*) FROM client
<choose>
<when test="#{ comp eq 'cId' }">
WHERE cId = #{ with }
</when>
<when test="#{ comp eq 'cNickName' }">
WHERE cNickName = #{ with }
</when>
<when test="#{ comp eq 'cEmail' }">
WHERE cEmail = #{ with }
</when>
</choose>
</select>
<!-- 회원 가입 -->
<insert id="clientSignup" parameterType="client">
INSERT INTO client (cId, cPwd, cName, cNum, cEmail, cEmailCheck, cBirth, cNickName, grId, cPoint)
VALUES (#{ clientId }, #{ clientPwd }, #{ clientName }, #{ clientNum }, #{ clientEmail }, #{ clientEmailCheck },
#{ clientBirth }, #{ clientNickName }, #{ gradeId }, #{ clientPoint });
</insert>
<!-- 회원 정보 조회 -->
<select id="getClient" parameterType="String" resultMap="client">
SELECT * FROM client WHERE cId=#{ clientId }
</select>
<!-- 마지막 로그인 일자 업데이트 -->
<update id="setLogDate" parameterType="String">
UPDATE client SET cLogDate = CURRENT_TIMESTAMP WHERE cId = #{ clientId }
</update>
<!-- 아이디 찾기 -->
<select id="clientFindId" parameterType="Map" resultType="String">
SELECT cId FROM client WHERE cName = #{ clientName } AND ${ type } = #{ keyword }
</select>
<!-- 비밀번호 찾기 -->
<select id="clientFindPwd" parameterType="Map" resultType="int">
SELECT COUNT(*) FROM client
WHERE cId = #{ clientId }
AND cName = #{ clientName }
AND ${ type } = #{ keyword }
</select>
<!-- 비밀번호 변경 -->
<update id="clientSetPwd" parameterType="client">
UPDATE client SET cPwd = #{ clientPwd }, chPwdDate = CURRENT_TIMESTAMP
WHERE cId = #{ clientId }
</update>
</mapper>
|
>> 실행
>>> 아이디/비밀번호 찾기 클릭
>>> 아이디 찾기 클릭
-- 기본 전화번호로 찾기로 설정
>> 존재하는 데이터로 찾기 클릭
>>> 아이디 출력
-- 로그인하기 버튼 클릭 시 로그인페이지로 이동
-- 비밀번호 찾기 클릭 시 비밀번호 찾는 페이지로 이동
-- 아이디 찾기 클릭 시 아이디 찾기 초기화면으로 이동
>> 이메일로 아이디 찾기
-- 이메일로 찾기 시 아래에 '전화번호로 아이디 찾기'로 변경
>> 존재하지 않는 데이터로 찾는 경우
>> 비밀번호 찾기
-- 기존 프로젝트에서는 정보가 일치하는 경우 이메일로 랜덤으로 조합된 8자리의 임시 비밀번호를 발급하여 로그인하게 구현하였으나 비밀번호 재설정으로 구현함
-- 최근 비밀번호를 임시비밀번호 발급보다 본인 인증이 된 경우 비밀번호를 새로 저장하게 하는 방식을 많이 사용
>>> 존재하는 데이터인 경우
>>> 비밀번호 변경
>>> 변경 성공 시 페이지에 메세지 출력 후 3초 후에 로그인 페이지로 이동하게 구현
>> 이메일로 비밀번호 찾기
reProject_09_사용자 상품 리스트 페이지 구현
2023.12.23 - [Project] - reProject_08_회원 정보 찾기 기능 구현(아이디 찾기, 비밀번호 찾기) 2023-12-22 -- 회원 기능을 완벽하게 구현하지 않았으나 다음주 금요일까지 팀원들과 하기로 한 스터디때문에
hyeonga493.tistory.com
반응형
'Project_WEATHERWEAR' 카테고리의 다른 글
| reProject_10_사용자 상품 상세 페이지 구현 (1) | 2023.12.23 |
|---|---|
| reProject_09_사용자 상품 리스트 페이지 구현 (0) | 2023.12.23 |
| reProject_07_로그인 기능 구현 (0) | 2023.12.23 |
| reProject_06_회원 가입 기능 구현 (0) | 2023.12.23 |
| reProject_05_마이페이지 구현 (1) | 2023.12.22 |
'Project_WEATHERWEAR' Related Articles
more
