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
- 로그인 성공시 정상 페이지 이동 확인
!
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 디렉토리 복사
결과 확인
http://localhost:8080/
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
다른 로그인 페이지 참고
- 구글에서 검색 : 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
- 붙여 넣기