Web Programming/Java Spring

Spring Security를 이용해서 custom login page 만들기

jinmc 2021. 1. 10. 19:54
반응형

spring security를 이용해서 로그인을 만들면, 디폴트 로그인 페이지가 나옵니다. 다음과 같은..

 

뭐 최악이라고 할 순 없지만, 이대로 쓰기는 좀 그렇기 때문에, 따로 페이지를 만들려고 합니다.

참고로 이 로그인을 하기 위해서는, username은  user, password는 임시 비밀번호가 콘솔 창에 나옵니다.

 

그럼 이 화면을 우리가 원하는 화면으로 어떻게 바꿀수 있을까요?

WebSecurityConfig.java 파일을 만들고 override를 하면 됩니다.

 

package com.myBoard.demo;

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;

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
	
	// 디폴트 로그인 페이지를 변환하는 곳
	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http	
				.authorizeRequests()
				.anyRequest().authenticated()
				.and()
				.formLogin()
				.loginPage("/login")
				.permitAll();
	}
}

 

그럼 이제 login 페이지를 만들어야 하는데, html 파일을 읽기 위해서는 Thymeleaf dependency를 입력해주어야 합니다.

pom.xml에 다음을 입력해줍니다.

 

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-security</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-test</artifactId>
		</dependency>
		
		
		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

controller에서는 login을 매핑 해줍니다.

package com.myBoard.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class UserController {
	
	@GetMapping("login")
	public String login() {
//		System.out.println("hi");
		return "login";
		
	}
	
	
	@RequestMapping("register")
	public String register() {
//		System.out.println("hi");
		return "register";
		
	}

}

jsp를 사용하지 않음을 확인할 수 있습니다.

그 이후, src/main/resources/templates/ 안에 login.html을 넣어줍니다.

Thymeleaf 의 문법은 다음에 다뤄보도록 하겠습니다.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Spring Security Example </title>
    </head>
    <body>
        <div th:if="${param.error}">
            Invalid username and password.
        </div>
        <div th:if="${param.logout}">
            You have been logged out.
        </div>
        <form th:action="@{/login}" method="post">
            <div><label> User Name : <input type="text" name="username"/> </label></div>
            <div><label> Password: <input type="password" name="password"/> </label></div>
            <div><input type="submit" value="Sign In"/></div>
        </form>
    </body>
</html>

그 이후, 짠! 우리가 만든 폼이 나온 걸 볼 수 있습니다

 

반응형