페이스북 메신저 플랫폼 추가
이미 대다수의 사람들이 페이스북 계정은 가지고 있을테니 우선 페이스북 개발자 사이트에서 앱을 생성한 상태라는 가정을 하고 진행하겠다.
우선 개발자 사이트에서 해당 앱을 클릭하면 좌측 하단에 제품 추가 버튼을 확인할 수 있다. 다음으로 메신저 플랫폼을 사용하기 위해 Messenger를 선택하자.
다음으로 시작하기 버튼을 누르게 되면 다음과 같은 화면이 나오게 된다.
페이스북 메신저 플랫폼은 사용자와 페이스북 페이지 사이의 대화에 관련된 API이기 때문에 테스트, 연동을 위해 개설된 페이스북 페이지가 필요하다. 만약 소유한 페이지가 없다면 하나 만드는걸 추천한다.
메신저 플랫폼을 연동할 페이지를 선택하게 되면 OAuth 인증 화면이 뜨게 되고 다음과 같이 페이지 엑세스 토큰이 생성된다.
다음으로 사용자의 대화를 전달하기 위해 Webhook을 등록해야 한다. Setup Webhooks 버튼을 누르면 다음 다이얼로그가 표시된다.
여기서 콜백 URL은 사용자의 메세지를 전달할 URL을 뜻한다. 확인 토큰의 경우 페이스북에서 해당 URL이 정상적으로 세팅되었는지를 확인하는 파라메터로 콜백 URL을 통해 확인 토큰을 검증하는 로직을 만들어줘야 한다. 아래 체크박스는 사용자의 대화 및 정보에 대한 설정으로 전부 체크해도 무방하다. 완성된 화면은 다음과 같다.
다음으로 확인 및 저장 버튼을 누르게 되면 해당 URL 및 확인 토큰에 관련한 로직을 검증하는데 이를 위해 서버에서 다음과 같이 구현한 후에 저장하자.
app.get(‘/webhook’, function(req, res) {
if (req.query[‘hub.verify_token’] === ‘MY_VERIFY_TOKEN’) {
return res.send(req.query[‘hub.challenge’]);
} return res.send(‘Error, wrong validation token’);
});
마지막으로 실제 서비스에서 사용하기 위해서는 앱 검수를 받아야 하는데 이번 글에서는 어디까지나 테스트이기 때문에 뛰어넘겠다.(만약 검수를 받지 않으면 메신저 플랫폼 API가 페이지 소유자에게만 동작한다.)
메세지 수신
이제 기본적인 설정이 끝났으니 실제 사용을 위해 구현해보자. 함께 사용할 라이브러리는 messenger-bot으로 메신저 플랫폼을 보다 쉽게 사용할 수 있게 해주는 라이브러리다. (페이스북 API 문서가 잘되있어서 직접 문서를 보며 구현해도 좋겠지만 번거롭..)
우선 메세지가 정상적으로 날아오는지 확인을 위해 다음과 같이 설정하자. 각 설명은 주석으로 표시하였다.
/* express, body-parser 설정 생략 */var Bot = require('messenger-bot');var bot = new Bot({
token: 'PAGE_TOKEN', // 페이지 토큰
verify: 'VERIFY_TOKEN', // 설정한 확인 토큰
app_secret: 'APP_SECRET' // 앱 시크릿 토큰
});
bot.on('error', function(err) {
console.log(err.message);
});
bot.on('message', function(payload, reply) {
var text = payload.message.text; console.log(text); bot.getProfile(payload.sender.id, function(err, profile) {
if (err) throw err;
reply({ text: text }, function(err) {
if (err) throw err;
});
});
});// 페이스북 메세지는 모두 POST 요청으로 이를 다시 messenger-bot에게 패스
app.post('/webhook', function(req, res) {
bot._handleMessage(req.body); res.status(200).jsonp({
message: 'ok'
});
});
만약 정상적으로 구현했다면 아래와 같은 형태로 페이스북 대화 내용이 전달되고 있는 것을 확인할 수 있을 것이다.
{ sender: { id: 1113704258552611 },
recipient: { id: 40140741199596 },
timestamp: 1462601661744,
message:
{ mid: ‘mid.1293123923:30f12399123a93’,
seq: 25,
text: ‘내가 바로 테스트다!’ } }메시지 송신
이번에는 메시지 송신을 위해 Send API에 대해 알아보자. 페이스북의 메세지 송신 형태는 총 4가지가 있는데 차례로 평문, 버튼, 제네릭, 영수증 형태가 있다. 여기서는 영수증 형태를 제외한 3가지만 알아보겠다.
첫 번째 평문의 경우 그냥 텍스트이기 때문에 별도의 설정은 필요하지 않다. messenger-bot 라이브러리를 사용하면 다음과 같이 사용할 수 있다.
bot.sendMessage(payload.sender.id, {
text: '저는 일반 메세지에요'
});다음은 버튼으로 사용자에게 선택을 할 수 있게 하거나 메세지를 리스트 형태로 구성하고 싶을 때 사용할 수 있다. 사용 방법은 다음과 같다.
bot.sendMessage(payload.sender.id, {
attachment: {
type: 'template',
payload: {
template_type: 'button',
// 배열 형태로 여러 버튼들을 전달할 수 있어요
buttons: [{
type: 'web_url',
url: URL,
title: 'URL로 이동'
}, {
type: 'postback',
title: 'Back',
payload: 'USER_DEFINED_PAYLOAD'
}]
}
}
});마지막 제네릭은 사용자에게 이미지를 포함한 메세지를 전달할 수 있는 형태로 평문 다음으로 많이 쓸 것으로 예상된다. 사용 방법은 다음과 같다.
bot.sendMessage(payload.sender.id, {
attachment: {
type: ‘template’,
payload: {
template_type: ‘generic’,
// 배열 형태로 여러 제네릭들을 전달할 수 있어요
elements: [{
title: ‘새로운 정보가 도착했어요’,
subtitle: ‘정보 받아라!’,
image_url: IMAGE_URL,
buttons: [{
type: ‘web_url’,
url: URL
title: ‘웹 사이트 방문’
}]
}]
}
}
});여기까지 메신저 플랫폼에 대한 설명을 마치겠다. 빼놓고 지나친 부분이 몇있는데 자세한 설정이나 설명은 메신저 플랫폼 API 완성 가이드를 참고하자.
결론
아직 공개한지 얼마 안됐다보니 텔레그램 API에 비해 조금 모자라지만 이정도면 충분히 실 서비스에도 적용하는데 문제가 없을 것 같다. 카카오나 라인이(현재 베타) 조금 긴장해야 하지 않을까?
