Build a Full Stack Multi Factor Authentication System with React, Node.js, Passport.js & Speakeasy!
- 이 비디오에서는 React, Node.js, Passport.js, Speakeasy를 사용하여 풀스택 다단계 인증 시스템을 구축하는 방법을 다룹니다. 🔐
- 프론트엔드는 React를 사용하여 깨끗한 로그인 및 2단계 인증 검증 흐름을 구축합니다. ⚛️
- 백엔드는 NodeJS 및 Express를 사용하여 API 라우트를 보호하고 세션을 관리합니다. ⚙️
- Passport.js는 이메일 및 비밀번호 인증을 위한 로컬 전략을 구현합니다. 🔑
- Speakeasy는 시간 기반 OTP를 생성하고 검증합니다. ⏱️
- QR 코드 설정을 통해 사용자는 Google Authenticator 또는 Microsoft Authenticator와 같은 인증 앱을 통해 2단계 인증을 등록할 수 있습니다. 📱
- 세션 관리는 사용자가 안전하게 로그인 상태를 유지하도록 합니다. 🛡️
- 애플리케이션 구조는 사용자 클라이언트, Express 서버, Passport.js 구성, MongoDB 데이터베이스 연결로 구성됩니다. 🏗️
- 라우트는 사용자 등록, 로그인, 로그아웃, 상태 확인과 같은 인증 라우트와 다단계 인증 설정, 토큰 확인, MFA 재설정과 같은 MFA 라우트로 나뉩니다. 🗺️
- 다단계 인증은 사용자 이름/비밀번호와 시간 기반 OTP를 모두 사용하여 보안을 강화합니다. 🛡️
- 프로젝트는 먼저 백엔드 API를 구축하는 것으로 시작합니다. 💻
- 필요한 종속성으로는 express, dotenv, passport, passport-local, cors, bcryptjs, jsonwebtoken, mongoose, speakeasy, qrcode, express-session 등이 있습니다. 📦
- Passport.js는 NodeJS를 위한 인증 미들웨어이며, Speakeasy는 2단계 인증을 위한 OTP 생성기입니다. 🔑
- 코드는 Express 앱을 설정하고, 미들웨어를 추가하고, 라우트를 정의하고, 서버를 시작하는 것을 포함합니다. 🚀
- CORS 옵션을 설정하여 특정 오리진에서의 요청을 허용하고, 자격 증명을 true로 설정하여 쿠키를 전달합니다. 🍪
- express-session을 사용하여 세션을 설정하고, 세션 ID를 생성합니다. 🆔