외부 API/facebook

페이스북 로그인 API

재테크하는 개발자 2022. 2. 20. 17:55

 

 

페이스북 API

 

※ 기본적인 페이스북 SDK 사용하기 위해 필요한 값 ( 사이트에서 계정생성하고 Setting 필요 )

app_id : 페이스북 앱 ID
app_secret : 페이스북 앱 시크릿 코드
default_graph_version : api 버전

 

사용자 액세스 토큰

플랫폼마다 서로 다른 API를 통해 액세스 토큰을 생성하지만 사용자 토큰을 가져올 때는 모두 기본 전략을 따릅니다.

 

 

단기 토큰 및 장기 토큰

사용자 액세스 토큰은 단기 실행 토큰과 장기 실행 토큰의 두 양식으로 제공됩니다. 일반적으로 단기 실행 토큰의 사용 시간은 약 1~2시간인 반면, 장기 실행 토큰의 사용 시간은 약 60일입니다. 이러한 수명이 일정할 것으로 생각하면 안 됩니다. 토큰 수명은 경고 없이 변경되거나 조기에 만료될 수 있습니다. 오류 처리에서 자세히 알아보세요.

웹 로그인을 통해 생성된 액세스 토큰은 단기 실행 토큰이지만, 앱 시크릿 코드와 함께 서버 측 API를 호출하여 장기 실행 토큰으로 변환할 수 있습니다.

Facebook의 iOS 및 Android SDK를 사용하는 모바일 앱은 기본적으로 장기 실행 토큰을 가져옵니다.

장기 실행 토큰을 사용할 때 Facebook의 마케팅 API에 대한 표준 액세스 권한이 있는 앱은 만료 시간이 없는 장기 실행 토큰을 받게 됩니다. 이 토큰은 다른 이유로 인해 여전히 무효화할 수 있지만 단지 시간 때문에 만료되지는 않습니다. 비즈니스 관리자의 시스템 사용자를 위한 액세스 토큰의 경우에도 해당됩니다.

 

 

 

① 로그인 API

페이스북 developer 사이트에 접속해서 회원가입, 로그인을 진행하고 내 앱을 생성해서 연결된 환경 구축에서 앱을 만들어야합니다. 즉, 앱 아이디가 필요하기에 과정을 진행한 다음 API를 사용할 수 있습니다.

accessToken : 웹페이지 사용자의 엑세스 토큰
graphDomain : 토큰 만료되는 시점
reauthorize_required_in: 로그인이 만료되기 전까지 시간(초)
userID : 사용자 ID

 

 

 

로그인 실습

 

  1. 페이스북에서 내 앱을 생성한 뒤, “facebook 로그인” 제품을 추가해줍니다.

 

 

 

 

 

 

2. 프로젝트를 생성하고 express를 설치해준뒤 index.js 파일을 생성하고 아래 코드에 입력해줍니다.

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 : 'test@example.com',
    password : 'test',
    name : 'test',
    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);
    }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'));
  }
));

//페이스북 로그인 버튼 클릭시 페이스북 페이지로 이동하는 역할
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'));

 

 

 

 

 

3. 아래 app id와 app 시크릿 코드를 위 코드에 입력해줍니다.

 

4. 서버를 구동시키고 localhost:3000로 브라우저에 접속합니다.

 

 

 

 

5. Facebook login을 클릭하면 아래와같이 이미지가 나오고 권한에 email만 받도록 하였기에 아래와 같이 email만 권한 수정가능합니다.

 

6. 로그인에 성공하면 아래와 같이 나옵니다.

 

 

 

 

 

 

 

저작자표시