SpringSecurity를 추가하면 자동적으로 로그인은 내장된 화면을 이용하여 진행하도록 되어 있습니다.


spring security login view


이 화면이 심플해서 맘에 들어 그냥 사용하고 싶다면 괜찮지만 새로 만드는 작업이 그리 복잡하지 않기 때문에 가능하면 직접 만들어 사용 하는 것도 좋습니다한번 프로젝트를 생성해서 로그인 화면을 작성해 보겠습니다.


spring security login view


테스트를 위해 프로젝트 이름을 Login 으로 생성 했습니다.


spring security login view


추가되는 라이브러리는 Security Web입니다.

 

그 외에 필요한 라이브러리는 pom.xml에 직접 추가를 해줍니다.

pom.xml

                <dependency>

                       <groupId>org.apache.tomcat.embed</groupId>

                       <artifactId>tomcat-embed-jasper</artifactId>

               </dependency>

               <dependency>

                   <groupId>org.webjars</groupId>

                   <artifactId>jquery</artifactId>

                   <version>3.4.1</version>

               </dependency>

               <dependency>

                   <groupId>javax.servlet</groupId>

                   <artifactId>jstl</artifactId>

                   <version>1.2</version>

               </dependency>


Login 화면용 jsp 파일의 위치를 정하기 위해 application.properties 파일에 설정을 해주고

 #jsp location

spring.mvc.view.prefix=/WEB-INF/jsp/

spring.mvc.view.suffix=.jsp

server.servlet.jsp.init-parameters.development=true


설정한 값을 이용하여 파일이 들어갈 폴더도 생성 합니다.


spring security login view


여기 까지는 일반 프로젝트를 만드는 방법과 동일한 작업 입니다이제 단 한가지 작업만 진행 하면 로그인 화면을 직접 만들어 사용할 수 있습니다.

기본 로그인 화면을 새로 생성한 로그인 페이지를 이용 하도록 수정하려면 WebSecurityConfigurerAdapter를 상속받은 class를 생성해서 configure(HttpSecurity http)에 설정을 추가 하기만 하면 됩니다.


         @Override

        protected void configure(HttpSecurity http) throws Exception {

               http.httpBasic().and().authorizeRequests()

        .antMatchers("/user/login").permitAll()

        .and().logout().permitAll()

        .and().formLogin()

        .loginPage("/user/login")

        .loginProcessingUrl("/loginProcess")

        .defaultSuccessUrl("/mainHome")

        .and().csrf().disable();

        }


위의 설정은

loginPage("/user/login") : 새로운 로그인 페이지 호출을 설정 합니다.

loginProcessingUrl("/loginProcess") : 실제 로그인을 진행 합니다.

이 두 가지만 해주면 설정은 끝입니다.

defaultSuccessUrl("/mainHome") 이건 그냥 로그인 성공시 보여줄 페이지 입니다.

 

실제로 호출되는 Controller 클래스도 생성을 합니다.


 @RequestMapping("/user/login")

public String login() throws Exception {

        return "login/userLogin";

}

       

@RequestMapping("/mainHome")

public String loginMain() throws Exception {

        return "main";

}


작동 순서

1. 로그인 페이지 설정 :

로그인을 진행할 페이지를 호출하기 위해 Controller에서 @RequestMapping("/user/login") 요렇게 해놓고 return "login/loginForm"; 리턴에서 새로 생성한 로그인 화면(loginForm.jsp) 보여줍니다.

2. 로그인 진행 :

/login/LoginForm.jsp 에서 <form> 태그에 username, password를 입력하고

<form action="/loginProcess" method="post"> 이렇게 처리하면 로그인을 진행 합니다.

3. 로그인 성공 페이지

로그인이 완료 되면 Controller에서 @RequestMapping("/mainHome") 이걸 호출 하고 return "main";으로 넘겨  main.jsp 화면을 보여 줍니다.

 

신규 로그인 화면 입니다.


spring security login view


기본 제공 로그인 화면이 더 좋은거 같군요...

 

다음은 로그인 성공시 보여주는 화면입니다.


spring security login view


예쁘게 꾸며서 사용하세요.


전체 소스


WebSecurityConfigurerAdapter

package com.copycoding.security;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;

import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;

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 WebSecurityConfig extends WebSecurityConfigurerAdapter {

 

        @Override

        protected void configure(HttpSecurity http) throws Exception {

               http.httpBasic().and().authorizeRequests()

        .antMatchers("/user/login").permitAll()

.and().logout().permitAll()

        .and().formLogin()

        .loginPage("/user/login")

        .loginProcessingUrl("/loginProcess")

        .defaultSuccessUrl("/mainHome")

        .and().csrf().disable();

        }

       

        @Autowired

        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

               auth.inMemoryAuthentication()

                       .withUser("copycoding").password(passwordEncoder().encode("copycopy")).roles("ADMIN");

               auth.inMemoryAuthentication()

                       .withUser("honggil").password(passwordEncoder().encode("hoho")).roles("USER");

        }

       

        @Bean

    public PasswordEncoder passwordEncoder() {

        return new BCryptPasswordEncoder();

    }

} 


