[NodeJs] 페이스북으로 로그인하기 구현 (이메일 등 정보 받아오기)

NodeJs  페이스북 로그인 (Facebook Login) 기능 구현 (PassPort 패키지 활용)

 

 

  npm 패키지 설치 [express, express-session, session-file-store, passport, passport-facebook ]

//터미널에서 npm 패키지 설치
npm install -s express 
npm install -s express-session
npm install -s session-file-store
npm install -s passport
npm install -s passport-facebook 

 

  페이스북 개발자 도구 웹 페이지에 접속

https://developers.facebook.com/

 

  페이스 북 개발자 웹에서 오른쪽 위 내 앱 클릭

 

  다음 페이지에서 오른쪽 상단에 앱만들기 클릭

 

 

 

  팝업 탭에서 소비자 선택 후 계속 클릭

 

  표시할 앱이름 및 앱 연락처 이메일 입력 후 앱 만들기 버튼 클릭

 

 

  앱 프로젝트가 만들어 지고 다음 화면에서 왼쪽 설정 > 기본 설정 클릭 후 하단 체크 표시 입력 후 저장

 

 

  저장 후 왼쪽 메뉴바 제품 + 클릭 후 페이스 북 로그인 제품 추가

다시 왼쪽 메뉴바를 보면 제품 + 버튼 하단에 페이스북 로그인 생성 되어있는데

페이스북 로그인 > 설정 클릭하여 아래와 같이 입력 후 저장하기 클릭

 

 

  샘플 코드 작성

const express = require('express');
const session = require('express-session');
const fileStore = require('session-file-store')(session);
const passport = require('passport')
  , FacebookStrategy = require('passport-facebook').Strategy;

const app = express();

//기본 회원정보 (웹 실무시 데이터 베이스로 대체 하면됨)
let db = [{
	id : '1',
	email : 'goodmemory@tistory.com',
    password : 'goodmemory',
    name : 'goodmemory',
    provider : '',
    token : '',
    providerId : ''
}];

//페이스북 api ID, Secret 정보 저장 (페이스북 개발자 웹 내 앱ID, 시크릿 입력)
//여기서 중요한건 profileFields 리스트 내 있는 정보들을 추가해야 
//페이스 북 측에서 사용자 정보를 받을수 있음
const facebookCredentials = {
    "clientID": "", 
    "clientSecret": "",	
    "callbackURL": "http://localhost:3000/auth/facebook/callback",
    "profileFields" : ["id","emails","displayName"]
}


//MIDDLEWARE
app.use(express.urlencoded({extended : false}));
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false,
    store : new fileStore()
}));

//PASSPORT - 전용 middleware 추가
app.use(passport.initialize());
app.use(passport.session());

//PASSPORT - 직렬화 
//serializeUser : 로그인 / 회원가입 후 1회 실행
//deserializeUser : 페이지 전환시 마다 실행 
passport.serializeUser(function(user, done) {
    done(null, user);
  });
passport.deserializeUser(function(user, done) {
	let auth = db.find(info => info.email === user.email);
    if(auth) done(null, user);
});


//PASSPORT (facebook) - 페이스 북 로그인시 정보 GET
passport.use(new FacebookStrategy(facebookCredentials,
  function(accessToken, refreshToken, profile, done) {
  	//기존 회원 정보 찾기
	let auth = db.find(info => info.email === profile.emails[0].value);
	//이전 가입 정보가 있을 경우 (직접 메일 가입 한 경우 포함)
    if(auth) {
    	auth.token = accessToken,
        auth.provider = profile.provider,
       	auth.providerId = profile.id,
        auth.name = profile.displayName
    } else {
      auth = {
        id : 2,
        email : profile.emails[0].value,
        password : '',
        token : accessToken,
        provider : profile.provider,
        providerId : profile.id,
        name : profile.displayName
      };
      db.push(auth);
      return done(null,auth);
    }
  }
));

//페이스북 로그인 버튼 클릭시 페이스북 페이지로 이동하는 역할
app.get('/auth/facebook', passport.authenticate('facebook',{scope : 'email'}));

//페이스북 로그인 후 자신의 웹사이트로 돌아오게될 주소 (콜백 url)
//successRedirect : 성공시
//failureRedirect : 실패시
app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { successRedirect: '/',
                                      failureRedirect: '/auth/login' }));

//홈페이지 생성 (req.user는 passport의 serialize를 통해 user 정보 저장되어있음)
app.get('/',(req,res)=>{
	const temp = getPage('Welcome', 'Welcome to visit...',getBtn(req.user));
    res.send(temp);
});

//로그아웃 페이지 : 로그 아웃 처리 + 세션 삭제 + 쿠키 삭제 후 홈으로 리다이렉션
//passport 패키지로 인해 req.logout()으로 로그아웃 기능 구현 가능
app.get('/auth/logout',(req,res,next)=>{
  req.session.destroy((err)=>{
    if(err) next(err);
    req.logout();
    res.cookie(`connect.sid`,``,{maxAge : 0});
    res.redirect('/');
  });
});

//에러처리
app.use((err,req,res,next)=>{
  if(err) console.log(err);
  res.send(err);
});

//로그인 or 로그아웃 상태에 따른 버튼 생성
const getBtn = (user) =>{
    return user !== undefined ? `${user.name} | <a href="/auth/logout">logout</a>` : `<a href="/auth/facebook">Facebook Login</a>`;
}

//페이지 생성 함수
const getPage = (title, description,auth)=>{
	return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${title}</title>
        </head>
        <body>
            ${auth}
            <h1>${title}</h1>
            <p>${description}</p>
        </body>
        </html>
        `;
}

//SERVER
app.listen(3000,()=>console.log('http://localhost:3000'));

 

  실행 결과1  (메인페이지)

 

  실행 결과2  (페이스북 로그인 페이지)

 

  실행 결과3 (로그인 완료 페이지)