[Node.js] 02. Passport 로그인

안녕하세요 Web 개발자 Jji_ni 입니다.

오늘은 Node.js에서 로그인을 쉽게 도와주는 Passport를 이용해 보려고 합니다.

 

일단은 우선 

 

passport와 passport-local을 받아 주세요. 전 이전에 미리 받아서 받는건 pass할께요 ㅎㅎ

 

그래도 쓰시기 귀찮으신 분들이 있으시니(저 같으신 분들... 전 복붙이 제일 편하더라구여... ㅎㅎ)

npm install passport --save
npm install passport-local --save

powerShell 에서 받으시면 됩니다. 

 

앞서 제 블로그 2. Node.js ejs base 템플릿 에서 보시면 로그인 템플릿이 하나 있습니다. 그걸 사용 하셔두 되고 전 앞에서 만든 템플릿을 토대로 만들어 보겠습니다.

 

form 태그를 이용하여 클라이언트 -> route에게 Post 방식으로 데이터를 통신 하려고 합니다.

 

<form method="post" action="/login/signin">

<input type="text" class="form-control" id='userId' name="userId" placeholder="Email">
// 아이디 입력 값
<input type="password" class="form-control" id='pwd' name="password" placeholder="Password">
// 비밀번호 입력 값

보시는 코드와 같이 form 태그에서 method는 post, action을 이용하여 /login/signin 에 데이터를 전달 하는것을 알 수 있습니다.

 

이러면 받는 쪽 route쪽을 만들어 줘야 겠죠?

 

var passport   = require("../services/passport")
var bodyParser = require("body-parser");
var urlencodedParser = bodyParser.urlencoded({extended : false})

router.post("/signin", [urlencodedParser], function(req, res){
	console.log(req.body)
})

전우선 passport를 services에 넣어 모듈화를 시켜줄 생각이구여 

 

port로 받고 signin이라는 경로로 하나 만들어 줬고 데이터가 들어 오는지 확인을 합니다.

 

그다음은 모듈화 하는 passport를 만들어 줘 보겠습니다.

 

var passport = require("passport");
var LocalStrategy = require("passport-local").Strategy;
var db = require("../db/loginDB");

passport.use(new LocalStrategy({
	usernameField : "userId",
	paswordField : "password",
	passReqToCallback: true
	}
	, function(req, userId, password, done){}
))


module.exports = passport

1. 먼저 passport의 플러그인들을 사용하려면 Strategy을 사용해 줘야 하기 때문에 저는 변수로 LocalStrategy를 만들어 줬습니다.

 

2. usernameField, paswordField 필드에 클라이언트에서 전달 받은 id, password를 각각 저희는 userId, password 로 받았기 때문에 userId, password 로 설정을 해주었습니다.

   passReqToCallback: true 를 해주어 밑의 req를 passport를 인증시 활용 하게 해주었습니다.

 

3. 

if(userId == undefined || userId == "" || password == undefined || password == ""){
	return done(null, false);
}

다음은 아이디의 값이 undefined 이거나 아무것도 없을때 password가 undefined일때 아닐때를 검사를 하게 해주었습니다.

 

4. 

db.signinAdmin(userId, password, function(result){
	if(result){
		return done(null, true);
	}else{
		return done(null, false)
	}
})

다음은 db를 이용하여 db안에 들어있는 id와 passport를 비교 할수 있게 하고 값이 있다면 true의 값을

없으면 false의 값을 보내주게 됩니다.

 

5.

passport.serializeUser(function(user, done) {
	done(null, user);
});

passport.deserializeUser(function(user_id, done) {
	done(null, user);
})

serializeUser 는 passport 세션에 저장을 해주는 것이고(직렬화 방식) 

 

deserializeUser는 실제 서버로 들어오는 요청마다 세션 정보를 실제 DB의 데이터와 비교합니다. (비 직렬화라 id로 사용자를 찾는방식)

상세 정보 : https://www.npmjs.com/package/passport

이 두 메소드가 있어야지만 passport가 작동을 합니다.

 

6. server.js 

app.use(passport.initialize()); // passport 구동
app.use(passport.session()); // 세션 연결

server.js에 app.use를 추가 해줍니다.

 

7. 라우터

router.post("/signin", [urlencodedParser,passport.authenticate('local', {failureRedirect: '/login', failureFlash:true})], function(req, res){
	res.redirect('/main');
})

라우터에서 아까 우선적으로 경로만 잡아 주었던 것을 변경을 해줍니다.

passport에서 local에 대한 인증 작업을 시행 하게 해줍니다.

성공을 하였을 때 redirect를 이용하여 /main으로 보내게 하고 

실패를 하였을 때는 failureRedirect을 이용하여 /login로 돌려 보내게 해줍니다.

 

이렇게 하여 passport를 이용하여 로그인을 하는 것을 해보았습니다.

 

다음은 로그인을 한층 더 업그레드하여 암호화를 하여 저장하는 방법이나 flash모듈을 사용하여 에러에 대한 메세지를 받는 것을 해보겠습니다.

 

이상 오늘 글쓰기 끝!! ㅎㅎㅎ