20230816 _[51일차]_01. 스프링부트 로그인구현 & 암호화

---

압축파일 넣을때 Import - Existing Projects into Workspace

Select archive file 

thymeleaf는 html파일로 jsp와 다르게 vscode로도 작업가능

상단에 thymeleaf선언만 해주면됨

 

index.html 에서 아래처럼 적어주면 

menu.html의 menu라는 이름을 가져오라고 아래처럼 해주면

아래의 이름을 보고 가져온다.

 

---

로고생성하는 사이트

My Brand New Logo — 로고 메이커 — 브랜드 디자인

My Brand New Logo — 로고 메이커 — 브랜드 디자인

 

아래처럼 로고를 만들어준다.

---

다시 aug09 프로젝트로 돌아가서 

로그인 로직 먼저 완성하고 pw에 대한 암호화를 해보자

 

---

---

[JavaScript] ECMAScript 2023 살펴보기 (iyu88.github.io)

[JavaScript] ECMAScript 2023 살펴보기

---

 

일단 받은 파일로 login.jsp 완성해주고

 

id와 pw 입력값이 없을떄 팝업을 띄울예정.

JS에서 선택자는 .querySelector ()

input 창에 입력한 아이디와 비밀번호를 잡아서 id, pw라는 변수에 각각 넣어주고

(입력한 값들의 input창(object)를 잡아서 넣어준거라서 id와 pw는 object가 된다.)

이걸 checkItems라는 배열에 넣어준다. (object를 object에 넣어준거)

 

그래서 id와 pw를 출력해보면 아래와 같은 형태로 나온다.

 

object에서 value값을 뽑아야 아래처럼 내가 입력한 id와 pw가 나온다.

 

checkItems 배열에서 값을 뽑아내려면 아래처럼 index에서 value를 뽑아내야 한다.

---

[JavaScript] Null check, 빈 값 체크 (tistory.com)

[JavaScript] Null check, 빈 값 체크

---

 

.every () 는 모든것을 다 뽑아낸다는 의미 (for문이라고 생각하면 된다.)

checkItem배열에서 값들을 item이라는 이름으로 뽑아내고

item의 value값이 null이거나 공백이라면 (입력한 id와 pw값이 없다면)

item.parentNode.querySelector("label")

item들의 부모요소에서 label이라는 이름의 태그를 불러와서 

.innerHTML로 값을 뽑아내 팝업으로 띄운다.

 

---

Array.prototype.every() - JavaScript | MDN (mozilla.org)

Array.prototype.every() - JavaScript | MDN

---

== / ===

자바스크립트: '==' 와 '===' 는 다르다! (velog.io)

자바스크립트: '==' 와 '===' 는 다르다!

---

Element.innerHTML - Web API | MDN (mozilla.org)

Element.innerHTML - Web API | MDN

 

---

부모노드/자식노드

Node로의 접근 완벽 정리! (parentNode,nextSibling...nodeType) (tistory.com)

Node로의 접근 완벽 정리! (parentNode,nextSibling...nodeType)

---

 

아래처럼 잡아줘야 팝업이 뜬다.

부모의 부모의 첫번째 자식으로 잡는다. (부트스트랩 때문에 부모의 형제로 찾는게 안되는듯?)

첫번째 자식이면 인덱스값 0으로 해야하는데 태그사이의 공백때문에 1로 잡아줘야 잡혔다.

아니면 label 태그이름으로 잡으려면 querySelector 사용해서 아래처럼

ID가 공란인채로 로그인 버튼을 누르면 Label 의 text인 I D가 뜬다.

div와 label 사이의 공백을 없애니 자식들중 0으로 잡았을때 label을 제대로 잡는다.

아래처럼 해도 결과는 같다. 

previousElementSibling (이전요소의 형제요소)

---

[ 모던자바스크립트 역사 ]

모던 자바스크립트란 무엇인가(updated). 모던 JavaScript란 무엇인지를 ECMAScript 주요 개정안과… | by Bora Lee | Medium

모던 자바스크립트란 무엇인가?

[javascript] 자바스크립트의 역사 :: Rin's blog (tistory.com)

[javascript] 자바스크립트의 역사

---

flag가 ture라면 (입력한 id&pw값이 있다면)

가상 form을 만들어서 html(body)에 붙힌 후에 submit 한다.

 

이렇게 post방식으로 내보낸 form을

LoginController 에서 잡는다.

입력값을 map으로 받아와서 출력해보니 잘된다.

이제 서비스로 보내자

연결먼저하고 

서비스 생성

이제 아래처럼 밑줄뜨는 login 메소드를 만들자

서비스에서 DAO에 일시키고 LoginDAO 생성

DAO는 interface로 만들어준다.

loginMapper도 생성해준다. 

id, parameterType, resultType 잘 맞춰주기

내가 입력한 id & pw 와 일치하는 데이터가 있다면

그 갯수와, 해당 계정이름(m_name)을 가져오는 쿼리문 작성

 

이렇게 하면 아래처럼 콘솔창에 출력된다.

