[week_07] Express.js와 MongoDB로 웹서비스 만들기 (2) | Hash, Session, 로그인/회원가입

1. Hash

• 비밀번호를 저장할 때 사용
• 문자열을 되돌릴 수 없는 방식으로 암호화하는 방법
• hash 출력값을 이용해서 사용자의 비밀번호를 알아낼 수 있다.

비밀번호의 Hash 값을 데이터베이스에 저장하고, 로그인 시 전달된 비밀번호를 Hash하여 저장된 값과 비교해서 로그인 처리

1-1. Node.js에서의 Hash 사용법

• crypto 모듈을 사용해서 hash 값을 얻을 수 있다.

const hash = crypto.createHash('sha1'); // 특정 해쉬 알고리즘 설정
hash.update(password); // 입력받은 평문 put
hash.digest('hex'); // 16진수 문자열로 출력

• 간단하게 sha1 알고리즘을 사용하거나, 보다 강력한 sha224, sha256 등을 알고리즘 사용 가능

 

2. 회원가입 요청 처리하기

router.post(... => {
	const { email, name, password } = req.body;
    const pwHash = getHash(password);
    const exist = await User.findOne({ email, });
    
    if (exist) {
    	throw new Error('이미 가입된 메일입니다.');
    }
    
    await User.create({
    	email,
        name,
        password: pwHash,
    });
    
    res.redirect('/');
});

• 비밀번호를 hash값으로 저장
• 이미 존재하는 회원인지 체크
• 가입 성공 시 메인화면으로 redirect

 

3. Passport.js

• 유저 세션 관리 및 다양한 로그인 방식 추가 가능

3-1. passport-local

• passport는 다양한 로그인 방식 구현을 위해 strategy라는 인터페이스 제공
• strategy 인터페이스에 맞게 설계된 다양한 구현체들이 있음 (facebook, google, ...)
• passport-local은 username, password를 사용하는 로그인의 구현체

1) 로그인 기능 구현하기: passport-local strategy

/* passport-local */
const config = { usernameField: 'email', passwordField: 'password' };
// 아이디 패스워드 필드 설정 필수

const local = new LocalStrategy(config, ..., async (email, password, done) => {
	try {
    	const user = await User.findOne({ email });
    	if (!user) { // email로 회원이 찾아지지 않을 경우
        	throw new Error('회원을 찾을 수 없습니다.');
        }
        if (user.password !== password) { // 패스워드의 해쉬값을 만들어서 사용할 것!
        	throw new Error('비밀번호가 일치하지 않습니다.');
        }
        
        // 세션에 저장되는 유저 정보의 최소화
        done (null, {
        	shortId: user.shortId,
            email: user.email,
            name: user.name,
        });
    } catch(err) {
    	done(err, null);
    }
});



/* passport use */
const local = require('./strategies/local');
passport.use(local);

• 작성한 strategy를 passport.use를 이용해 사용하도록 선언해야 한다.
• passport.use를 이용해 strategy 를 사용하도록 선언한 후, passport.authenticate를 사용해 해당 strategy를 이용해 요청을 처리할 수 있다.

2) 로그인 기능 구현하기: Passport.js로 post 요청 처리하기

/* routes/auth.js */
router.post('/', passport.authenticate('local');


/* app.js */
const session = require('express-session');

app.use(session({
	secret: 'secret',
    resave: false,
    saveUninitialized: true
}));
app.use(passport.initialize());
app.use(passport.session());
app.use('/auth', authRouter);

• passport.authenticate 함수를 http 라우팅에 연결하면 passport가 자동으로 해당하는 strategy를 사용하는 request handler를 생성
• express-session과 passport.session을 사용하면 passport가 로그인 시 유저 정보를 세션에 저장하고 가져오는 동작을 자동으로 수행해준다.

3) 로그인 기능 구현하기: session 유저 활용하기

passport.serializeUser((user, callback) => {
	callback(null, user);
});

passport.deserializeUser((obj, callback) => {
	callback(null, obj);
});

