nodejs에서 Session-based 회원가입 구현하기

1. 개요

• 회원가입 기능의 방식에는 크게 3종류가 있음
• 3가지 방식 모두 장단점이 있으며 우리가 흔히 아는 소셜 로그인 기능은 OAuth방식임

2. 방식

(1) Session-based

• 브라우저에서 로그인 시 서버에 유저의 로그인 기록 저장
• 서버에서는 유저의 로그인 기록을 세션 아이디로 만들어서 쿠키 발행
• 브라우저는 전달받은 쿠키(세션 아이디가 포함되어 있음)를 저장함(로그인을 한 상태)
• 만약 로그인 해야만 볼 수 있는 페이지(개인정보 페이지 등)를 서버에 요청한다면?
• 요청과 함께 쿠키가 서버로 전송됨
• 서버에서는 쿠키에 들어있는 세션 아이디를 서버의 로그인 기록과 대조 함
• 그 뒤에 서버에서 브라우저로 개인정보 페이지를 보내줌
• 이 방식은 로그인 상태를 서버에 저장하는 게 특징(서버의 자원을 소모함)

(2) Token-based(JWT; JSON Web Token)

• 브라우저에서 로그인 시 서버에서 JSON Web Token을 발행하여 브라우저로 전달
• JWT는 말그대로 JSON 형태의 정보가 들어있는 토큰을 의미함
• 이 토큰에 사용자의 로그인 정보가 암호화된 상태로 포함되어 있음
• 브라우저에서 서버로 개인정보 페이지를 요청할 때, 웹 토큰을 헤더(HTTP header)에 포함해서 전달함
• 서버에서는 웹 토큰을 검사해서 유효하다면 개인정보 페이지를 브라우저로 보내줌
• 서버가 로그인 상태를 서버가 아닌 클라이언트에 저장(서버의 자원을 소모하지 않음)

(3) Open Authentication(OAuth)

• 다른 사이트의 프로필 정보를 가져와서 인증하는 방식
• 로그인시 다른 사이트(ex, Google)의 프로필 정보가 내 서버로 전송됨
• 내 서버에서 계정 or 세션 or JWT 등을 만들어 줌
• 내 서버에서는 PW정보를 다룰 필요가 없음

3. Session-based 로그인 구현하기

(1) 라이브러리 설치

npm install passport passport-local express-session

• 설치할 라이브러리는 아래 3가지임
  • passport
  • passport-local
  • express-session

// 회원가입 라이브러리 사용 설정
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session');

app.use(session({secret : '비밀코드', resave : true, saveUninitialized: false}));
app.use(passport.initialize());
app.use(passport.session());

• 라이브러리 설치 끝났으면 server.js에다가 해당 라이브러리 설정 해주세여

(2) mongoDB 설정

mongoDB에서 login이라는 이름의 collection 만들기

저기 DB이름 옆에서 [+]버튼 누르면 됨

테스트용 계정 정보 집어넣기

[insert document] 버튼 누르면 됨

(3) 코드

ㄱ. server.js

// /login URL로 접속 시 login.ejs파일 렌더링
app.get('/login', function(요청, 응답){
    응답.render('login.ejs');
});

• login URL에 접속 시 해당 페이지 렌더링하는 코드

// 로그인 요청 시 authenticate함수를 이용
// local방식으로 아이디, 비밀번호 검사
app.post('/login', passport.authenticate('local', {
    // 로그인 실패 시 /fail 경로로 페이지 이동
    failureRedirect : '/fail'
}), function(요청, 응답){
    // 로그인 성공 시 루트 경로로 페이지 이동
    응답.redirect('/')
});

• 로그인 요청 시 계정 정보 검사 요청하는 코드

// LocalStrategy 방식으로 아이디, 비밀번호 인증하는 코드
// strategy가 인증하는 방법을 의미하는 단어
passport.use(
  new LocalStrategy(
    {
      // form태그에 id와 pw라는 name을 가진 항목이 각각 아이디와 비밀번호라고 정의
      usernameField: "id",
      passwordField: "pw",
      // 로그인 후 session 정보 저장할건지? 세션 정보 저장해야 다시 로그인 안해도 됨
      session: true,
      // 아이디, 비밀번호 말고 다른것도 인증해야하면 아래 코드를 True로 바꾸면 됨
      passReqToCallback: false,
      // 현재 아이디랑 비밀번호를 검증하는 코드
    },
    function (입력한아이디, 입력한비번, done) {
      console.log(입력한아이디, 입력한비번);
      // 데이터베이스에서 아이디 확인
      db.collection("login").findOne(
        { id: 입력한아이디 },
        function (에러, 결과) {
          if (에러) return done(에러);
          // 일치하는 아이디가 없으면(db에 아이디[결과]가 없으면 아래 코드 실행
          // done에는 파라미터 3개 넣을 수 있음
          // 첫번째 파라미터에는 서버 에러
          // 두번째 파라미터에는 성공 시 얻을 수 있는 사용자 데이터(만약 실패시 false)
          // 세번째 파라미터에는 에러 메시지
          if (!결과)
            return done(null, false, { message: "존재하지않는 아이디요" });
          // 일치하는 아이디가 있으면 비밀번호를 검사
          if (입력한비번 == 결과.pw) {
            return done(null, 결과);
          } else {
            return done(null, false, { message: "비번틀렸어요" });
          }
        }
      );
    }
  )
);

• 계정 정보 검사하는 코드

// 로그인 유지 위해서는 세션 등록이 필요함
passport.serializeUser(function (user, done) {
  // id를 이용해서 세션을 저장시키는 코드(로그인 성공 시 실행됨)
  done(null, user.id);
});

• 로그인 유지를 위한 세션 등록 코드