jsp 로그인 페이지 만들기 - eunja511005/Tutorial GitHub Wiki

로그인 시 /signin 으로 이동 하도록 설정

- 로그인 페이지 URL 설정
  . /Tutorial/src/main/java/com/eun/tutorial/config/MyWebSecurityConfigurerAdapter.java
- 로그인 페이지는 인증없이 접근 가능하도록 세팅
  . /Tutorial/src/main/java/com/eun/tutorial/config/MyWebSecurityConfigurerAdapter.java
- 로그인 페이지 URL에 해당하는 controller 설정
  . /Tutorial/src/main/java/com/eun/tutorial/controller/MyWebInitController.java 
- JSP 페이지 prefix, suffix 설정
  . /Tutorial/src/main/resources/application.properties
- JSP 페이지 토큰 설정
  . init.jsp 파일에 토큰 가져 오도록 설정
  . signin.jsp 파일에 submit 버튼 클릭시 토큰 보내도록 세팅
  . signin.jsp 파일에 정상 로그인시 index.html 파일로 가도록 세팅
- json 형태 데이터 주고 받을 수 있도록 의존성 추가
  . pom.xml 파일 수정
- ajax로 로그인 요청 시 json 형태로 리턴
- 크롬 개발자 도구에서 /signin post 방식으로 호출시 csrf 토큰 정상 호출 여부 확인
  . X-XSRF-TOKEN : 816fc229-a5fb-4b27-ad2d-2aa9cfe399c4
- 로그인 성공시 정상 페이지 이동 확인

!image

image

image

image

image

image

image

image

image

image

image

html 소스 다운 로드 및 프로젝트로 복사

- 접속 주소 : https://getbootstrap.com/
- Examples 탭 클릭
- 다운로드
- 압축해제
- bootstrap-5.3.0-alpha3-examples.zip\bootstrap-5.3.0-alpha3-examples\sign-in 디렉토리로 이동
- index.html 파일 열어서 내용 복사 후 /Tutorial/src/main/webapp/WEB-INF/signin.jsp 파일 만든 후 붙여 넣기
- sign-in.css 복사(webapp 하위로 일단 복사하고 나중에 css 디렉토리 하위로 바꾸고 jsp 파일 내부에서 참조 위치도 css 하위로 바꿔야 함)
- asset 디렉토리 복사

image

image

image

image

image

결과 확인

http://localhost:8080/

image

Commit & Push

- Git CMD 실행
- d:
- cd D:\Users\ywbes\git\Tutorial
- git status
- git add
- git commit
- commit 메세지 수정
- 저장후 note++ 종료
- git push
- 업로드 확인 : https://github.com/eunja511005/Tutorial

image

image

다른 로그인 페이지 참고

- 구글에서 검색 : bootstrap signin signup
- 복사
- login.jsp 파일 만들기
- i + tab
- 헤더와 바디에 부트 스트랩 css, js 추가
    <link href="../bootstrap-5.3.0-alpha3-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../bootstrap-5.3.0-alpha3-dist/js/bootstrap.bundle.min.js"></script>
- .container + tab
- 붙여 넣기

image

image

⚠️ **GitHub.com Fallback** ⚠️