Controller

 package com.copycoding.security;

 

import org.springframework.web.bind.annotation.RequestMapping;

 

public class TestController {

 

@RequestMapping("/user/login")

    public String login() throws Exception {

               return "login/userLogin";

}

       

@RequestMapping("/mainHome")

    public String loginMain() throws Exception {

               return "main";

}

}


/login/loginForm.jsp

 <%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

    <h1>로그인 페이지</h1>

   

<form action="/loginProcess" method="post">

  <table>

<tr>

        <td>username</td><td><input type="text" name="username" placeholder="username 입력"></td>

      </tr>

      <tr>

        <td>password</td><td><input type="password" name="password" placeholder="비밀번호 입력"></td>

      </tr>

      <tr>

        <td colspan="2" align="right"><button type="submit">로그인</button></td>

      </tr>

  </table>

</form>

</body>

</html>


/main.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

 

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

 

<h1>Main Page!</h1>

 

</body>

</html>


- copy coding -


태양에게 절하는 꿈 해몽

 -> 어떤 종교적 대상을 찾거나 신앙심이 독실해지거나, 소망이 성사된다.


태양을 구름이 가리는 꿈 해몽

 -> 밀스럽게 한 일로 나쁜 소리를 듣게 될 것이다.


태양을 맞추어서 떨어뜨리는 꿈 해몽

 -> 마음에 생각하고 있던 큰 뜻을 이루어 대도로 향하게 된다.


태양을 베개 삼아서 잠을 자는 꿈 해몽

 -> 능력을 발휘하여 입신출세하고, 부귀를 얻고 사회의 훌륭한 지도자가 됨을 뜻한다.


태양의 중앙에 사람이 서 있는 꿈 해몽

 -> 집안이나 단체에 분열이 생겨서 큰 파란이 생길 징조이다.


태양이 갈라지는 꿈 해몽

 -> 본인이 속한 조직에 분열이 생길 징조이다.


태양이 구름 사이로 비치거나, 용 또는 불꽃이 보이는 꿈 해몽

 -> 국가에서 국민이 환영할 수 있는 발표를 하거나, 본인의 이름을 날리게 된다.


태양이 서쪽으로 지는 꿈 해몽

 -> 본인의 운세가 태양과 같이 기울고 있음을 나타낸다.


태양이 일그러져 보이는 꿈 해몽

 -> 사업에 어려움을 당하거나, 권리나 권세 등이 약해진다는 뜻이다.


단숨에 태양을 삼켜버리는 꿈 해몽

 -> 국가적인 지도자가 되어 권세와 명예를 누릴 아이를 생산할 태몽이다.


떨어지는 태양을 치마로 받는 꿈 해몽

 -> 국가를 위해 큰 인물이 될수 있는 자식을 낳을 태몽이다.


떨어진 태양이 굴러 가는 꿈 해몽

 -> 본인의 업적을 많은 사람들이 기념하게 된다.




옆에 태양을 두는 꿈 해몽

 -> 순조롭게 훌륭한 배우자를 만나서 백년을 해로한다.


일식을 보는 꿈 해몽

 -> 잠깐 운세가 기울지만 곧 회복하여 원상태로 될 것이다.


찌그러진 태양을 보는 꿈 해몽

 -> 현재하고 있는 일이 답보상태가 되거나 침체의 늪에 빠지게 된다.


태양과 달이 함께 비치는 꿈 해몽

 -> 국가의 권력분립이 잘 되어 있어서 권력의 독주를 막으면서, 서로 맡은 바 정무를 성실히 수행한다.


하늘에서 떨어지는 태양을 받는 꿈 해몽

 -> 부귀영화를 누리며 살게 될 징조의 대단한 길몽이다.


하늘을 태양을 타고 날아 다니는 꿈 해몽

 -> 나라의 정치, 경제, 사회, 문화, 군사, 종교 등 각 분야에서 훌륭한 사람이 되면서 입신출세 한다.


하늘과 해를 몰려온 구름이 덮어 버리는 꿈 해몽

 -> 사기 또는 좋지 않은 일이 생겨서 곤란한 입장에 당하게 된다.


구름에 가렸던 태양이 나타나는 꿈 해몽

 -> 그동안 어려웠던 문제가 해결되고 편안한 나날이 지속된다는 암시이다.


