passport-facebook을 사용하여 Facebook OAuth 인증을 구현해 보았습니다.

웹 앱에 OAuth 인증을 서버 측에서 쉽게 구현하기 위해 passport와 Express를 접해 본 잡기입니다.
이전에 Node.js + Socket.io를 공부하면 Facebook 인증을 통해 채팅방에 액세스할 수 있는 앱을 만들었으므로 좀 더 슬림화하는 것을 동기 부여에 구현해 보았습니다.

덧붙여서 이전에 만든 앱에 관한 기사는 이하.

가장 간단한 Facebook 로그인 (OAuth2) 구현 방법

Facebook 메신저의 Conversation ID를 이용하여 대화방 UI 만들기

Socket.io를 사용한 채팅 룸 로직 구현

그런데 이번에 사용한 대표적인 패키지와 간단한 역할은 이런 느낌.

passport-facebook : OAuth 인증

익스프레스 : 웹 앱 구성 및 웹 서버

ejs 인증 전후에 View를 동적으로 전환

passport-facebook조차 설치하면 express 및 ejs와 같은 종속 패키지가 붙어 있습니다. 인증 플로우도 거의 설정 레벨로 만들 수 있습니다.

OAuth 인증 구현

passport-facebook example이 Express의 최소 구성 느낌으로 사용하기 쉽기 때문에 이것을 기반으로 만들었습니다.

폴더 구성
exapmles/login
　|---public (정적 파일 위치)
　|---views (els 위치)
　|---app.js ←여기가 본 기사의 메인
　|---package.json

이하, 인증계를 해 주는 스크립트로 재기록한 개소를 들겠습니다.
구현은 Heroku에 배포하는 전제로 하고 있습니다.

앱 ID 및 비밀

app.js

var FACEBOOK_APP_ID = "--insert-facebook-app-id-here--"
var FACEBOOK_APP_SECRET = "--insert-facebook-app-secret-here--";

facebook for developers 에서 앱을 등록하고 ID와 비밀번호를 발행하고 여기에 copipe이어도 좋고, 환경 변수로서 명령으로 입력도 있습니다.
이번에는 코드에 노출되지 않으므로 환경 변수를 사용합니다.

app.js

var FACEBOOK_APP_ID = process.env.FACEBOOK_APP_ID;
var FACEBOOK_APP_SECRET = process.env.FACEBOOK_APP_SECRET;

콜백 URL

app.js

passport.use(new FacebookStrategy({
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    callbackURL: "http://localhost:3000/auth/facebook/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    process.nextTick(function () {
      return done(null, profile);
    });
  }
));

passport에 인증에 필요한 정보를 전달하는 곳에서 콜백 URL을 정의합니다.
콜백 URL도 Facebook for developers에서 설정됩니다.
로컬 개발 환경이면 http://localhost:3000 에서 OK. 프로덕션을 바라보면 상대 패스라도 좋다고 생각합니다.
다만, 여기도 앞과 같이 환경 변수로 해 버립니다.OR 로 개발 환경도 갈 수 있도록 하면 편리하다고 생각합니다.

app.js

passport.use(new FacebookStrategy({
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    callbackURL: process.env.CALLBACK_URL || "http://localhost:3000/auth/facebook/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    process.nextTick(function () {
      return done(null, profile);
    });
  }
));

포트

app.js

app.listen(3000);

포트는 3000 결정이 되어 있으므로, 이것도 환경 변수로.
socket.io를 사용하고 싶기 때문에 express 대신 http 모듈을 사용하여 createServer에서 포트를 지정합니다.

app.js

var server = require('http').createServer(app);
var port = process.env.PORT || 3000;

server.listen(port);

시작해보기(로컬)

여러가지 환경 변수 사용하고 있으므로, 이런 커멘드로 실행.

$ FACEBOOK_APP_ID=*** FACEBOOK_APP_SECRET=*** node app.js

실행 후 http://localhost:3000 에서 브라우저를 시작하여 확인할 수 있습니다.

시작해보기 (Heroku)

배포는 GitHub를 통해. 여러가지 노출하고 싶지 않은 것은 환경 변수화하고 있으므로, GitHub 에서도 무섭지 않습니다.
Heroku에 로그인하여 만든 앱에 환경 변수를 설정합니다.

$ heroku login
$ heroku config:set FACEBOOK_APP_ID=***
$ heroku config:set FACEBOOK_APP_SECRET=***
$ heroku config:set process.env.CALLBACK_URL=***

그런 다음 Heroku에 배포하고 시작하면 작동합니다. 간단!



완성 된 것은 GitHub에 놓여 있기 때문에 부담없이 Fork 되어 복제하여 사용하십시오. ⭐︎받을 수 있으면 기뻐합니다.

map-chatter | GitHub