본문 바로가기
nodejs

[node.js] express 로그인 정보 전달하기

by jinbro 2017. 5. 15.
[먼저 보면 좋은 게시글] 
- [웹기본개념] HTTP 그리고 REST API 다가가기 : http://jinbroing.tistory.com/96 (HTTP 메서드 참고)
- [node.js] express 라우팅, CRUD / 쿼리스트링 : http://jinbroing.tistory.com/97 (라우팅이란 참고)
- [node.js] express 그리고 템플릿엔진 ejs : http://jinbroing.tistory.com/107


[서버에 요청할 때 구분해서 쓰자]
- 서버에 정보를 요청(Read)할 때는 GET
- 서버에 클라이언트가 정보를 전달할 때에는 POST


[서버로 데이터를 전송할땐]
- 클라이언트가 서버로 데이터를 전송할 땐 POST
- express POST 방식 구현하기


[서버로 데이터 전송 구현해보기]
0) 서버 환경 : express 4.x + ejs(템플릿 엔진) : express로 웹서버 구축하는 방법 -  먼저 보면 좋은 게시글 4번째 참고


1) /views 디렉토리 아래 login.ejs 파일 만들기


2) /routes/index.js 접근 후 라우팅 코드 추가 : 클라이언트의 http://도메인/login 에 대한 응답 요청 /views/login.ejs 파일 응답
1
2
3
router.get('/login'function(req, res, next){
    res.render('login', { title: 'login' });
});
cs


- 로그인 폼이 있는 페이지는 GET 방식으로 요청 응답 : login 페이지(.html 파일)에 대한 응답일 뿐 아직 로그인 정보 주는 것 아님
- 로그인 정보를 넘겨주고 서버는 그에 대한 응답을 할 때에는 POST를 사용
- 정보를 작성하는 동작과 정보를 전달하는 동작을 구분할 줄 알아야함


3) /views/login.ejs 파일에 접근하여 로그인 폼 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <meta charset="utf-8" />
  </head>
  <body>
 
    <!-- 로그인폼 -->
    <form action="/login" method="post">
      아이디 : <input name="user_id" type="text" /><br />
      비밀번호 : <input name="user_pwd" type="password" /><br />
      <input value="로그인" type="submit" />
    </form>
 
  </body>
</html>
cs
- html 태그를 설명하자면 form은 input(입력칸)을 하나로 묶어주는 태그
- form 태그 속성으로 action과 method가 있음
- form 속성 action : 작성한 정보를 어디로 보낼지(라우팅)
- action 속성의 값으로는 2번에서 작성한 login과 동일함, 그러나 HTTP 메소드 차이로 구분 : GET이냐 POST냐
- form 속성 method : 정보를 전달할 때 어떤 HTTP 메소드를 사용할 것인지
- method 속성의 값으로는 정보를 전달할 때 GET말고 POST를 사용할 것(전달할 정보를 주소창에 나타내지 않음, 조금 더 보안)
- input 태그에 속성 중 name : 정보 전달 시 input 태그에 들어간 정보는 이런 정보 라는 것을 알리기위해 이름 부여하는 것


4) /routes/index.js 다시 접근 후 로그인 정보를 받아 처리하는 액션 지정해주기 : 라우팅
1
2
3
4
5
6
7
8
router.post('/login'function(req, res, next){
  console.log(req.body);
 
  var id = req.body.user_id;
  var pwd = req.body.user_pwd;
 
  res.redirect('/');
});
cs


- req(요청 객체 : 요청 정보가 담김)의 속성 중 body(객체 형태)에 3번 항목 form 내부 로그인 정보가 담겨있음
- req.body.user_id, req.body.user_pwd로 추출하면 됨 : req.body.input태그에 내가 지정한 태그 name 속성의 값
- 위와 같이 받은 정보를 db에 담겨져있는 아이디, 비밀번호와 비교한 후 결과를 응답해주면 됨
- res.redirect() : 넘길 페이지 파일을 정할 때 사용하는 res 객체 메소드, 로그인 성공/실패 따라 redirect 페이지를 달리할 때 사용
- 자바스크립트 알아야겠죠? : 콜백은 js 함수가 일급이라 가능하다, 자바스크립트 변수는 함수 레벨 스코프를 가진다 등
- 물론 로그인을 이렇게하면 보안상 아주 좋지 않음

- 알아둬야할 것 : express는 기본적으로 POST 방식으로 전달하는 데이터는 undefined 처리
- 그럼에도 불구하고 처리 가능한 것은 body-parser 미들웨어(라이브러리) 덕분
- 위의 이미지처럼 express 프로젝트를 만들 때 기본적으로 package.json에 설정되어서 설치됨
- 아래 이미지는 app.js(프로젝트 총괄 파일)에 body-parser 미들웨어가 인클루드 되어있는 것을 캡쳐한 것
- 원래 res 객체가 가지고 있지않은 정보 전달 프로퍼티(body 객체)가 bodyparser에 의해 추가됨
- 아래 이미지는 전달되는 req.body 내용을 보기위해 console로 찍어본 것


[더 알아보기]
- 같은 주소 라우트 지정 정리하기 : express 라우트 다루기
- package.json, 미들웨어
- 로그인 정보 암호화시키기


[참고자료]
1) 생활코딩, Express-POST 방식을 이용한 정보 전달 : https://opentutorials.org/course/2136/11949

2) express 공식홈페이지, 기본 라우팅 : http://expressjs.com/ko/starter/basic-routing.html



댓글