Node.js 프로젝트(5) - 회원가입, 로그인, 로그아웃 구현(feat. cookie)

1. 회원가입

 

회원가입을 구현하기 위해 가장 먼저 user의 id, password, email 등 정보를 담을 데이터베이스를 구축해야 한다.

간단하게 mysql server를 사용하여 데이터베이스를 사용하였다.

 

어드민 권한으로 데이터베이스에 로그인하고

study_db라는 데이터베이스를 생성하였다. 

 

 

사용자의 정보를 담기 위해 member 테이블을 생성하고 column은 

 

다음과 같이 구성되어 있다.

 

이제 데이터베이스가 준비되었으니 회원가입을 구현해보도록 하겠다.

 

npm install --save mysql
npm install --save crypto

 

첫 번째로, 위 명령어를 통해 mysql 모듈과 crypto 모듈을 설치해준다. 

mysql은 데이터베이스를 사용하기 위함이고, crypto는 패스워드의 암호화를 진행할 때 사용되는 모듈이다.

 

 

회원가입은 다음과 같은 순서로 진행된다.

세부적인 단계는 더 있겠지만 나는 크게 3단계로 진행하였다.

 

1. 회원가입 페이지 구현
2. 사용자 정보의 유효성 검사
3. 입력받은 정보를 데이터베이스에 저장 및 보안을 위한 패스워드 암호화

 

1. 회원가입 페이지 구현

 

먼저 회원가입 페이지를 구현하기 위해 signUp.ejs라는 파일을 생성해주었고,

회원가입 페이지로의 요청을 처리하기 위한 라우터를 생성해주었다.

 

<div class="row">
    <h4>회원가입</h4>
</div>

<div class="idForm">
    <i class="material-icons prefix">account_circle</i>
    <input type="text" id="id" class="id" name="id" placeholder="ID 4~19 Words"/><br />
</div>

<div class="row margin emailForm">
    <i class="material-icons prefix">email</i>
    <input id="email" name="email" type="text" style="cursor: auto;" class="email" placeholder="Email" />
</div>

<div class="row margin passForm">
    <i class="material-icons prefix">vpn_key</i>
    <input id="password" name="password" type="password" class="pw" placeholder="Password"/>
</div>

<div class="row margin passForm">
    <i class="material-icons prefix">vpn_key</i>
    <input id="password_a" name="cpassword" type="password"class="pw" placeholder="Password Again"/>
</div>

<div class="row">
    <button type="button" class="btn" onclick='checkPW();'>회원가입</button>
    <p class="margin">이미 계정을 갖고 계신가요? <a href="./login">지금 로그인하기</a></p>
</div>

 

다음과 같은 코드로 회원가입 정보인 ID, email, password를 입력받는 양식을 생성했다.

 

 

 

2. 사용자 정보 유효성 검사

 

input 태그를 통해 입력받은 데이터를 ajax를 사용하여 post방식으로 전달하기 전에, 유효성 검사를 진행하여 불필요한 실행을 최소화하려 하였다.

유효성 검사란 입력받은 정보의 글자 수 제한, 유의미한 데이터인지 (email인증, id중복검사) 등에 해당하는 작업이다. 나는 아이디의 글자 수 제한과 비밀번호의 최소 길이인 4글자, 아이디의 중복값, 비밀번호와 비밀번호 확인의 일치여부에 대한 유효성 검사를 진행하였다.

 

여기서 ID의 중복체크는 데이터베이스에 접근해야 알 수 있는 정보이므로 ajax로 데이터를 넘겨받은 이후에 체크하고 이에 대한 응답값인 data로 중복여부를 확인해주었다.

 

3. 입력받은 정보를 데이터베이스에 저장 및 보안을 위한 패스워드 암호화

 

유효성 검사까지 끝마친 사용자 데이터를 데이터베이스에 성공적으로 저장하고, 이에 대한 응답을 보내는 작업이다.

이전 단계에서 post방식으로 받은 요청에 대해 ID중복 여부를 확인하고, 중복이 아닐 경우 password를 암호화하여 데이터베이스에 저장하기 위해 crypto 모듈을 사용하였다.

 

crypto모듈은 단방향 암호화를 위해 보편적으로 사용되는 모듈이며 단순히 해시함수로만 암호화 하는것은 보안에 취약하므로 salt라는 완전한 난수를 추가적으로 사용하여 암호화를 진행했다.

 

암호화된 비밀번호와, 암호화에 사용된 salt값을 함께 데이터베이스에 저장하여 추후 로그인시에 비밀번호를 비교할 수 있도록 하였다. 

 

추가적으로, 두 번째 query에서 set ? 뒤에 sql이라는 object를 넣어 쿼리를 요청하는 방식을 사용하였는데 이것도 보안성 때문이다.

