passport -local을 이용한 회원가입

여러 오류와 낮은 이해도로 인해 정말 오랜 시간만에 회원가입, 로그인, 프로필 확인을완성했다.

이 과정에서 조금이나마 passport의 동작 방식을 이해할 수 있게 되어 글을 적어 남겨두려 한다.

 

passport-local 을 이용하여 회원가입 기능을 구현하였고, github 저장소에 있는 예시 코드를 많이 활용하였다.

https://github.com/passport/todos-express-local

 

우선 많은 오류가 있었는데, 대부분은 변수 이름을 명확하게 정하고 바꿔주지 않아 발생했다. 

그치만 이해도가 낮아 그럴 수 밖에 없었던거 같다. 

 

이제 내가 이해하고 공부한 것을 정리해 보려 한다. 

내가 이해한 내용이라 부정확할 수 있음 ..! 추후 수정해갈 예정 

passport.js -local 의 흐름 

1. 미들웨어 

  미들웨어란 클라이언트에게서 요청(request)이 들어오면 그 요청은 미들웨어들을 차례로 거친 후 라우터나, 주소로 연결되게 된다. 

 형태는 app.use() 이고, 순서대로 동작하기 때문에 순서가 중요하다.

 

회원가입을 위해서는  다음과 같은 미들웨어를 설치한다. 

  우선 클라이언트로부터 받은 정보를 백엔드에서 사용하기 위해서 bodyParser을 사용해야 한다. 

  express version 4.x 이전에는 body parser를 다운받아야 했지만, 이후에는 express에 BodyParser가 내장된다. 

 

import passport from "passport";
const bodyParser = require('body-parser');

//form 의 정보를 Parse
app.use(bodyParser.urlencoded({extended:true}));
//json 정보를 parse 
app.use(bodyParser.json());

//passport 를 위한 미들웨어 
app.use(require('express-session')({ 
    secret:'keyboard cat',resave: false, saveUninitialized: false }));
app.use(passport.initialize())
app.use(passport.authenticate('session'));

2. Router 

router에서는 인증이 끝난 후, 연결 방법을 정의해 준다. 

router.post('/login/password', passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/login',
  failureMessage: true
}));

3. passport.use()

server.js 의 미들웨어중 app.use(passport.authenticate('session'))이 실행되면 호출된다.

 

passport.use(new Strategy(function(id, password, done) {
    db.get('SELECT rowid AS rowid, * FROM users WHERE id = ?', [ id ], function(err, row) {
      if (err) { return done(err); }
      if (!row) { return done(null, false, { message: 'Incorrect username or password.' }); }
      
      crypto.pbkdf2(password, row.salt, 310000, 32, 'sha256', function(err, hashedPassword) {
        if (err) { return done(err); }
        if (!crypto.timingSafeEqual(row.hashed_password, hashedPassword)) {
          return done(null, false, { message: 'Incorrect username or password.' });
        } 
        //console.log(row);
        var user = {
          rowid: row.rowid.toString(),
          id: row.id
        };
        //req에 user 객체를 반환
        return done(null, user);
      });
    });
  }));

인증을 무사히 마치면 user 객체를 생성하여 값을 저장한 후 done 함수를 호출하면 SeriallizeUser에게 정보를 넙겨준다.  

 

passport.use 에서는 form 을 통하여 받는 값의 이름이 username , password여야 한다.

그걸 원하는 이름으로 받고자 하면 아래와같이 설정 해 주어야 한다. 

 {
    usernameField: 'email',
    passwordField: 'pw'
  }

4. Seriallize와 Deserialize 

serializeUser

serializeUser에서는 passport use에서 넘겨받은 user를 이용하여 사용자의 정보를 session에 저장해 준다. 

  passport.serializeUser(function(user, cb) {
    process.nextTick(function() {
      //세션에 저장하는 코드 
      cb(null, { rowid: user.rowid, id: user.id });
    });
  });

 

DeserializeUser

DeserializeUser은 session의 값을 이용해 사용자를 찾은 후 http request로 return해 준다. 

  passport.deserializeUser(function(user, cb) {
    process.nextTick(function() {
      //console.log("deseriallize");
      return cb(null, user);
    });
  });

 

 

사실 여기에 html 이나 router를 작성하고 db 를 컨트롤하는 코드를 더 사용했지만 

이 글에는 passport의 요점만 정리하였다.  

오만 고생 끝에 만든 결과다!