Passport(passport-local)

👍Passport 사용해보기

passport는 Node.js의 인증 미들웨어로 요청에 대한 인증을 위한 패키지이다. 소셜네트워크 서비스의 발전으로 인해 OAuth 인증 방식의 사용이 보편화 되면서 API를 이용하기 위한 방식을 구축해주는 패키지이다.

👍passport-local

passport의 전략중 가장 일반적인 로컬 로그인을 구현해보도록 하자. 소셜 로그인을 사용하기전 가장 기본인 로컬을 사용해보며 passport가 어떤 방식으로 구동되는지 확인해보겠다.

먼저 passport는 요청을 인증하기 위해 전략이라는 것을 사용한다. 우리는 local 전략을 구현하여 local인증에서 요청을 passport에게 전달 할 것이다.

먼저 필요한 패키지를 다운로드 한다.
npm i passport passport-local

패키지 다운로드 후 local 전략 파일을 구성해준다. 전략이라는 것은 곧 우리가 로그인을 처리할 과정을 나열하는 것과 같다.

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcrypt');

const User = require('../models/user');

module.exports = () => {
    // passport.authenticate('local' ...에서이동해서  밑의 로직이 실행된다.
    passport.use(new LocalStrategy({
        usernameField: 'email',  // req.body.email 필드와 req 값이 일치해야됨
        passwordField: 'password',  // req.body.password 
    }, async (email, password, done) => {
        try {
            const exUser = await User.findOne({ where: {email} }); // 이메일이 있나 확인
            if(exUser){ // 이메일이 있다면
                const result = await bcrypt.compare(password, exUser.password); // 받아온 비번이랑 디비 비번이랑 비교
                if(result) { // 비밀번호 일치
                    done(null, exUser);
                } else { // 비밀번호 다름
                    done(null, false, { message: '비밀번호가 일치하지 않습니다.'});
                }
            } else { // 가입된 이메일이 없다면
                done(null, false, { message: '가입되지 않은 회원입니다.'});
            }
            // done함수 호출 후 passport.authenticate 나머지 실행
        } catch (error) {
            console.log(error);
            done(error);
        }
    }));
};

전략파일의 구성은 다음과 같다. 로그인시 사용자에게 받는 아이디 비밀번호 정보를 username, password필드에 값을 넣어준다. 기본 필드값은 username, password이므로 서비스에서 body에 담는 정보의 이름과 기본값이 다르면 값을 넣어주면 된다.

이후 데이터베이스에서 유저를 찾고 있다면 비밀번호를 비교하고 일치하면 해당 유저를 리턴해준다.
해당 과정에서 done이라는 콜백 메서드가 사용되는데 done메서드에 들어가는 인자값은 **done(err, data)**이다.
코드를 살펴보면 입력받은 정보에 일치하는 유저가 있을때는 첫 번째 인자값은 null로 error가 없다는 것을 의미한다.
이러한 방식으로 유저의 정보가 데이터베이스와 일치하는지 아닌지 조회 후 성공시 유저 데이터 없을 시 에러를 done함수에 전달해 리턴해주면 된다.

이렇게 유저의 정보를 조회하고 리턴한 값을 passport에서는 세션으로 생성해준다.👍👍👍

---

👍세션 생성

passport.serializeUser((user, done ) => {
        done(null, user.id ); // 세션에 user.id만 저장 
    });

    // 세션에 저장된 id를 통해 사용자 정보 객체를 불러온다. 
    // deserializeUser의 id 매개변수는 serializeUser에서 done에 담았던 두번째 인수가 오게된다.
    // 결과값 done의 user는 req.user로 조회할 수 있다.
    passport.deserializeUser((id, done) => {
        
        User.findOne({ where: { id } })
            .then(user => done(null, user))
            .catch(err => done(err)); 
    });

serialize, deserialize 함수는 passport에서 세션을 생성하고 생성된 세션값을 통한 유저의 정보를 조회하는 함수로 이해하면 된다.
serialize 함수는 전략 파일에서 리턴한 값을 받아 유저의 정보를 세션으로 담아 생성해준다. 아주 편리하게 세션을 생성해주는 기능이다.

👍세션 설정

passport에서 세션을 생성해준다. 하지만 express에서 passport가 생성한 세션을 사용하기 위해서는 몇가지 설정이 필요하다.
설정은 app.js 에서 다음과 같이 이루어진다.

app.use(session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true,
        secure: false,
    },
    
}));
app.use(passport.initialize()); //passport
app.use(passport.session()); // passport

express에 passport를 사용하고 passport가 세션을 이용한다는 설정을 해주면 된다.
이제 local전략이 구성되었으니 테스트를 진행해보자.

---

✅테스트

테스트는 클론코딩을 진행중이던 프로젝트에서 진행 하였다.

로그인을 위한 정보를 입력하고 로그인을 진행한다.

요청이 200 StatusCode와 함께 성공적으로 완료가 되었다.

네트워크 탭을 통해 세션까지 성공적으로 생성된 것을 확인 할 수 있다.
이렇게 passport의 local전력을 실행해 보았다. 이후 소셜로그인 API를 통해 passport전략을 구축하는 과정까지 알아보도록 하자.

---