로그인 구현

프로젝트가 끝났고 배포도 끝난 지금 이 상황에서

내가 작성했던 코드를 다시한번 리뷰해보기로 한다.

인간의 생각과 기억은 너무나도 휘발성이 강하기 때문이지

자 그럼 다시 공부 시작!!

 

 

MemberMapper.xml

select 쿼리를 작성한다.

유저의 email과 password를 기준으로 select 해온다.

resultType은 UserEntity.

<select id="selectUserByEmailPassword"
        resultType="com.emptybeer.etb.entities.member.UserEntity">
    SELECT `email`             AS `email`,
           `password`          AS `password`,
           `nickname`          AS `nickname`,
           `name`              AS `name`,
           `contact`           AS `contact`,
           `address_postal`    AS `addressPostal`,
           `address_primary`   AS `addressPrimary`,
           `address_secondary` AS `addressSecondary`,
           `registered_on`     AS `registeredOn`
    FROM `etb_member`.`users`
    WHERE BINARY `email` = #{email}
      AND BINARY `password` = #{password}
    LIMIT 1
</select>

 

 

IMemberMapper.java

인터페이스 작성

@param으로 email과 password 값을 불러온다

UserEntity selectUserByEmailPassword(@Param(value = "email") String email,
                                     @Param(value = "password") String password);

 

 

 

MemberService.java

existingUser는 해싱된 유저의 패스워드와 유저의 이메일을 가지고 있는데

만약 existingUser가 null일 경우 (이메일과 비밀번호가 일치하는 유저가 없는 경우)

CommonResult.FAILURE를 반환한다.

 

로그인 했을 경우 우측 상단 헤더에 OO님 이라고 닉네임을 표시해주기 위해서

user에 existingUser.getNickname() (존재하는 유저의 닉네임)을 set 해준다.

마지막으로 그 외의 경우(이메일과 비밀번호가 일치 할 경우) CommonResult.SUCCESS를 반환한다.

// 로그인
@Transactional
public Enum<? extends IResult> login(UserEntity user) {
    UserEntity existingUser = this.memberMapper.selectUserByEmailPassword(
            user.getEmail(),
            CryptoUtils.hashSha512(user.getPassword()));
    if (existingUser == null) {
        System.out.println("실패!!!!");
        return CommonResult.FAILURE;
    }
    System.out.println("성공!!!!");
    user.setNickname(existingUser.getNickname());
    return CommonResult.SUCCESS;
}

 

 

 

MemberController.java

GetMapping으로 member/login 페이지를 열어준다.

로그인은 post 방식으로 요청한다.

만약 서비스로 부터 넘어온 결과가 CommonResult.SUCCESS 일 경우

유저의 정보를 불러와야 하기 때문에

세션에 user의 정보를 setAttribute,

그리고 유저의 이메일을 기준으로 가져온 유저의 모든 정보를 불러오기 위해

session.setAttribute("user", this.memberService.getUser(user.getEmail()));를 적어주어

세션에 setAttribute.

 

 

// 로그인
@GetMapping(value = "login",
        produces = MediaType.TEXT_HTML_VALUE)
public ModelAndView getLogin() {
    ModelAndView modelAndView = new ModelAndView("member/login");
    return modelAndView;
}

@RequestMapping(value = "login",
        method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody
public String postLogin(HttpSession session, UserEntity user) {
    Enum<?> result = this.memberService.login(user);
    if (result == CommonResult.SUCCESS) {
        session.setAttribute("user", user); // 해당 요소에 user 이름의 user 값을 가지는 HTML 속성을 추가한다.
        session.setAttribute("user", this.memberService.getUser(user.getEmail()));
        System.out.println("이메일/비밀번호 맞음.");
    } else {
        System.out.println("이메일/비밀번호 틀림.");
    }
    JSONObject responseObject = new JSONObject();
    responseObject.put("result", result.name().toLowerCase());
    return responseObject.toString();
}

 

login.js

만약 이메일 값이 입력되지 않은 채 로그인하기 버튼을 눌렀을 경우

innerText로 '이메일을 입력해주세요' 를 표시한다.

 

만약 비밀번호가 입력되지 않은 채 로그인하지 버튼을 눌렀을 경우

innerText로 '비밀번호를 입력해주세요'를 표시한다.

 

formData에 email과 password를 실어서 xhr을 post 방식으로 오픈해준다. 

주소는 member/login

switch문으로 success 일 경우

성공적으로 로그인 되었다고 alert를 띄워준 후

index.html로 데려다준다.

 

그 외의 경우 로그인에 실패하였다고 alert를 띄워준다.

 

이도 저도 아닌 다른 문제가 생겼을 경우

서버와 통신하지 못하였다고 경고창을 띄워준다.

 

const form = window.document.getElementById('form');

const Warning = {
    getElementById: () => form.querySelector('[rel="warningRow"]'),
    show: (text) => {
        const warningRow = Warning.getElementById();
        warningRow.querySelector('.text').innerText = text;
        warningRow.classList.add('visible');
    },
    hide: () => Warning.getElementById().classList.remove('visible')
};


let text = form.querySelector('.text');
form.onsubmit = (e) => {
    e.preventDefault();
    Warning.hide();
    if (form['email'].value === '') {
        form.querySelector('.warning-row').classList.add('visible');
        text.innerText = '이메일을 입력해주세요.';
        form['email'].focus();
        return false;
    }
    if (form['password'].value === '') {
        form.querySelector('.warning-row').classList.add('visible');
        text.innerText = '비밀번호를 입력해주세요.';
        form['password'].focus();
        return false;
    }

    Cover.show('로그인 중 입니다.\n\n 잠시만 기다려 주세요.')
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('email', form['email'].value);
    formData.append('password', form['password'].value);

    xhr.open('POST', '/member/login');
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status >= 200 && xhr.status < 300) {
                const responseObject = JSON.parse(xhr.responseText);
                switch (responseObject['result']) {
                    case'success':
                        alert('성공적으로 로그인 되었습니다.');
                        window.location.href = '/';
                            // window.location.reload();
                            break;
                    default:
                        alert('로그인에 실패하였습니다.다시 시도해 주세요.');
                }
            } else {
                Warning.show('서버와 통신하지 못하였습니다. 잠시 후 다시 시도해 주세요.');
            }
        }
    };
    xhr.send(formData);
}

 

이상 로그인 하기 구현 끝!!!