첫 번째 쿼리에서처럼 where userid = ''" + id + "';"와 같은 구조로 쿼리를 날리면 사이에 있는 변수의 값만 살짝 수정해도 0번째 가입자인 어드민권한으로 로그인하거나, 데이터베이스에 있는 값들을 모두 쓸모없는 값으로 바꾸어 버릴수도 있다고 한다.

 

 

 

---

2. 로그인

 

다음은 로그인이다. 로그인의 단계를 크게 나누면 다음과 같다.

 

1. 로그인 페이지 구현
2. 입력받은 정보와 데이터베이스에 저장된 정보를 비교하여 로그인처리

여기서 쿠키와 세션이라는 개념이 나온다. 크롬이나 IE같은 브라우저들을 사용하다가 인터넷 사용 기록을 삭제할 때 쿠키라는 개념을 들어본 적이 있을것이다. 이는 쉽게 말해 로그인 정보를 유지하기 위해 사용되는 것이다. 

 

 

쿠키와 세션은 따로 정리해두었으니 여기를 참고해서 알아두면 좋을 것 같다.

 

가장 먼저, 쿠키를 사용하기 위해 다음의 명령어로 cookieParser를 설치하였다.

 

npm install --save cookie-parser

 

1. 로그인 페이지 구현

 

로그인 페이지는 login.ejs라는 파일을 생성하여 구현하였고 form 태그를 사용해 post방식으로 요청하도록 구현하였다. 구현 코드와 이미지는 다음과 같다.

 

<form class="login" action="/login" method="post">
    <h2>로그인</h2>
    <div class="login_id">
        <h4><i class="material-icons prefix">account_circle</i>ID</h4>
        <input type="text" name="id" id="id" placeholder="ID">
    </div>
    <div class="login_pw">
        <h4><i class="material-icons prefix">vpn_key</i>Password</h4>
        <input type="password" name="pw" id="pw" placeholder="Password">
    </div>
    <div class="submit">
        <input type="submit" value="submit">
    </div>
</form>

 

 

2. 입력받은 정보와 데이터베이스에 저장된 정보를 비교

 

post 방식으로 전달받은 로그인 데이터는 라우터에서 처리하였다.

가장 먼저 userid를 통해 가입되어있는지의 여부를 확인하였고 query의 응답인 rows의 length가 0일 경우 존재하지 않는 것이므로 "아이디가 존재하지 않음" 으로 처리하고 다시 로그인페이지로 돌아가게 하였다.

 

만약 응답값이 있다면 아이디는 존재하는 것이므로, 받아온 salt와 password를 사용하여 입력받은 비밀번호가 일치하는지 판단해주었다.

 

password까지 일치하여 로그인이 성공했을 시에 cookieparser를 사용하여 현재시간으로부터 900000ms 동안 지속되는 쿠키를 생성해주었고 JS에서 접근하는 상황을 방지하기 위해 httponly 옵션을 True로 설정해주었다.

 

 

 

login 라우터의 index.js

 

 

회원가입과 로그인을 구현하였으니 실제로 잘 동작하는지 시뮬레이션을 돌려보도록 하겠다.

 

---

 

 

현재 DB에는 아무런 사용자의 정보도 존재하지 않는 상태이다.

회원가입 창에 test라는 이름과 1234라는 비밀번호로 회원가입을 시도하였다.

 

"정상적으로 회원가입 되었습니다." 라는 알람창이 뜨고 DB를 확인해보니

 

정상적으로 DB에 사용자 정보가 입력된 것을 볼 수 있었다.

 

이번엔 로그인이다.

 

test라는 계정에 1234 라는 비밀번호를 입력하여 로그인을 시도하였다.

 

로그인 하기 전

로그인 시도 이후 user라는 쿠키가 생성된 것을 볼 수 있다. 

 

 

로그인에 성공하는 경우를 봤으니 실패하는 경우도 넣어보도록 하겠다.

 

test라는 아이디와 1111이라는 틀린 비밀번호를 입력한 결과

 

비밀번호 에러로 로그인에 실패했다는 메시지가 출력되는 것을 볼 수 있다.

 

 

마지막으로, 쿠키가 유지됨에 따라 로그인 버튼을 로그아웃 버튼으로 바꾸어 줄 필요가 있으므로 

다음과 같은 JS코드를 사용하여 로그인 여부에 따라 화면에 출력되는 버튼이 다르게 설정하였다.

 

 

---

3. 로그아웃

 

 

로그아웃은 정말 간단하다. 쿠키를 삭제해주면 끝이다. 

 

---

근데 UI는 언제 꾸미지?