Passport (인증)

인증(authentication)에 대해 궁금하다면 여기 로 들어가면 된다

passport 란?
passport 는 인증 절차를 로직을 편하게 작업할 수 있게 도와주는 Node.js 미들웨어이다

Document : http://www.passportjs.org/docs/downloads/html/

Strategy

제일 먼저 passport의 strategy 를 알아야한다

strategy 란 passport 에서 쓰는 인증 방식을 말한다. 예로 passport-local, passport-github, passport-jwt 등이 있다.

strategies

그중에서 passport-local 방식을 사용해 보자.

passport-local

passport-local 이란?
이것은 우리가 흔히 사용하는 Username/Password 를 이용해서 쿠키-세션 으로 인증하게 해주는 passport Strategy 이다

Document : http://www.passportjs.org/packages/passport-local/

공식문서를 참고하는게 좋다
왜냐하면 지금부터 지름길을 이용할 것이기 때문에...

만약 나처럼 mongoose + mongoDB 를 사용한다면 passport-local-mongoose 모듈을 사용해보자

passport-local-mongoose

passport-local-mongoose 는 mongoose + mongoDB 를 사용할 때, 인증의 번거로운 과정을 간단한 함수로 만들어 놓은 모듈이다.

shortcut을 쓴다고 안좋아하는 사람도 있겠지만, 인증과정은 왠만해서는 거의 똑같다. 고맙게도 누가 아주 잘 만들어 놨는데, 한번 써보자~
mongoDB X NodeJS 를 참조하는게 좋을 것이다

Document : https://github.com/saintedlama/passport-local-mongoose

start

조금 복잡해 보일 수도 있지만 나누어보면 간단하다

유저모델 생성 -> passport 선언 -> passport-local 기본설정 -> 사용

먼저 설비부터 해주자

npm install passport passport-local passport-local-mongoose
// or
yarn add passport passport-local passport-local-mongoose

유저 모델 생성

먼저 계정을 담을 유저 모델을 만들자

User.js

import mongoose from 'mongoose';
import passportLocalMongoose from 'passport-local-mongoose';

const userSchema = new mongoose.Schema({
  name : String,
  email: String,
  avatarUrl : String
});
// 플러그인 설정
userSchema.plugin(passportLocalMongoose, { usernameField : 'email'});

const model = mongoose.model('User', userSchema);

export default model;

{ usernameField : 'email'} 은 옵션 중 하나로 username으로 email을 보여주겠다는 뜻이다. 문서에 많은 옵션들이 나와있으므로 참고하자

passport 선언

다음으로 passport 사용한다고 선언 해주자

app.js

app.use(passport.initialize()); // passport 초기화
app.use(passport.session());  

❗️passport 를 초기화 해주면 user 정보가 req.user 로 들어가게 된다❗️

app.use(passport.session());는 로그인을 지속시키기 위해 세션(session)을 사용 한다면 필수이다

express-session

아마 대부분 passport.session을 사용할 것이다
나처럼 express를 사용한다면 express-session도 필수적으로 설정해줘야 한다

npm install express-session
// or
yarn add express-session

Document : https://www.npmjs.com/package/express-session

app.js

import session from 'express-session';

app.use(session({ secret }));
// session({ options... })

secret 은 필수 옵션으로 우리가 보내주는 session ID를 암호화 해줄 것이다
나머지 옵션들은 문서를 확인하자

passport 설정

이제 여기서 passport-local-mongoose 를 왜 사용한지 알게 된다

공식문서

passport.use(new LocalStrategy(
  function(username, password, done) {
    User.findOne({ username: username }, function (err, user) {
      if (err) { return done(err); }
      if (!user) { return done(null, false); }
      if (!user.verifyPassword(password)) { return done(null, false); }
      return done(null, user);
    });
  }
));
// 유저라 로그인 했을 때 (에러가 날경우, 해당계정없음, 비밀번호 부적합, 로그인 성공)에 대한 처리

passport.serializeUser(function(user, done) {
  done(null, user.id);
});
// user ID를 클라이언트한테 쿠키로 보내기 설정

passport.deserializeUser(function(id, done) {
  User.findById(id, function(err, user) {
    done(err, user);
  });
});
// 쿠키로 인증 성공/실패시 처리

위 코드는 공식문서에 따른 passport-local 정석대로의 설정 방법이다
이를 passport-local-mongoose 는 아래 코드로 줄여놓았다

passport.js

import passport from "passport";
import User from "./models/User";

passport.use(User.createStrategy());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

😋 다들 이렇게 설정하니~~ 만약 내용을 바꾸고 싶으면 위의 코드로 작성하면 된다

이 설정 파일을 꼭 import 시켜주자
app.js

import './passport.js';

passport 사용

  • 회원가입
    passport-local-mongoose의 메서드로 모델.register() 함수를 사용하면 된다
const handleRegister = (err, user)=>{
  // 콜백 함수
}
User.register(user, password, handleRegister);
// 콜백함수는 안넣어도 된다

첫번째 인자 user에는 password 말고 다른 데이터들을 오브젝트로 넣으면 된다

  • 로그인
    passport의 기본으로 들어가 있는 메서드로 passport.authenticate()를 사용하면 된다

사용법은 두가지이다

  • 요청처리 함수로 바로 사용

const handleAuth = 
passport.authenticate('local', { successRedirect: '/',
                                 failureRedirect: '/login',
                                 failureFlash: true })
app.post('/login',handleAuth);
  • 함수로 바로 사용
authenticate('username', 'password', function(err, result) {
    if (err) { ... }
});

passport-github

passport-github 이란?
GitHub에 OAuth 인증을 할 수 있게 해주는 passport Strategy 이다

Document : http://www.passportjs.org/packages/passport-github/

GitHub OAuth

제일 먼저 GitHub OAuth 페이지에 들어가서 OAuth 어플리케이션 설정을 하자

image.png

  • Application name : OAuth를 사용할 프로젝트 이름
  • Homepage URL : 프로젝트의 URL
  • Application Descrption : 프로젝트 설명
  • Authorization callback URL : ❗️인증 후 받을 request URL 주소 (ex. http://127.0.0.1:3000/auth/github/callback )

등록을 완료하면 아래의 페이지가 나오는데 아래에서 써야한다

스크린샷 2019-07-11 오전 9.21.46.png

Usage

설치

npm install passport-github

설정

먼저 Strategy를 미들웨어로 불러오자

import GitHubStrategy 'passport-github';

passport.use(new GitHubStrategy.Strategy({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
      // 아까 페이지에서 적었던 Application callback URL이다
    callbackURL: "http://127.0.0.1:3000/auth/github/callback"
  },
  // 아래의 함수는 인증 성공시 GitHub에서 보내준 정보를 받는다
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ githubId: profile.id }, function (err, user) {
      // 실패시 err를, 성공시 req.user를 반환
      return cb(err, user);
    });
  }
));

clientID 와 clientSecret, callbackURL은 아까 GitHub페이지에서 얻었던 키를 넣으면 된다. 하지만 clientIDclientSecret은 공개하면 절대 안되기 때문에 .env 파일에 꼭 저장해두자

라우팅

// 로그인 요청 시 GitPage 인증 페이지로 이동

app.get('/auth/github',
  passport.authenticate('github'));

// 인증 처리 후 GitHub에서 콜백 해준다
app.get('/auth/github/callback', 
  passport.authenticate('github', { failureRedirect: '/login' }),
  function(req, res) {
    // 인증 성공 시에 처리할 함수
    res.redirect('/');
  });