[week_07] Express.js와 MongoDB로 웹서비스 만들기 (3) | JWT, OAuth, Nginx

1. JWT

• JSON Web Token
• 인증을 위한 정보를 전자 서명을 이용해서 확인하는 방법
• Web Token ➡ 데이터를 웹에서 사용하기 위한 스펙 ➡ base64 인코딩 사용

1. header
  - 토큰의 타입(jwt), 데이터 서명 방식
2. payload
  - 전달되는 데이터
3. signature
  - 헤더와 페이로드의 전자서명

• payload는 decode 시 정보가 노출되기 때문에, 민감한 정보를 제외하고 토큰을 생성해야 한다.
• 서버가 JWT를 생성할 때, 비공개키를 이용해서 서명 ➡ payload 조작하면 서명이 불일치 ➡ 인증 실패

✨ JWT 작동 방식
1. 사용자가 로그인
2. 서버가 로그인된 유저 정보를 JWT로 생성하여 클라이언트에 전달
3. 클라이언트는 전달받은 JWT를 이용하여 인증이 필요한 요청에 사용

• session의 경우, 웹 브라우저가 아닌 어플리케이션의 경우 활용하기 부적합하다. JWT를 사용하면 어느 클라이언트에서나 동일한 방식의 사용자 인증을 구현할 수 있기 때문에, JWT를 사용한다.

1-1. JWT +Cookie 사용하기

🔹 Session을 사용한 유저 로그인
Cookie에 Session ID 저장 ➡ Session Store에서 유저 정보 가져오기

🔹 JWT를 쿠키에 저장하는 경우
JWT로 요청 ➡ 서버가 서명 확인 후 유저 정보 사용

데이터베이스 접근이 줄어서 효율적인 인증 구현 가능!

✨ JWT 로그인 구현하기
1. 기존 세션으로 구현된 로그인 비활성화
2. 로그인 로직에서 JWT 생성 후 쿠키로 전달
3. passport-jwt 패키지로 JWT 로그인 미들웨어 작성 및 사용

1) 로그인 로직에 JWT 토큰 생성 및 쿠키 전달

setUserToken = (res, user) => {
	const token = jwt.sign(user, secret); // 유저 jwt 토큰 생성
    res.cookie('token', token);
} // res.cookie 함수 사용 => 토큰을 클라이언트에 쿠키로 전달


// --------------------


router.post('/', passport.authenticate('local'), (req, res, next) => {
	// 유저 토큰 생성 및 쿠키에 전달하기
    setUserToken(res, req.user);
    res.redirect('/');
});

2) passport-jwt로 요청된 JWT 토큰의 서명 확인하고 인증하기

const JwtStrategy = require('passport-jwt').Strategy;
const cookieExtractor = (req) => {
	const { token } = req.cookies;
    
    return token;
};

const opts = {
	secretOrKey: secret,
    jwtFromRequest: cookieExtractor,
}

module.exports = new JwtStrategy(opts, (user, done) = {
	done(null, user);
});


// -----

passport.use(jwt);

3) JWT 미들웨어 추가

• JWT 토큰은 기본적으로 모든 요청에 포함
• 요청에 토큰이 있는 경우 로그인된 상태로 처리하기 위해
• 모든 요청에 공통적으로 적용할 수 있는 미들웨어로 JWT 로그인을 추가

/* jwt middleware */
app.use((req, res, next) => {
	if(!req.cookies.token) { // 토큰 없는 경우
    	next();
        return;
    }
    
    return passport.authenticate('jwt')(req, res, next);
    // authenticate 함수에 req, res, next 전달
    // 이 때 jwt Strategy를 사용한다.
});


// app.js
// passport.initialize와 다른 미들웨어들 사이에 작성해야 한다.
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(passport.initialize());

// jwt 로그인 미들웨어 추가
app.use(getUserFromJWT);

app.use('/', indexRouter);
app.use('/posts', loginRequired, postsRouter);
app.use('/users', loginRequired, usersRouter);
app.use('/api', loginRequired, apiRouter);
app.use('/auth', authRouter);

4) 로그아웃

• 클라이언트 쿠키를 삭제하여 처리
• token 값을 null로 전달하는 것과 함께, cookie의 만료 시간을 0으로 설정하여 클라이언트가 쿠키를 바로 만료시키도록 전달

res.cookie('token', null, {
	maxAge: 0,
});

 

2. 회원 비밀번호 찾기 구현

1. 임의의 문자열로 비밀번호 초기화
2. 초기화된 문자열을 메일로 전달 ➡ 메일 발송기능 개발 필요
3. 초기화 후 첫 로그인 시 비밀번호 변경 요청

2-1. 메일 발송기능 구현 방법

• SMTP 서버 이용 : 네이버, 구글 등의 메일서버 이용하여 메일 발송 및 관리 기능 직접 개발
• 메일 발송 서비스 이용(Mailgun, Sendgrid, ...) : 메일 발송 api 및 관리용 웹페이지 제공

1) Nodemailer + Gmail 사용하기

/* Nodemailer + Gmail 사용하기 */
const nodemailer = require('nodemailer');

const transport = nodemailer.createTransport({
	service: 'Gmail',
    auth: {
    	user: "google account",
        pass: "app password",
    },
});

