[node.js] express&vue 로그인 기능 구현하기 (수정중)

mrw0119.tistory.com/138?category=938676

[Node.js] Passport 로그인 구현 (express & vue)

사용법을 좀 더 익히고 싶어서 로그인 구현부분도 이 블로그를 보면서 공부했다

---

Server

---

1. npm i express-session passport passport-local

먼저 express-session , passport , passport-local 를 설치해준다.

passport는 Node.js의 미들웨어로서 사용자의 인증을 구현해준다.

 

비밀번호 변경, 생성, 암호화등 이와 같은 기능들을 제공하며

쿠키를 생성하고 브라우저에 저장을 시켜주고 유저에게 해당 쿠키를 주는 일을 한다.

 

passport는 인증이 실행된 뒤 유저의 정보를 express-session,cookie-parser을 이용하여 저장한다.

passport는 username과 password를 이용하여 인증하는 strategy를 사용하는데 이는 passport-local 모듈이 지원해준다.

 

 

 

2. npm i dotenv

 설정값에 대한 관리를 위해 dotenv 패키지를 설치한다.

dotenv는 사용자의 정보를 숨기고 싶을때 사용한다.

포트번호, 데이터베이스 주소 , secret code등 환경변수들을 json에 보관하여 사용하는데,

dotenv이 이런 정보들을 [.env] 파일에 담아 정보를 숨겨주는 기능을 한다.

 

 

3. [.env] 파일 생성. 쿠키 비밀키를 입력해준다.

COOKIE_SECRET = ( 아무거나  입력 )

4. app.js 파일에 dontenv를 적용시켜 준다.

require('dotenv').config()

dotenv의 config()가 호출이 되면 [.env]파일의 설정값들이 process.env에 저장이 된다.

이후 process.env.COOKIE_SECRET처럼 설정값들을 사용할 수 있다.

5. app.js에 express-session을 적용시켜 쿠키 비밀키를 설정해준다.

6. passport/index.js 파일을 생성한다.  passport 설정을 위한 코드를 작성해준다.

const LocalStrategy =require('passport-local').Strategy;
const users = require('../data/users.json');

exports.config = (passport) => {

    passport.serializeUser((user,done)=>{
        done(null,user.id);
    });
    passport.deserializeUser((id,done)=>{
        const result = users.filter((user)=>user.id === id);
        if (result.length > 0) {
            done(null, result[0]);
        }
    });

passport.use(new LocalStrategy({
        usernameField: 'id',
        passwordField: 'password',
    },(id,password,done) => {
        const result = users.filter((user)=> user.id === id);
        if (result.length > 0) {
            const user = result[0];
            if(password === user.password) {
                done(null , user);
            }else {
                done(null, false, { message : '비밀번호 틀림 '});
            }
        }else {
            done(null, false, {message : '가입되지 않은 회원'});
        }
    }));
}

 

passport.serializeUser() : 로그인을 하면 user정보를 세션에 저장하기 위헤 호출된다.
user의 모든 정보를 다 저장할 필요는 없으므로 유저의 id값만 세션에 저장하도록 해준것.

passport.deserializeUser() : 매 요청시 호출되면서 세션에 저장된정보를 불러온다. 

usernameField, passwordField : 로그인시 설정된 이름으로 req.body에서 값을 읽어온다.
위 코드에서는 req.body.id를 username으로, req.body.password를 password로 인식하게 된다고 한다!!

done() : 인증 흐름의 각 단계에서 호출되는 콜백함수이다.
오류 여부, 인증된 사용자의 정보를 전달하여 처리한다.

 

7. app.js에 passport를 적용한다.

var passport = require('passport');
require('./passport').config(passport);  // passport 설정

app.use(passport.initialize());     // req에 passport의 설정값들을 적용
app.use(passport.session());      // session 정보를 저장 (req.session , req.user)

 

8. routes/login.js파일에서 로그인 요청시의 처리를 작성해준다.

const express = require('express');
const passport = require('passport');
const router = express.Router();
const users = require('../data/users.json');
router.get( '/' , function(req, res, next {
    if (req.isAuthenticated() && req.user) {
        return res.json({ user: req.user });
    }
    return res.json({ user: null });
});
router.post('/',function(req,res,next) {
   if (req.isAuthenticated()) {
        return res.redirect( '/' );
    }
    passport.authenticate('local', (authError, user, info) => {
        if (authError) {
            console.error(authError);
            return next(authError);
        }
        if (!user) {
            return res.json(info);
        }
        return req.login(user, (loginError)=> {
            if (loginError) {
                console.error(loginError);
                return next(loginError);
            }
            return res.json({ user });
        });
    })(req, res, next); // 미들웨어 호출
});

module.exports = router;

get요청시, 로그인중이라면 req.user의 유저 정보를 보낸다. (passport의 deserializeUser()에서 저장한 유저정보)

post 요청시, local 전력으로 로그인을 시도한다. 
이때 사용된 username과 password는  localStrategy에서 설정한대로 req.body.id와 req.body.password가 된다.
로그인 성공시 user의 정보를 보내주고 로그인이 실패되면 info값을 보내 이유를 알려준다.

passport.authenticate()가 반환하는 값은 미들웨어이므로 반드시 뒤에 (req, res, next)를 붙여서 호출해주어야한다.

---

Clinet

---

1. npm i vuex 

2. src/store.js 파일을 만들고 vuex로 유저의 정보를 저장할 저장소를 생성한다.

3. src/main.js 파일에 vue 인스턴스에 생성한 store를 추가한다.

4. components/IndexPage.vue 파일에 코드를 작성한다.  

5. components/LoginPage.vue 파일을 만들고 코드를 작성한다.

6. router/index.js 파일에 라우터를 설정해준다.

ㅇ

 

---

이제 Clinet 프로젝트를 빌드하고

[사진]

server 프로젝트에서 서버를 실행한다.

[사진]

 

잘 되었는지 확인!