회원가입
JSP,ajax로 회원가입을 해보려고 합니다.
이메일 인증은 따로 포스트 했습니다!
메뉴바에 있는 로그인을 누르면
로그인 폼에 있는 회원가입을 통해서 회원가입폼으로 이동가능합니다.
컨트롤러
1
2
3
4
5
@GetMapping("/signIn")
public String signin() {
return "signIn";
}
/signIn으로 이동하면 signIn.jsp로 이동합니다.
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
31
32
33
34
35
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%@ include file="/WEB-INF/views/menu.jsp" %>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="/js/signUp.js"></script>
<link rel="stylesheet" href="<c:url value='/css/signUp.css'/>">
</head>
<body>
<div class="sign" action="/members/signup" method="post">
<h2>회원가입</h2>
<BR><BR>
<p>
<label for="email">이메일
<input type="email" id="email" name="email" required>
<input type="button" value="중복확인"onclick="checkEmail()"></label>
</p>
<label for="name">이름</label>
<input type="text" id="name" name="name" required>
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" required>
<button onclick="submitFormSignUp()">가입하기</button>
</div>
</body>
</html>
컨트롤러에서 @RequestBody 애노테이션을 사용하기 위해
form 대신 div를 사용해서 만들었습니다.
ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function submitFormSignUp() {
var formData = {
name: $("#name").val(),
email: $("#email").val(),
password: $("#password").val()
};
$.ajax({
type: 'post',
url: '/members/signup',
data: JSON.stringify(formData),
contentType : 'application/json; charset=utf-8',
}).done(function(response){
alert(response);
window.location.href = '/loginForm';
}). fail(function(error) {
console.error("에러:", error);
alert("에러: " + JSON.stringify(error));
});
}
jQuery를 사용해서 사용자가 입력한 값을 가져와서 formData에 저장합니다.
memhbers/signup에 Post요청을 보냅니다.
폼 데이터를 json으로 변환하여 요청본문에 보냅니다.
성공적으로 응답이 돌어오면 창에 응답을 표시합니다.
실패하면 에러를 표시합니다.
컨트롤러
1
2
3
4
5
6
7
8
9
10
11
12
13
@PostMapping(value = "/signup")
public ResponseEntity<String> submitSignUp(@Valid @RequestBody MemberDto.PostDto postDto)
throws MessagingException, UnsupportedEncodingException {
log.info("##### CREATE MEMBER #####");
Member member = mapper.memberPostDtoToMember(postDto);
Member savedMember = memberService.createMember(member);
URI location = UriCreator.createUri(MEMBER_DEFAULT_URL, savedMember.getMemberId());
mailService.sendEmail(savedMember.getEmail(), savedMember.getMailKey(), savedMember.getMemberId());
return ResponseEntity.ok().body("\"이메일 인증을 해주세요!\"");
}
요청 본문을 MemberDto.PostDto으로 매핑합니다.
postDto를 Member엔티티로 변환하고
memberService.createMember(member)를 호출하여 회원을 생성합니다.
Service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public Member createMember(Member member) throws MessagingException, UnsupportedEncodingException {
setDefaultMemberInfo(member);
member.setCart(Cart.builder().member(member).build());
Member save = memberRepository.save(member);
return save;
}
private void setDefaultMemberInfo( Member member) {
// 패스워드 암호화
String encryptedPassword = Optional.ofNullable(passwordEncoder.encode(member.getPassword()))
.get();
member.setPassword(encryptedPassword);
member.setMailKey(createCode());
// db에 유저 role 저장
List<String> roles = authorityUtils.createRoles(member.getEmail());
member.setRoles(roles);
}
createdMember는 회원에게 기본정보를 설정하고, 장바구니를 생성하고 저장합니다.
setDefaultMemberInfo에 회원에 대한 기본정보를 설정합니다.
비밀번호 암호화, 메일키를 생성하여 설정, 회원의 역할 설정합니다.
회원가입이 완료되면
로그인 화면으로 이동합니다.
This post is licensed under CC BY 4.0 by the author.