const message = {
	from: "login account",
    to: "mail address",
    subjet: "title",
    text: "message"
};

transport.sendMail(message, (err, info) => {
	if (err) {
    	console.error('err', err);
        return;
    }
    
    console.log('ok', info);
});

2) 비밀번호 초기화 기능 개발

function generateRandomPassword() { // 임의의 문자열 생성
	return Math.floor(
      Math.random() * (10 ** 8)
    ).toString().padStart('0', 8);
}

//---

router.post('/reset-password', asyncHandler(... => {
	const { email } = req.body; // 이메일을 받아서
    const password = generateRandomPassword(); // 생성된 임의의 문자열로 사용자의 비밀번호 초기화
    await User.findOneAndUpdate({ email }, { // 전달받은 이메일로 유저 패스워드 변경
    	password: getHash(password),
    });
    
    await sendEmail(email, '...', password); // 초기화한 비밀번호를 메일로 발송
    res.redirect('/');
}));

3) 초기화 후 로그인 시 비밀번호 변경 요청

/* 비밀번호 변경 */
const UserSchema = {
	...
    passwordReset: {
    	type: Boolean,
        default: false,
    }
    ...
}

// ---

router.post('/reset-password', ...
	await User.findOneAndUpdate({
    	...
        passwordReset: true, // 패스워드 리셋된 경우 true로 변경
    });

/* 비밀번호 변경 요청 */
function checkPasswordReset(req, res, next) {
	if(req.user && req.user.passwordReset) {
    	res.redirect('/update-password');
        return;
    }
    next();
}

// ---

router.post('/update-password', ...
	await User.findOneAndUpdate({
    	...
        passwordReset: false, // 비밀번호 업데이트 되면 다시 false로 변경
    });

 

3. OAuth

• Open Authorization
• 서비스 제공자가 다른 서비스에게 데이터를 제공하기 위해 서비스 사용자에게 제공하는 사용자 인증방식의 표준
• 사용자의 인증을 제공하는 표준
• 이를 활용해서 로그인 기능을 간편하게 구성할 수 있다.
  • 웹 서비스 제공자는 아이디, 비밀번호 로그인을 구현할 필요가 없다.
  • 웹 서비스 사용자는 로그인 시 아이디, 비밀번호를 입력할 필요가 없다.

1. 서비스 제공자에게 인증 요청
2. 인증 완료 후 사용자 정보를 요청한 서비스로 전달
3. 인증 정보를 이용해 서비스 제공자의 데이터 사용

ex) 구글 캘린더 연동 서비스를 만든다고 가정
1. 구글 OAuth 인증 요청
2. 인증된 OAuth Token을 기록
3. OAuth Token을 사용하여 구글 캘린더 API 사용

 

4. 구글 로그인 구현

🙄 구글 로그인 구현 순서
- 구글 클라우드 플랫폼 프로젝트 생성
- API 및 서비스 ➡ OAuth 동의화면 설정
- 사용자 인증정보 ➡ OAuth 클라이언트 ID 만들기
- passport-google-oauth20 연동

4-1. passport-google-oauth20

• passport-strategy 인터페이스의 구글 로그인 구현체
• 손쉽게 구글 OAuth 2.0을 구현해주는 패키지

1) passport-google-oauth20 작성

/* google strategy */
const GoogleStrategy = require('passport-google-oauth20').Strategy;

const config = { // OAuth 클라이언트 설정값 및 완료 결과를 전달받을 callbackURL
	clientID: 'clientID',
    clientSecret: 'clientSecret',
    callbackURL: 'callbackUrl',
};

...
// accessToken, RefreshToken은 다른 구글 API들을 사용하기 위한 토큰
new GoogleStrategy(config, (accessToken, refreshToken, profile, done) => {
	const { email, name } = profile._json; // profile: 전달받은 유저 정보, 유저 생성 또는 OAuth 정보 업데이트에 사용
    ..
    //create or update user
})

 

• 구글 로그인이 완료된 후 결과를 전달받는 부분

2) passport-google-oauth20 사용

passport.use(google);

// ---

// /auth/google 접근 시 자동으로 구글 로그인 페이지로 넘어감
router.get('/google', passport.authenticate('google', {
	scope: ['profile', 'email']
}));

// 로그인 완료 후 로그인 정보를 config에 설정된 주소인 /auth/google/callback으로 전달
// 전달받은 데이터는 strategy에서 처리, 처리가 완료되면 request handler 실행
router.get('/google/callback', passport.authenticate('google', {
	failureRedirect: '/login'
}), (req, res, next) => {
	res.redirect('/');
});

 

5. Nginx

• 웹 서버 소프트웨어 (HTTP 요청을 받아서 파일이나 실행 결과를 HTTP 응답으로 보내주는 소프트웨어)
• Node.js는 기본적으로 HTTP 요청을 수신하고 응답하는 기능이 이미 존재
• 하지만, Node.js 단독으로 production-level 서비스를 구축할 수는 없다.
• Nginx의 reverse-proxy 기능을 사용해서 Node.js와 Nginx를 연결할 수 있음

// http://www.example.com으로 접속한 모든 요청을 localhost:3000으로 전달하는 설정 파일
server {
 listen 80;
 server_name www.example.com;
 
 location / {
 	proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
 }
}