입력한 id / pw 를 map에 담아서 db로 가져간 후 같은값이 있는지 비교한다.

같은값이 있다면 result의 count 값이 1이 나온다.

 

 

if(Integer.parseInt((String.valueOf(result.get("count"))) == 1)

(object를 string으로 바꿔주고 다시 int로 바꿔줌)

=> result에 들어있는 count의 값이 1이라면 로직 실행

리턴할 페이지 수정해주고

로그인성공하면 첫화면(/)으로 가고, 실패하면 로그인페이지(login)로 간다.

id & pw가 일치한다면 세션에 id, name을 각각 mid, mname이라는 이름으로 담아서 메인페이지로 돌아간다.

---

 

이제 로그인 성공하면 아래 부분에 '(mname)님 반갑습니다' 문구를 띄워보자

세션안에 있는 mname을 가져와서 jsp화면에 띄우려면

${sessionScope.mname } => 세션에 있는 값은 이렇게 뽑아와야 한다.

로그아웃했을때는 '(mname)님 반갑습니다' 멘트가 안나오도록 조건문 걸어줄건데

코어태그먼저 선언

세션에서 뽑아낸 값이 null이면 '로그인 해주세요' 라는 문구가 뜨고,

null이 아니라면 '(mname)님 반갑습니다' 멘트 띄우자.

이때 index.jsp에 있던 core 선언을 menu에 넣어주면 모든 jsp에 넣어줄 필요가 없다.

 

메뉴바 정리

myinfo 메뉴와, logout 메뉴를 추가해줬다.

choose 조건문으로 

mid가 null 이면(로그인 안했다면) 메뉴바에 myinfo 랑 logout이 뜨고

mid가 null이 아니면(로그인 했다면) login이 뜬다.

 

---

로그아웃 로직을 만들자.

메뉴바의 logout을 누르면 ( "./logout" 으로 이동하도록 menu.jsp에서 설정해줬다) 

방법1. 세션에서 값(mid, mname)을 뽑아내서 remove

방법2. 세션 자체를 무효화하거나

 

return값을 redirect로 해서 메인페이지(/)로 보내준다.

 

로그인한 상태에서 로그아웃을 누르면 메인페이지로 이동하고 

'로그인 해주세요' 라는 문구가 뜬다.

로그아웃을 누르면 확인창이 뜨도록 만들자

아래부분에서 주소가 아니라 onclick으로 창이 뜨는 기능을 넣어줄거다.

이제 로그아웃을 클릭하면 logout 함수가 실행되면서 팝업창이 뜬다.

 

---

BoardController에서 임시로 넣어줬던 id 대신에 이제 세션에서 가져온 mid를 넣어준다.

매개변수에 session을 넣어주는 대신

HttpSession session = request.getSession(); 요렇게 세션을 가져와줘줘도 된다.

위처럼 세션에서 가져온 값은 object이기 때문에 string으로 바꿔서 dto에 넣어줘야 한다.

dto에서는 string 타입으로 m_id 라는 변수를 선언해줬었다.

아래처럼 캐스트 걸어준다.

String.valueof(~) => 객체를 문자열로 변환

---

[Java] Casting, valueOf, toString 비교 :: 너나들이 개발 이야기 (tistory.com)

[Java] Casting, valueOf, toString 비교

---

---

ip도 가져와서 띄워보자

dto에서 ip를 가져와서 json에 넣어주고 이게 리턴되면 detail로 간다. (모달창에 뜨도록)

mapper에서도 ip를 불러와주고

불러온 ip 가 들어갈 자리를 board.jsp에도 추가해준다.

 

모달창에도 ip를 불러오려면 자리먼저 만들어주고

ajax에서 ip를 가져와주고, 

 

게시판에 있는 ip를 잡아온게 아니라

data를 잡아서 바로 모달창으로 넣어줬다.

d

아니면 다른 값들처럼 게시판의 ip를 잡아서 모달창으로 띄워줘도 된다.

---

암호화 및 복호화

SHA 암호화 (단방향)

 

SHA-1 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)

SHA-1 - 위키백과, 우리 모두의 백과사전

---

 

SHA1 으로 암호화 시켜보면 아래처럼 된다.

 

SHA2 로 암호화 시켜주면 내가 정해준 길이만큼(195부터 시작)

두개의 값에 대해서 차이점은 1 하나밖에 없는데 

암호화된 값을 보면 전혀 다른것을 확인할 수 있다.

같은 값에 대해서 길이만 다르게 준다면

 

MD5로 암호화 한후 그 값을 SHA1로 한번더 암호화 해준다.

---

[Security] 단방향 암호화 / 양방향 암호화 (velog.io)

 

[Security] 단방향 암호화 / 양방향 암호화

---

AES 암호화  키값이 'PYO' 은 기억하고 있어야한다.

이걸 다시 HEX 형식으로 한번더 

반대로 UNHEX 화 시켜보자 (이때 위에서 암호화할때 정해준 key값이 필요하다)

MD5 암호화