하늘에 떠 있는 해, 달, 별 등이 갑자기 없어지거나 떨어지는 꿈 해몽

 -> 사업의 실패, 좌절 등의 큰 어려움이나 재앙이 있을 것이다.


하늘에 해와 달이 함께 떠 있는데 한쪽은 밝고 한쪽은 어두운 꿈 해몽

 -> 집안가족에 우환이 생기거나 불의의 사고,사기,거짓말 등에 휘말리게 된다.


해나 달, 별 등을 본인이 삼키는 꿈 해몽

 -> 지위나 재물이 많이 따르고 사람들의 추앙을 받는 귀한 자식을 잉태할 태몽이다.


해나 달, 별 등을 품에 안거나 등에 짊어지는 꿈 해몽

 -> 권리나 명예를 성취하여 많은 사람들에게 존경과 숭앙을 받게 된다.또는 훌륭한 배우자를 맞아서 결혼할 징조이다.


해나 달, 별 등이 방이나 거실에서 빛나는 꿈 해몽

 -> 빠른 시일에 귀인이나 천복이 와서 부귀와 영화를 누리며 살게 될 징조이다.


해나 달, 별을 향해 절을 하거나 제사를 지내는 꿈 해몽

 -> 남성은 여성의 원조로 크게 성공하고, 여성은 연하의 남성에게 사랑이나 구애를 하게 된다.


해나 달을 물체가 막는 것을 보는 꿈 해몽

 -> 직원이나 부하, 또는 수하사람의 거짓말로 인해 큰 손해를 입게 된다.


해나 달을 안거나 받쳐드는 꿈 해몽

 -> 사업이 번창하고 지위가 높아져서 일신이 안락하며, 예술가라면 두루 명성을 날릴 징조이다.


해나 달이 광채를 띠며 막 떠오려고 하는 꿈 해몽

 -> 사업이 번창하고 복운이 많아서 부귀를 누리고 출세하면서 살 징조이다.


해나 달이 구름을 뚫고 나오면서 빛을 발하는 꿈 해몽

 -> 방해물이 사라지고 근심과 질병이 없어지며 재물과 명예가 생기는 길몽이다.


해나 달이 불에 타는 꿈 해몽

 -> 세력자의 후원이나 도움 또는 귀한 사람의 도움을 얻어 성공한다.


해와 달이 겹쳐서 보이거나 달과 별이 겹쳐서 보이는 꿈 해몽

 -> 부정 또는 사기에 연루되거나, 신뢰하던 사람에게 배신을 당할 것이다.


해와 달이 도시에 떠오르는 꿈 해몽

 -> 사업이 번창하고 명예를 얻어 일신이 안락하게 될 길몽이다.


- copy coding -


내가 사용하는 인터넷 다운로드, 업로드 속도 측정하는 사이트입니다.  Active-X를 설치해야 하는 사이트는 제외를 하여 4개를 뽑아 보았습니다

결과들이 조금씩 다를 수 있는데 속도 측정은 Target을 어디에 두고 체크했는가에 따라 결과가 달라질 수 있습니다그리고 Download 속도가 100MB로 좋게 나와도 내가 다운받으려는 사이트의 정책이 다운로드 속도를 1MB로 설정해 놓았으면 1MB이상으로 받을 수 없으니 속도 측정 결과는 참고로만 하면 될것 같습니다.

 

1. SpeedTest.net


예전에는 백그라운드 이미지로 지도모양이 나왔던 것 같은데 모양이 변경이 되었습니다.

https://www.speedtest.net/ 사이트에 접속을 합니다.


internet speed test


가운데 원의 GO를 클릭 하면 속도 측정이 시작 됩니다하단에 있는 이미지에서 자신의 디바이스를 선택 하여 측정을 진행 해도 됩니다.


internet speed test


먼저 다운로드 속도를 측정 하고


internet speed test


그다음 업로드 속도을 측정 합니다.


internet speed test


테스트가 완료되면 최종 결과를 보여 줍니다.



2. Fast.com


여기는 사이트에 들어가자 마자 바로 자동으로 속도측정을 시작 합니다.

https://fast.com/ko/


internet speed test




internet speed test


속도 측정이 완료된 화면 입니다상세정보 버튼을 눌러 봅니다.


internet speed test


다운로드 속도 테스트 후 바로 상세보기 버튼을 누르면 업로드 속도는 진행 중일 수 있습니다.

 

 

3.  OpenSpeedTest.com

 

http://openspeedtest.com/ 사이트에 접속 합니다.


internet speed test


가운데 시작 버튼을 클릭 하면 속도 체크를 시작 합니다.


internet speed test


먼저 다운로드 속도를 체크하고 


internet speed test


이어서 업로드 속도를 체크 합니다.


internet speed test


