이번 포스팅은
1. SecurityConfig 코드 추가
2. MemberController
3. index.html
4. member/memberForm 화면 구현
5. 화면
순서대로 진행하겠습니다.
1. SecurityConfig 코드 추가
package com.asdanything.ask.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
//super.configure(http);
http.csrf().disable();
}
@Bean
public PasswordEncoder passwordEncoder(){
return new BCryptPasswordEncoder();
}
}- 스프링 시큐리티는 csrf라는 기능이 있습니다.
- 이 기능은 서버에서 페이지에 .csrf관련된 특수한 문자를 붙이고 보내줍니다.
- 그러고 클라이언트가 특정 값을 입력하고 돌려줬을 때 .csrf관련 문자열이 없다면 오류를 나타냅니다.
- 저는 .csrf를 처리하는 방법을 아직 정확하게 알지 못해 우선 disable기능으로 사용하겠습니다.
2. MemberController
package com.asdanything.ask.controller;
import com.asdanything.ask.Entity.Member;
import com.asdanything.ask.dto.MemberFormDto;
import com.asdanything.ask.service.MemberService;
import lombok.RequiredArgsConstructor;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
@RequiredArgsConstructor
public class MemberController {
private final MemberService memberService;
private final PasswordEncoder passwordEncoder;
@GetMapping("/members/new")
public String memberForm(Model model){
model.addAttribute("memberFormDto",new MemberFormDto());
return "member/memberForm";
}
@PostMapping("/members/new")
public String memberNew(MemberFormDto memberFormDto, Model model){
Member member = Member.createMember(memberFormDto, passwordEncoder);
memberService.saveMember(member);
return "redirect:/";
}
}- url은 members/new로 하고 get방식과 post방식으로 구분했습니다.
- get방식인 경우 member/memberForm 페이지로 리턴했고
- post방식인 경우 root페이지로 리다이렉트 했습니다.
- 기존에 만들었던 memberService의 saveMember 메소드를 이용해 회원가입을 진행합니다.
3. index.html
resource안에 구조이고 index.html은 static 안에 넣었습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>환영합니다</h1>
<div>
<a href="/members/new">회원가입</a>
</div>
</body>
</html>우선은 <a href="/members/new">회원가입</a> 를 통해 회원가입을 누르면 연결된 주소로 가도록 했습니다.
4. member/memberForm 화면 구현
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/members/new" method="post" th:object="${memberFormDto}">
<div>
<label th:for="name">이름</label>
<input type="text" th:field="*{name}" placeholder="이름을 입력하세요">
</div>
<div>
<label th:for="email">이메일</label>
<input type="email" th:field="*{email}" placeholder="이메일을 입력하세요">
</div>
<div>
<label th:for="password">비밀번호</label>
<input type="password" th:field="*{password}" placeholder="비밀번호를 입력하세요">
</div>
<button type="submit">제출하기</button>
</form>
</body>
</html>- form 형식을 이용해 버튼을 누르면 post방식으로 연결된 주소록 값을 보냅니다.
5. 화면
처음 localhost:8080에 들어갔을 때 화면입니다.
회원가입을 눌렀을 때 화면입니다.
이런 식으로 채워주고 제출하기 버튼을 누르면
데이터베이스에 잘 저장된 것을 볼 수 있습니다.
결론
이제 데이터베이스까지 저장이 되었으니 다 해결이 됐습니다!!! 라고 할뻔 했네요!
사실 회원가입할때 비밀번호는 몇자리 이상, 아이디는 중복인지 아닌지, 이름칸이 빈칸인지 이런걸 확인을 해줘야 합니다!!
그리고 데이터베이스의 사용 여부에 따라 전위, 후위 검사가 있습니다.
다음 포스팅에서 전위, 후위를 생각하며 회원가입의 유효성에 대해서 완성해보겠습니다!
'스프링' 카테고리의 다른 글
| 스프링 권한에 따라 다른 기능 추가 - 등록, 찾기 (0) | 2021.10.07 |
|---|---|
| 스프링 시큐리티를 이용한 회원가입과 로그인 4 - 유효성 완료 (0) | 2021.10.03 |
| 스프링 시큐리티를 이용한 회원가입과 로그인 1 (0) | 2021.10.01 |
| 스프링과 의존관계 자동 주입 (0) | 2021.09.20 |
| 스프링 컨포넌트 스캔 (0) | 2021.09.15 |
댓글