Node.js - 20 Passport.js, 사용자 인증, 로그인 기능

Passport.js 를 사용한 사용자 인증

 

Passport.js는 사용자 이름/패스워드로 하는 기본 로그인부터, 페이스북과 같은 제 삼자 로그인 서비스를 활용하는 것 까지 가능하다. 

이런 다양한 로그인 메소드들을 Strategy라고 부르며, 해당 웹 어플리케이션에서 사용하는 로그인 방식은 외부 서비스를 이용하지 않기 때문에 로컬 스트래티지이다.

 

먼저 

npm -i passport passport-local-mongoose -S

로 passport 패키지를 설치한다.

 

그리고 main.js 에 아래와 같이 추가한다.

 

const passport = require("passport"); //passport 모듈 요청

app.use(passport.initialize()); // passport 초기화
app.use(passport.session()); // passport가 Express.js내 세션을 사용하도록 설정

 

그리고 main.js에서 passport 직렬화 설정을 한다.

passport는 사용자 데이터를 직렬화하거나 역직렬화해 세션에 전달한다. 

세션은 압축된 형태의 직렬화된 사용자 데이터를 저장하고, 클라이언트로부터 마지막에 로그인한 사용자를 확인하기 위해 데이터를 다시 서버로 이동시킨다. 역직렬화는 사용자 데이터를 압축 버전으로부터 복구하며, 이 데이터를 통해 사용자 정보를 확인할 수 있다.

 

• 직렬화: 압축된 가독 형식으로 데이터 구조를 바꾸는 프로세스이다. 이 데이터는 JSON, XML과 같은 다양한 포맷을 취할 수 있다. 사용자 데이터는 단일 데이터로 변환돼 HTTP 트랜잭션 내에서 전달될 수 있다. 

Passport.js는 이 직렬화 프로세스를 수행하고 사용자 데이터를 암호화해 클라이언트 브라우저에 이 데이터를 세션 쿠키 중 일부로 저장시킨다. 이 쿠키는 사용자 정보를 포함하고 있기 때문에 다음번에 요청이 발생할 때, 이 사용자가 이전에 로그인 했었다는 것을 애플리케이션 서버에 알려준다. 

 

passport.use(User.createStrategy()); //사용자의 로그인 스트래티지 설정
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser()); //직렬화와 역직렬화 작업 하도록 설정

 

이렇게 main.js에 필요한 코드를 다 추가시키고, 마지막 단계로 사용자 모델을 passport-local-mongoose와 연동시킨다.

 

user.js 모델 파일에 이렇게 추가한다.

 

const passportLocalMongoose = require("passport-local-mongoose");

userSchema.plugin(passportLocalMongoose, {
  usernameField: "id"
});

Mongoose 플러그인 메소드를 사용해 userSchema가 passportLocalMongoose를 패스워드의 해싱과 저장에 사용한다.

passportLocalMongoose가 id를 로그인 파라미터로 사용하게한다.

 

위의 코드가 추가되면 Passport.js는 자동적으로 패스워드 저장에 관여하며, userSchema에서 password 속성을 없애버려도 된다. 이 플러그인이 스키마를 수정해서 hash와 salt 필드를  password 필드 대신 추가시킨다.

 

++해시와 솔트

현대 해싱 기술은 사용자 패스워드를 받아 이를 원래로 복원할 수 없는 해시로 변환한다. 이 해시는 무작위의 숫자와 문자로 돼 있어 평문데이터보다 더 안전하게 DB에 저장할 수 있다. 하지만 해커가 그가 예상한 패스워드를 해싱해 비교하다보면 언젠가는 오리지널 패스워드를 알아낼 가능성이 있다.

솔트는 이런 취약점과 싸우기 위해 도입됐다.

 

솔트는 짧은 랜덤 문자열이며, 평문 패스워드가 해싱되기 전에 패스워드 뒤에 덧붙여진다. 이렇게 하면 해커가 사용자의 패스워드를 정확히 추측했다고 해도 오리지널 패스워드에 추가된 솔트 값도 같이 추측해야하기 때문에 해킹이 더 어려워진다.

 

Passport.js는 해싱된 패스워드와 솔트 값을 DB에 저장해 애플리케이션 내에서 해싱을 항상 수행할 수 있도록 한다.

 

 

 

패스포트 등록 사용을 위한 Create 액션 수정

 

사용자 계정 생성 전에 수행했던 bcrypt 해싱 함수 대신에 Passport.js를 사용할 것이다.

 

registerController를 다음과 같이 변경한다. 

 

 

원래 있던 create 액션을 저렇게 수정했다.

register 메소드는 Passport.js에 딸린 것이다.

 

실제로 페이지를 이용해 사용자를 등록시켜 보면,

 

이렇게 salt와 hash라는 두개의 속성이 추가된 것을 볼 수 있다.

 

 

 

로그인 시 사용자 인증

 

userController.js 의 authenticate 액션을 새롭게 바꾼다.

먼저 상단에 

const passport = require("passport")로 passport 모듈을 요청한다.

 

그리고 이렇게 authenticate 액션을 수정한다.

passport redirect 및 플래시 메시지 옵션을 사용하기 위해 직접 passport.authenticate를 호출한다.

 

 

그리고 현재 로그인 된 상태임을 나타내기 위해 로그인이 되면 더이상 네비게이션 바에 Login / Register가 뜨지 않고

현재 로그인한 사용자 정보랑 로그아웃 문구를 띄워주도록 했다.

 

먼저 현재 로그인이 되어있는지 여부와 로그인한 사용자 정보를 저장하는 변수를 main.js에서 flashMessages를 정의한 미들웨어 함수에 아래와 같이 추가한다. 

 

isAuthenticated() 메소드는 Passport.js에서 제공되며, 이를 통해 사용자가 쿠키에 저장돼있는지 확인할 수 있다. 이때 loggedIn 값은 true나 false가 된다. 그리고 사용자의 정보를 추출해 currentUser 변수에 할당한다.

이제 모든 페이지 상에서 flashMessages와 마찬가지로 해당 변수들을 사용할 수 있게 됐다.

 

네비게이션 바를 보여주는 view파일인 layout.ejs 는 이렇게 수정했다.

layout.ejs

 

 

그럼 이제 로그인된 상태에서는 네비게이션 바가

이렇게 보인다.

 

 

 

그리고 로그아웃 기능을 위해서는 또 Passport.js에서 제공하는 logout 액션을 사용한다.

이 메소드는 활성중인 사용자 세션을 삭제한다. 

 

이렇게 코드를 짰다.

 

그런데 홈페이지로 리다이렉션이 돼야하는데, error.ejs로 넘어간다. (로그아웃은 된다) 이 문제도 해결해야 할 것 같다.

 

(+ 2021.11.10 16:15 수정)

redirectView 액션을 추가하지 않아서 생긴 문제였다.

 

이렇게 추가 하니까 된다.

(책에 나와있었는데 쓸데없는 거 같아서 안만들었었는데 이게 리다이렉션 할 페이지를 지정해주는 액션이었다..ㅋ)