속도 체크가 완료되면 결과를 보여 줍니다.

 

 

4. Google Fiber

 

http://speedtest.googlefiber.net/ 사이트에 접속 합니다.


internet speed test


파란색 시작 버튼을 클릭합니다.


internet speed test


Google Fiber 서비스 관련 안내인데 모바일이 아니니 그냥 Continue를 클릭합니다.


internet speed test


잠시 기다리면 다운로드와 업로드 속도 측정 결과가 나옵니다

 

처음에 얘기 한것 처럼 속도 측정 결과들은 참고사항 입니다.


- copy coding -


JQueryBootStrap을 제작사 홈페이지에서 다운로드 받아 추가하는 방법 이외에 Mavendependencyscript만 추가하여 주면 프로젝트에 추가를 할 수 있습니다스크립트는 일반 예제에서 복사해 와도 되지만 프로젝트 별로 사용할 버전을 선택 해야 하기 때문에 그냥 복사하기 보다는 공신력이 있는 사이트를 이용해서 참조를 하는것이 좋습니다여기서 2곳의 사이트를 소개합니다.

 

https://mvnrepository.com/


mvnrepository.com에서는 라이브러리를 검색을 통하여 찾을 수 있습니다


maven jquery bootstrap


귀찮기는 하지만 검색을 하면 버전 별로 정보가 리스트 되고 리스트에서 원하는 버전을 선택 하면


maven jquery bootstrap


스크립트를 복사해올 수 있습니다. Gradle을 클릭 하면 Gradle용 스크립트가 나옵니다.

 


https://www.webjars.org/

 

webjars.org에서는 첫 화면에 자주 사용하는 라이브러리가 리스트 되어 있고 최신 버전으로 스크립트를 얻을 수 있습니다.


maven jquery bootstrap


만약 최신 버전이 아닌 예전 버전이 필요하다면 콤보 박스를 클릭하면 해당 라이브러지의 버전 정보가 리스트 되고 원하는 버전을 선택하여 


maven jquery bootstrap


상단 Build Tool:에 있는 Maven 버튼을 선택하면 스크립트를 얻을 수 있습니다.

 

복사한 스크립트는 pom.xml에 추가를 해줍니다.


                <dependency>

                   <groupId>org.webjars</groupId>

                   <artifactId>jquery</artifactId>

                   <version>3.4.1</version>

               </dependency>

               <dependency>

                   <groupId>org.webjars</groupId>

                   <artifactId>bootstrap</artifactId>

                   <version>4.4.1</version>

               </dependency>


그리고 Maven UpdateMaven install을 하면 추가된 라이브러리를 jsp에 사용할 수 있게 됩니다.

 

js 파일 위치


추가한 라이브러리를 jsp에서 사용하기 위한 path는 어떻게 하면 알 수 있을까요추가된 라이브러리의 .jar 파일을 확장하면 정확한 js 파일 위치를 찾을 수 있습니다.


maven jquery bootstrap


이렇게 찾은 위치를 script에 반영하면 됩니다.

<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>

 

bootstrap도 동일한 방법으로 위치를 확인 합니다.


maven jquery bootstrap


그리고 스크립트에 반영 합니다. bootstrap은 기본 제공 css를 사용하려면 cssjs를 모두 반영합니다.

<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">

 

사용 예

 

간단하게 JSP파일을 생성해서 잘 반영이 되었는지 사용을 해 봅니다.


 <%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

 

<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>

<script src="/webjars/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>

 

</head>

<body>

 

<div class="container">

 

<table class="table table-hover">

  <thead class="thead-dark">

    <tr>

      <th>codeId</th>

      <th>code</th>

      <th>codeNm</th>

      <th>codeDc</th>

    </tr>

  </thead>

  <tbody>

    <tr>

        <td>COM001</td>

        <td>REGC01</td>

        <td>단일 게시판 이용등록</td>

        <td>단일 게시판 이용등록</td>

        </tr>

    <tr>

        <td>COM001</td>

        <td>REGC02</td>

        <td>커뮤니티 등록</td>

        <td>커뮤니티 등록</td>

    </tr>

    <tr>

        <td>COM001</td>

        <td>REGC03</td>

        <td>동호회 등록</td>

        <td>동호회 등록</td>

    </tr>

    <tr>

        <td>COM001</td>

        <td>REGC04</td>

        <td>명함등록</td>

        <td>명함등록</td>

    </tr>          

  </tbody>

 

</table>

  

</div>

</body>

</html>


maven jquery bootstrap


잘 나오는 군요.  bootstrap을 사용하면 디자인을 없이도 어느 정도의 퀄리티 있는 사이트 제작이 가능 합니다.


- copy coding -


1···46474849505152···118

+ Recent posts