카테고리 없음
스프링부트3 회원가입 로그인, 로그아웃 구현하기 - 회원가입 구현하기
놀이방사장님
2023. 10. 30. 23:29
728x90
반응형
안녕하세요 놀이방 사장입니다.
이번 포스팅은 시큐리티 설정을 완료하였으니 회원가입을 구현하겠스빈다.
먼저 회원 정보를 추가하는 서비스메서드를 작성 한 뒤 회원 가입 컨트롤러 만듭니다.
1. 서비스 메서드 코드 작성
dto디렉터리에 AddUserRequest.java파일 추가
package me.joyeonggyu.springbootdeveloper.dto;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class AddUserRequest {
private String email;
private String password;
}
2. AddUserRequest객체를 인수로 받는 회원 정보 추가 메서드 작성
service 디렉터리에 UserService.java파일 생성
package me.joyeonggyu.springbootdeveloper.service;
import lombok.RequiredArgsConstructor;
import me.joyeonggyu.springbootdeveloper.domain.User;
import me.joyeonggyu.springbootdeveloper.dto.AddUserRequest;
import me.joyeonggyu.springbootdeveloper.repository.UserRepository;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
@RequiredArgsConstructor
@Service
public class UserService {
private final UserRepository userRepository;
private final BCryptPasswordEncoder bCryptPasswordEncoder;
public Long save(AddUserRequest dto){
return userRepository.save(User.builder()
.email(dto.getEmail())
.password(bCryptPasswordEncoder.encode(dto.getPassword()))
.build()).getId();
}
}
패스워드를 저장할 때 시큐리티를 설정하며 패스워드 인코딩용으로 등록한 빈을 사용해서 암호화한 후 저장한다.
3. 컨트롤러 작성하기
회원 가입폼에서 회원가입 요청을 받으면 서비스 메서드를 사용해 사용자를 지정한 뒤 로그인 페이지로 이동하는 signup() 메서드를 작성
4. controller 디렉터리에 UserApiController.java 파일을 만든다.
package me.joyeonggyu.springbootdeveloper.cotroller;
import lombok.RequiredArgsConstructor;
import me.joyeonggyu.springbootdeveloper.dto.AddUserRequest;
import me.joyeonggyu.springbootdeveloper.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
@RequiredArgsConstructor
@Controller
public class UserApiController {
private final UserService userService;
@PostMapping("/user")
public String signup(AddUserRequest request){
userService.save(request); //회원가입 메서드 호출
return "redirect:/login"; //회원 가입이 완료된 이후에 로그인 페이지로 이동
}
}
회원가입 처리가 된 다음 로그인 페이지로 이동하기 위해 redirect: 접두사를 붙였습니다.
이렇게하면 회원 가입 처리가 끝나면 강제로 /login URL에 해당하는 화면으로 이동합니다.
5. 뷰 컨트롤러 구현하기
로그인, 회원가입 경로로 접근하면 뷰 파일을 연결하는 컨트롤러를 생성
package me.joyeonggyu.springbootdeveloper.cotroller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class UserViewController {
@GetMapping("/login")
public String login(){
return "login";
}
@GetMapping("/signup")
public String signup(){
return "signup";
}
}
/login 경로 접근하면 login() 메서드 login.html을 /signup 경로에 접근하면 signup()메서드는 signup.html을 반환한다.
6. 뷰 작성하기
templates디렉터리에 login.html을 생성한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<style>
.login_form{
background : linear-gradient(to right. rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}
.new_login_form{
background: linear-gradient(to right, rgba(254, 238, 229, 1), rgba(229, 193, 197, 1))
}
</style>
</head>
<body class ="new_login_form">
<section class="d-flex vh-100">
<div class="container-fluid row justify-content-center align-content-center">
<div class="card bg-white" style="border-radius : 1rem">
<div class="card-body p-5 text-center">
<h2 class="text-black">LOGIN</h2>
<p class="text-black-50 mt-2 mb-5">서비스를 사용하려면 로그인 로그인을 해주세요!</p>
<div class="mb-2">
<form action="/login" method="POST">
<input type="hidden" th:name="${_csrf?.parameterName}" th:value="${_csrf?.token}" />
<div class="mb-3">
<label class="form-label text-black">Email address</label>
<input type="email" class="form-control" name="username">
</div>
<div class="mb-3">
<label class="form-label text-black">Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
<button type="button" class="btn btn-warning mt-3" onclick="location.href='/singup'">회원가입</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
이렇게 만들면
이렇게 뷰가 나온다.
이제 signup.html을 만들어보자
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<style>
.gradient-custom{
background: linear-gradient(to right, rgba(254, 238, 229, 1), rgba(229, 193, 197, 1))
}
</style>
<body class="gradient-custom">
<section class="d-flex vh-100">
<div class="container-fluid row justify-content-center align-content-center">
<div class="card bg-white" style="border-radius: 1rem">
<div class="card-body p-5 text-center">
<h2 class="text-black">SIGN UP</h2>
<p class="text-black-50 mt-2 mb-5">서비스 이용을 위한 회원 가입창</p>
<div class="mb-2">
<form action="@{/user}" method="post">
<!-- 토큰을 추가하여 CSRF 공격 방지 -->
<input type="hidden" th:name="${_csrf?.parameterName}" th:value="${_csrf?.token}">
<div class="mb-3">
<label class="form-label text-black">Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div>
<label class="form-label text-black">PassWord</label>
<input type="password" class="form-control" name="password">
</div>
<button type="button" class="btn btn-warning" style="margin-top:20px">회원가입</button>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
여기까지 회원가입 기능 구현포스팅을 마치겠습니다.
반응형