• 세션에 user 정보를 변환하여 저장하고 가져오는 기능을 제공

4) 로그아웃

router.get('/logout', ... {
	req.logout();
    res.redirect('/');
});

5) 로그인 확인 미들웨어

function loginRequired(req, res, next) {
	if(!req.user) {
    	res.redirect('/');
        return;
    }
    next();
}

app.use('/posts', loginRequired, postsRouter);

• 어떤 페이지 혹은 기능에서 로그인을 필수로 설정하고 싶을 경우, 미들웨어를 사용하여 체크

 

4. Session

• 웹 서버가 클라이언트 정보를 클라이언트별로 구분하여 서버에 저장하고, 클라이언트 요청 시 Session ID를 사용하여 클라이언트의 정보를 다시 확인하는 기술
• 클라이언트가 정보를 저장하고, 요청 시 정보를 보내는 Cookie와 대조됨

서버는 세션을 생성 ➡ Session ID를 클라이언트에 전달 ➡ 클라이언트는 요청 시 Session ID를 함께 요청에 담아서 전송 ➡ 서버가 전달받은 Session ID로 해당하는 세션을 찾아 클라이언트 정보 확인

• express-session 패키지를 사용하여 자동으로 session 동작 구현 가능

4-1. Session Store

• express-session 패키지는 session을 기본적으로 메모리에 저장
  • 현재 구현된 어플리케이션을 종료 후 다시 실행하면, 모든 유저의 로그인이 해제됨
  • 혹은 서버가 여러 대가 있을 경우, 서버 간 세션 정보를 공유할 수 없음
• 그래서 Session Store를 구현하여 Express Application들을 연결하는 방식을 활용해서 위의 문제점 해결 가능
• connect-mongo 패키지를 이용해 MongoDB를 session store로 사용할 수 있다.
• 자동으로 session 값이 변경될 때 update되고, session이 호출될 때 find

const MongoStore = require('connect-mongo');

app.use(session({
	secret: 'SeCrEt',
    resave: false,
    saveUninitialized: true,
    store: MongoStore.create({
    	mongoUrl: 'mongoUrl',
    }),
}));

• connect-mongo 패키지를 사용해 exrpess-session 설정 시 store 옵션에 전달하고, mongoUrl을 설정
• 세션데이터를 몽고디비에 저장하고 관리하는 기능을 자동으로 수행

 

5. 회원과 게시글의 연동

• 게시글 작성 시 로그인된 회원 정보를 작성자로 추가
• 게시글 - 작성자는 populate하여 사용하도록 구현
• 게시글 수정, 삭제 시 로그인된 유저와 작성자가 일치하는지 확인
• 작성자의 게시글 모아보기 기능 구현

/* PostSchema 수정 */
author: {
	type: Schema.Types.ObjectId,
    ref: 'User'.
    required: true
},

/* 게시글에 작성자 추가 */
const author = await User.find({
	shortId: req.user.shortId,
});
if(!author) {
	throw new Error('No User');
}

await Post.create({
	title,
    content,
    author,
});

• req.user에는 strategy에서 최소한의 정보로 저장한 shortId, email, usernam만 가지고 있다.
• Post 생성 시 user의 ObjectID를 전달해야 하는데, 이를 위해 User에서 shortId로 회원을 검색하여 한번 더 검증
• type: ObjectID로 선언한 필드에 객체가 주어지면 자동으로 ObjectID 사용

