이렇게 자동으로 설정된 login.jsp를
이렇게 바꿔보자.
예제: http://websystique.com/spring-security/spring-security-4-custom-login-form-annotation-example/
1. pom.xml을 수정한다.
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${org.springframework-version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${org.springframework-version}</version>
</dependency>spring-core와 spring-web dependency를 추가한다.
2. context-xml 수정
-> 이전에
<security:form-login authentication-failure-url="/Access_Denied" /><!-- 로그인에 실패하면 Access_Denied로 가라 -->이 부분을
<security:form-login login-page="/login"
username-parameter="ssoId" password-parameter="password"
authentication-failure-url="/Access_Denied" />
<security:csrf />이렇게 바꿔준다.
login-page = "/login" -> 로그인 페이지를 호출하면 내가 커스텀한 login.jsp가 호출된다.
매개변수로 username, password를 가지고 넘어간다.
3. css 파일을 넣어주자
webapp/resources/css 안에 app.css 파일을 생성한다.
파일은 http://websystique.com/spring-security/spring-security-4-custom-login-form-annotation-example/
하단 부분에 소스코드랑 함께 압축파일이 있다. 그 안에 찾아보면 있을 것이다.
4. login.jsp를 만들어주자
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login page</title>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/resources/css/app.css" />
</head>
<body>
<div id="mainWrapper">
<div class="login-container">
<div class="login-card">
<div class="login-form">
<form action="${pageContext.request.contextPath }/login" method="post" class="form-horizontal">
<div class="input-group input-sm">
<label class="input-group-addon" for="username"><i
class="fa fa-user"></i></label> <input type="text" class="form-control"
id="username" name="userid" placeholder="Enter Username" required>
</div>
<div class="input-group input-sm">
<label class="input-group-addon" for="password"><i
class="fa fa-lock"></i></label> <input type="password"
class="form-control" id="password" name="password"
placeholder="Enter Password" required>
</div>
<!-- 시큐리트에서 사용자가 지정한 폼을 사용하려면 반드시 아래의 코드를 첨부해줘야 한다.-->
<input type="hidden" name="${_csrf.parameterName}"
value="${_csrf.token}" />
<div class="form-actions">
<input type="submit"
class="btn btn-block btn-primary btn-default" value="Log in">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>css파일을 연결하고 ${pageContext.request.contextPath}를 붙여줘야 하고
<!-- 시큐리트에서 사용자가 지정한 폼을 사용하려면 반드시 아래의 코드를 첨부해줘야 한다.-->
<input type="hidden" name="${_csrf.parameterName}"
value="${_csrf.token}" />이 부분이 중요하다.
root-context에 <security:csrf/>를 설정해준 이유이다.
4. Controller 를 만들어주자
@RequestMapping(value = "/login")
public String login(Model model) {
return "login";
}
'SpringMVC' 카테고리의 다른 글
| Spring Legacy Project (회원관리 - 실습2) (0) | 2021.09.28 |
|---|---|
| Spring Legacy Project (회원관리 - 실습1) (0) | 2021.09.28 |
| Spring Web Security (4) - Oracle 연동 (0) | 2021.09.27 |
| Spring Web Security (2) (0) | 2021.09.27 |
| Spring Web Security (1) (0) | 2021.09.27 |
