search

chessta0126 / festivalBooking

0 stars 0 forks source link

회원가입 / 로그인 기능 #3

Open chessta0126 opened 1 year ago

chessta0126 commented 1 year ago

UserController (view 화면으로 이동)

GetMapping으로 jsp 페이지 연동

Model을 통해 EL 문법으로 layout에게 경로 내려주기

UserRestController

User

UserBO

UserDAO

xml

비밀번호 보안

import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;

public class EncryptUtils { public static String md5(String message) { String encData = ""; try { MessageDigest md = MessageDigest.getInstance("MD5");

        byte[] bytes = message.getBytes();
        md.update(bytes);
        byte[] digest = md.digest();

        for(int i = 0; i < digest.length; i++ ) {
            encData += Integer.toHexString(digest[i]&0xff); // 16진수로 변환하는 과정
        }
    } catch (NoSuchAlgorithmException e) {
        e.printStackTrace();
    }
    return encData;
}

}

- [x] 비밀번호 해싱(md-5) : 회원가입 / 로그인 시

## style.css
- [x] a , a:hover {text-decoration:none;}
- [x] header
- [x] 메뉴(nav)
- [x] 메뉴 hover 배경색
- [x] text 색깔 지정
- [x] 로그인, 회원가입 버튼 {color: #fff; text-decoration: none;} 
- [x] .sign-up-box
- [x] .login-box

## jsp
- [x] **layout**
- [x] **signUp**
- - [x] 마크업
- - [x] 프로필 이미지 첨부 : 파일 첨부, 확장자 제한
- - [x] 프로필 이미지 첨부 : default 이미지 보이기
- - [x] 프로필 이미지 첨부 : 업로드 된 임시 파일 이름 저장
- - [x] 프로필 이미지 첨부 : a 태그의 올라가는 현상 방지 - e.preventDefault( );
- - [x] 프로필 이미지 첨부 : 이미지 클릭시 파일 클릭
- - [x] 프로필 이미지 첨부 : 확장자 validation check
- - [x] 프로필 이미지 첨부 : 업로드 성공시 default 이미지 숨기기
- - [x] 프로필 이미지 첨부 : 업로드 성공시 업로드 이미지 보이기
- - [x] 중복확인 : d-none 기능
- - [x] 중복확인 : validation check
- - [x] 중복확인 : AJAX 통신 이상 없음
- - [x] 회원가입 : submit 기능 중단 - e.preventDefault( );
- - [x] 회원가입 : validation check
- - [x] 회원가입 : request parameter 변수 정의
- - [x] 회원가입 : formData에 변수 담기
- - [x] 회원가입 : AJAX 통신 이상 없음

$.ajax({ type:'POST' ,url:'/user/sign_up' , data: formData , enctype: "multipart/form-data" // 파일 업로드를 위한 필수 설정 , processData: false // 파일 업로드를 위한 필수 설정 , contentType: false // 파일 업로드를 위한 필수 설정

- - [x] 성공 후 로그인 페이지로 이동

- [x] **signIn**
- - [x] submit 기능 중단 - e.preventDefault( );
- - [x] validation check
- - [x] request parameter 변수 정의 (url, params)

let url = $(this).attr('action'); let params = $(this).serialize();


- - [x] AJAX 통신 이상 없음
- - [x] 성공 후 타임라인 페이지로 이동

# 회원 가입(signUp)
- [x] 아이디 중복 확인
- [x] DB insert
- [x] 비밀번호 해싱 (EncryptUtils)
- [x] 완료 후 로그인 페이지로 이동

# 로그인 (signIn)
- [x] 로그인 성공
- [x] 로그인 후 타임라인 페이지로 이동
- [x] 회원가입 페이지로 이동 링크 작동

# 로그아웃
- [x] session에서 데이터 제거
- [x] 로그아웃 성공
chessta0126 commented 1 year ago

formdata에 담지 않아 이미지 파일의 파라미터가 안 가서 이미지가 DB에 들어가지 않았던 것.

chessta0126 commented 1 year ago

프로필 이미지 null일 경우 default image

-> 업로드한 사진 이미지를 추가한다.

회원 가입이 완료되기 전에 업로드 시 바로 보여야 하므로, '파일 클릭 시'를 이벤트로 잡아 확장자 체크 후 AJAX로 전송? -> 이미지를 올려놓고 회원 가입을 안 하면 DB에 쓸 데 없는 파일만 쌓이게 되고, FileManagerService 에서 지정한 경로에도 쌓이게 되므로, 그 전에 처리되도록 해야 한다.

-> FileManagerService에 넘기는 BO나 RestController 선에서 처리

-> DB에서 컬럼을 not null로 설정하게 되면 에러가 나므로 nullable하게 했다. 그러나 null이 파라미터로 들어오면 어쨌든 DB 에 값이 들어왔다고 인식하고 default image가 아닌 null로 나오는 모양이다.

chessta0126 commented 1 year ago

결국 BO에서 default image 처리

-> DB에서는 profileImageUrl 컬럼을 not null로 하여, default 이미지 처리가 잘 되어 잘 들어오는지 확인할 수 있게 한다.

String imagePath = null;
        if(profileImageUrl != null) {
            imagePath = fileManager.saveFile(name, profileImageUrl);
        } else {
            imagePath = "/images/★default file/default profileImage.jpg";
        }
chessta0126 commented 1 year ago

layout.jsp에 조각 페이지를 첨부

header와 nav는 고정으로 가지고 있고, 밑의 내용만 바꾸도록 한다.

-> Controller에서 layout 페이지를 return해서 view화면을 보여줄 때, model에 내용을 담은 조각 페이지 주소를 담아준다.

-> 내용 부분은 주소를 EL문법으로 내려받아 상황에 따라 변동할 수 있게 한다.

chessta0126 commented 1 year ago

이미지가 경로로 저장된다면, 사용자가 폴더 이동 / 사진 삭제를 한다면 어떻게 되는가?

-> FileManagerService에서 따로 폴더를 만들어 사진을 저장해놔서 괜찮다. 경로 뿐만 아니라 MultipartFile 형식으로 사진 자체가 저장된 것.

chessta0126 commented 1 year ago

마이페이지 등 로그인하지 않았을 시 접근 불가능한 페이지

-> session에 userId가 null이면 로그인 페이지로 이동시킨다.

layout의 경우에는 Controller의 model 에서 매핑 주소를 내려받아 사용했다. myPageController에서는 이미 비로그인시 로그인 페이지로 이동하도록

model.addAttribute("viewName","user/signIn");

를 사용했다. layout이 이 model을 받아 쓸 수 있는데, signIn에서도 model을 받는 것이 가능한가 해봤더니

location.href = "/${viewName}";

이렇게 로그인 후 이동할 경로를 EL 문법으로 쓰면 404가 뜬다. 잘못된 경로라는 얘기.. Controller에서 내려받은 model은 조각 페이지에서는 쓸 수 없었다.

그리고 로그인 성공 후 이동 경로를 EL 문법으로 하면, 기본적으로는 main으로 이동해야 하므로 로그인 완료 메시지를 Json으로 내려주는 RestController에서 이동할 페이지 정보도 내려줘야 하는데... 애초에 Model 객체는 화면이 아닌 @ResponseBody 가 붙은 곳(즉, RestController)에서는 절대로 사용하지 않는다. 결과가 화면이 아니기 때문에 뿌려줄 jsp가 없기 때문.

따라서 UserRestController에서는 return할 Map인 result에 담아서 Json으로 내려주고 signIn.jsp의 AJAX에서는 data로 이동할 페이지 정보를 전달 받아야 한다. 이렇게 되면

location.href = "/data.이동할 페이지 정보를 담은 key";

가 AJAX 성공 시 이동할 경로가 된다.

그럼 EL문법을 쓰는 게 아니고, Json을 받는 것이므로 Json이 아닌 경로를 내려주는 myPageController에서는, 비로그인 시 로그인 페이지로 이동 시키는 것 외에는 그 다음에 로그인 후 어디로 가라고 정보를 전달할 수 없다.

chessta0126 commented 1 year ago
chessta0126 commented 1 year ago

xml에서도 where절에 조건문을 걸어서 name과 loginId 중 null이 아닌 경우에 중복 확인이 실행되도록 한다. (AJAX에서 파라미터를 둘 중 하나만 보내므로, 둘 다 넘어올 수는 없다.)

chessta0126 commented 1 year ago

이미지 파일 첨부 시 기본 이미지 -> 선택한 이미지로 변경해서 보이게 하기

-> 따라서 선택할 때마다 이미지 파일을 전부 전송해서 FileManagerService를 통해 폴더를 만들어 저장하는 것은 불필요한 메모리 낭비

위의 이유로 DB에 넣었다가 select로 꺼내오거나, AJAX로 전송 후 RestController를 통해 받아오면 안 된다. -> 그 전에 script 선에서 처리!!

let filePath = URL.createObjectURL(event.target.files[0]);
$("#signUpImg").attr("src",filePath);
chessta0126 commented 1 year ago

로그인 후, 로그인 이전 클릭했던 페이지로 이동

signIn.jsp 에서 script에 reffer를 정의하고, 이동에 사용한다.

비로그인 시 접근 제한을 걸기 위해 바로 user/signIn으로 보냈던 링크 문제

메뉴의 myPage / 공연 홍보 탭은 session의 정보를 사용해야 하기 때문에 로그인이 됐을 경우에만 접근 가능하다. -> 비로그인 시 로그인 페이지로 이동

그러나 해당 view페이지를 거치지 않고 링크를 아예 user/signIn으로 보냈으므로 이전에 클릭했던 주소인 reffer를 사용할 수 없는 문제 발생

(정확히 말하면, 이전 클릭했던 페이지가 로그인 페이지가 되어, 로그인 후에 로그인 페이지로 이동되므로 부자연스럽다.)

-> MyPageController / FestivalController에서 signIn.jsp로 model을 내려줄 때, referrer을 조정할 수 있도록 추가 식별 정보 recognizePage를 내려준다.