포토그램 인증 구현하기
회원가입 구현
회원가입한 적이 없기 때문에 가입하기 버튼 클릭해서 진입
값을 다 넣고 가입버튼 클릭 시 회원가입 되게 만들거다.
/photogram/src/main/webapp/WEB-INF/views/auth/signup.jsp 파일에 들어가서
이렇게 퍼블리셔가 만들어준 파일에 회원가입form 태그를 찾아준다
<!--회원가입 인풋-->
<form class="login__input" >
<input type="text" name="username" placeholder="유저네임" required="required" />
<input type="password" name="password" placeholder="패스워드" required="required" />
<input type="email" name="email" placeholder="이메일" required="required" />
<input type="text" name="name" placeholder="이름" required="required" />
<button>가입</button>
</form>
<!--회원가입 인풋end-->
HTML
복사
form 태그 안에 action을 추가해줘서
<form class="login__input" action="/auth/signup" method="post">
<input type="text" name="username" placeholder="유저네임" required="required" />
<input type="password" name="password" placeholder="패스워드" required="required" />
<input type="email" name="email" placeholder="이메일" required="required" />
<input type="text" name="name" placeholder="이름" required="required" />
<button>가입</button>
</form>
HTML
복사
근데 /auth/signup으로 하면 똑같은 페이지로 돌아오는게 아닌가 싶을텐데
method를 post방식으로 할거다.
(왜 post 방식으로 사용하냐면 username, password, email, name 4건의 데이터를 줄거니까 데이터베이스에 insert 시킬거라서 post방식으로 사용)
해당 기능에 대한 컨트롤러를 만들어야 한다.
web 폴더 생성
인증을 위한 컨트롤러인 AuthController.java 생성
package com.cos.photogramstart.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller // 1. IoC 등록 2. 파일을 리턴하는 컨트롤
public class AuthController {
@GetMapping("/auth/signin")
public String signinForm() {
return "auth/signin";
}
}
Java
복사
저장하는 순간 오류가 날거다.
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'requestMappingHandlerMapping' defined in class path resource [org/springframework/boot/autoconfigure/web/servlet/WebMvcAutoConfiguration$EnableWebMvcConfiguration.class]: Invocation of init method failed; nested exception is java.lang.IllegalStateException: Ambiguous mapping. Cannot map 'authController' method
com.cos.photogramstart.web.AuthController#signinForm()
to {GET [/auth/signin]}: There is already 'viewControllerTest' bean method
com.cos.photogramstart.ViewControllerTest#signinPage() mapped.
Java
복사
ViewControllerTest.java(화면을 보기 위한 테스트용 파일)에 같은 기능의 함수가 선언 되어 있어서 그렇다.
해당 ViewControllerTest파일의 @Controller 어노테이션을 주석 처리해주자. 그러면 오류 해결
AuthController.java 파일에
@GetMapping("/auth/signup")
public String signupForm() {
return "auth/signup";
}
Java
복사
추가
http://localhost:8080/ 쳐도 이제 signin 주소로 들어가지고 가입하기 버튼 클릭시 signup 주소로 이동한다
이제 singup의 post 함수를 만들어줘야한다.
@PostMapping("/auth/signup")
public String signup() {
return "auth/signin";
}
Java
복사
회원가입화면에서 데이터 입력 후 가입 버튼 클릭하면 로그인화면으로 가야한다.
현재는 403 뜨는게 맞다.
왜 403이 뜨고 있냐면
회원가입버튼 -> /auth/signup/ -> /auth/signin 이렇게 이동 되고 있으니까 중간에 콘솔에 찍히는지 보자.
//회원가입버튼 -> /auth/signup/ -> /auth/signin
@PostMapping("/auth/signup")
public String signup() {
System.out.println("signup 실행됨?");
return "auth/signin";
}
Java
복사
와 콘솔에 찍히지 않았다 ^ㅡ^…
실행되야하는데 메세지가 찍혀있지 않다..
왜 안되는걸까?
원래는
회원가입버튼 -> /auth/signup/ -> /auth/signin 이렇게 가야하는데
회원가입버튼 → x 이상태인거다.
이유는
<!--회원가입 인풋-->
<form class="login__input" action="/auth/signup" method="post">
<input type="text" name="username" placeholder="유저네임" required="required" />
<input type="password" name="password" placeholder="패스워드" required="required" />
<input type="email" name="email" placeholder="이메일" required="required" />
<input type="text" name="name" placeholder="이름" required="required" />
<button>가입</button>
</form>
HTML
복사
여기 form태그 안에서 CSRF 토큰이라는게 활성화 되어 있어서 그렇다.
예를 들면 포스트맨 같은걸로 진입할수도있고 정상적인 사이트를 통해서 진입할수도있다.
CSRF토큰을 이용해서 정상적인 방법으로 진입하고 있는지 체크하는거다.
근데 우리는 CSRF토큰을 비활성화 시킬거다.
나중에 자바스크립트 요청할때 힘들고 .. 시큐리티에서 사용하지 않을 예정이다.
SecurityConfig.java 파일에 들어가서 http.csrf().disable(); 추가
@Override
protected void configure(HttpSecurity http) throws Exception {
//super 삭제 - 기존 시큐리티가 가지고 있는 기능이 다 비활성화됨.
http.csrf().disable(); //CSRF토큰을 비활성화
http.authorizeRequests()
.antMatchers("/", "/user/**", "/image/**", "/subscribe/**" , "/comment/**").authenticated() // / , /user , /image, /subscribe, /comment로 시작하는 주소로 들어오면 인증필요
.anyRequest().permitAll() // 그게 아닌 모든 요청은 허용 하겠다.
.and()
.formLogin() //form태그 및 input태그 중에 form태그로 로그인할
.loginPage("/auth/signin") //접근 권한이 없는 페이지(위에 설정한 주소)들은 다 이 주소로 이동.
.defaultSuccessUrl("/"); //로그인을 정상처리하면 /로 이동
}
Java
복사
그럼 이제 비활성화 시켰기 때문에 포스트맨으로 진입하든 정상적인 화면에서 진입하든 이제 구분하지않고 요청받겠다~ 라는 뜻.
이제 가입하기 버튼 누르면 로그인화면으로 이동한다~
콘솔에도 이제 잘 찍혀나온다.