페이스북 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
로그인 실습
- 페이스북에서 내 앱을 생성한 뒤, “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. 로그인에 성공하면 아래와 같이 나옵니다.
'외부 API > facebook' 카테고리의 다른 글
| 페이스북 Graph API 친구목록, 내정보 가져오기 (0) | 2022.02.23 |
|---|