/* ./routes/posts.js */
router.get('/', ... {
	...
    const posts = await Post.find({})
    	...
    	.populate('author');
    res.render('posts/list', {posts});
}

/* ./views/posts/list.pug */
...
  td post.author.name

• 게시글 find 시 populate를 추가하여 ObjectID로 저장된 author를 각 게시글에 주입
• 사용 시 post.author.{field}로 사용 가능

/* 수정, 삭제 시 유저 확인 */
const post = await Post.find({
	shortId,
}).populate('author');

if (post.author.shortId !== req.user.shortId) {
	throw new Error('Not Authorized');
}

/* index 사용 */
author: {
	type: Schema.Types.ObjectId,
    ref: 'User'.
    required: true,
    index: true,
},

• index: true => MongoDB에 인덱스 생성
• 이미 데이터가 많은 상태에서 인덱스를 추가할 시 작업 시간이 길어져서 MongoDB가 응답하지 않을 수 있기 때문에, 예상되는 인덱스를 미리 추가하는 것이 좋음

/* ./routes/users.js */
...
router.get('/:shortId/posts', ... => {
	...
    const { shortId } = req.params;
    const user = await User.find({ shortId });
    const posts = await Post
    					.find({ author: user })
                        .populate('author');
    res.render('posts/list', { posts, user });
});
...

/* 게시글 목록화면 */
h2= user ? `${user.name}의 게시글`: "전체 게시글"
...

td: a(href=`/users/${post.author.shortId}/posts`)= post.author.name

• 게시글의 사용자 이름에 유저의 게시글 link 추가

 

6. CSR로 댓글 구현하기

• 페이지 로드 시 필요한 리소스를 클라이언트에 선언
• 클라이언트에서 필요한 데이터를 비동기 호출
• 클라이언트가 전달받은 데이터를 가공, 리소스를 사용해서 화면에 표시

1) 게시글에 댓글 추가하기

/* PostSchema */
const CommenSchema = new Schema({
	content: String,
    author: {
    	type: Schema.Types.ObjectId,
        ref: 'User',
    },
}, {
	timestamps: true,
});

const PostSchema = new Schema({
	...
    comments: [CommentSchema],
});

• mongoose의 sub-schema를 이용하여 Post 스키마에 Comment를 배열로 추가
• populate를 사용할 때, ObjectID만 저장하는 것과는 다르게 Comment의 내용을 게시글이 포함하게 됨

2) API 작성하기 - 댓글 작성

/* routes/api.js */
router.post('/posts/:shortId/comments', ... {
	const { shortId } = req.params;
    const { content } = req.body;
    const author = await User.findOne({ shortId: req.user.shortId });
    
    await Post.updateOne({ shortId }, {
    	$push: { comments: {
        	content, author
        } },
    });
    
    res.json({ result: 'success' });
});

• 게시글 업데이트 시 $push를 사용하여 comments 배열에 새로 작성된 댓글 추가
  • 동시에 들어오는 요청에 대해 정확하게 처리

3) API 작성하기 - 댓글 목록

/* routes/api.js */
router.get('/posts/:shortId/comments', ... {
	const { shortId } = req.params;
    const post = await Post.findOne({ shortId });
    
    await User.populate(post.comments, {
    	path: 'author'
    });
    
    res.json(post.comments);
});

4) fetch로 API 호출하고 처리하기 - 댓글 작성하기

script
  function writeComment() {
    const input = document.querySelector('#content')
    const content = input.value;
    fetch('/api/posts/#{post.shortId}/comments', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ content }),
    })
    .then(() => {
      if(res.ok) {
        input.value = '';
        loadComments();
      } else {
        alert('ERROR');
      }
    });
  }

• 댓글 작성 버튼 클릭 시 writeComment() 실행
• input#content에서 내용을 읽어 fetch로 댓글 작성 api 호출
• 호출 결과의 성공 여부를 확인하여, 댓글 다시 불러오기 실행

 

7. MongoDB Aggregation

• MongoDB에서 Document들을 가공하고 연산하는 기능
• 다른 Collection에서 데이터를 가져오거나, 검색된 데이터를 그룹화하는 등의 작업이 필요한 경우 사용
• aggregation은 Stage들의 배열로 이루어지고 각 Stage는 순차적으로 수행됨

db.posts.aggregate([
	{ $group: { _id: '$author', count: { $sum: 1 } } },
    { $match: { sum: { $gt: 10 } } },
    { $lookup: { from: 'users', localField: '_id', foreighField: '_id', as 'users' } }
]);

• 작성자별 게시글 수를 취합하고, 게시글 수가 10개보다 많은 작성자를 찾아서 해당 작성자를 회원 collection에서 검색한다.