Instagram을 지원하는 Messenger API의 경험 샘플 - Original Coast Clothing

Original Coast Clothing(OC)은 훌륭한 고객 경험을 제공하는 Instagram 플랫폼의 주요 특징을 보여주기 위해 만든 가상 의류 브랜드입니다. 이 데모를 참고하면 누구나 자동화와 실시간 고객 지원을 활용하는 편리한 Instagram을 지원하는 Messenger API 경험을 구현할 수 있습니다. 이 앱의 오픈 소스 코드와 로컬 환경 또는 원격 서버에 경험을 배포하는 방법에 대한 가이드가 제공됩니다. 이 경험과 유사한 샘플 Messenger 경험도 있습니다. 지금 바로 @originalcoastclothing으로 메시지를 보내거나 게시물에 댓글을 남겨보세요.

플랫폼 기능

이 경험은 다음의 플랫폼 기능을 사용합니다. 페이지에서 경험을 배포할 경우 코드에서는 아래의 기능을 모두 사용합니다.

• 메시지

  • 텍스트, 이미지 및 링크 미리 보기
  • 일반 템플릿
• Webhooks
• 빠른 답장
• 사용자 프로필
• 비공개 답장
• 아이스 브레이커

Instagram에 이 경험 배포

이 가이드의 과정을 모두 완료하면 서버에서 실행되고 계정에서 전송된 메시지에 응답하는 완전한 Instagram 앱이 구현됩니다.

이 경험을 구동하는 코드는 오픈 소스입니다. 누구나 훌륭한 메시지 경험을 쉽게 개발할 수 있습니다.

코드는 BSD 라이선스로 릴리스되어 있으므로 필요에 따라 자유롭게 사용할 수 있습니다. 이 코드는 나중에 참고할 수 있도록 GitHub에서 호스팅됩니다.

Instagram 앱 배포 요구 사항

• Instagram 프로페셔널 계정(크리에이터 또는 비즈니스 계정).
• 해당 Instagram 계정에 연결된 Facebook 페이지. 사용자와 연결할 때 Instagram 프로페셔널 계정의 신원을 대표하는 Facebook 페이지가 있어야 합니다. 새로운 페이지를 만들려면 https://www.facebook.com/pages/create를 방문하세요. 또한 시작하기 위한 테스트 페이지도 설정할 수 있습니다.
• 해당 페이지에서 작업을 수행할 수 있는 개발자 계정. 개발자 계정으로 새 앱을 만들 수 있으며, 이는 모든 Facebook 통합의 핵심입니다. Facebook 개발자 웹사이트에서 '시작하기' 버튼을 클릭하여 개발자로 등록할 수 있습니다.
• 기본 설정이 구성된 Facebook 앱. 새로운 앱을 만들려면 https://developers.facebook.com/에서 새 앱 추가를 클릭하세요.

설정 단계

이 섹션의 목표는 Instagram 앱이 메시지를 성공적으로 송수신하는 데 필요한 모든 액세스 토큰과 ID를 수집하는 것입니다. 시작하기 전에 위에 나열된 요구 사항을 모두 충족했는지 확인하세요. 이때 페이지, 등록된 Facebook 앱, Instagram 프로페셔널 계정이 있어야 합니다.

새 Facebook 앱을 만든 지 얼마 되지 않았다면 아마 개발 모드일 것입니다. 이 모드의 앱은 앱에 연결된 사용자(관리자, 개발자 및 테스터)와만 메시지를 주고받을 수 있습니다. 이 모드에서 가이드를 계속 진행할 수는 있지만, 앱을 공개할 준비가 되면 앱 검수를 거쳐 instagram_manage_messages 권한을 받아야 합니다. 자세한 내용은 앱 검수를 참조하세요.

1. 시작하기 문서에 따라 Instagram 통합을 구성합니다.
2. 경험을 테스트하는 데 사용할 일부 Instagram 테스트 계정을 추가합니다.

이때 다음의 항목이 준비되어 있어야 합니다.

• 앱 ID
• 앱 시크릿 코드
• 페이지 ID
• 페이지 액세스 토큰
• 페이지에 연결된 Instagram 계정
• 테스트 계정으로 등록된 Instagram 계정

설치

다음과 같은 항목이 필요합니다.

• Node 10.x 이상
• 코드에 대한 서버. 옵션에는 다음 항목이 포함됩니다.

  • 로컬 터널링 서비스(예: ngrok)
  • 원격 서버 서비스(예: Heroku 또는 Glitch)
  • 자체 웹 서버

Heroku 또는 Glitch를 사용한 원클릭 배포

다음 버튼을 사용하여 이 경험을 Heroku나 Glitch에 자동으로 배포할 수 있습니다. 설정을 완료하는 데 필요한 환경 변수를 입력하라는 메시지가 나옵니다.

ngrok를 사용한 로컬 배포

터널링 서비스는 로컬 웹 서버를 Facebook Webhooks로 도달할 수 있는 외부 URL에 노출합니다. 이러한 서비스는 여러 가지가 있습니다. 이 예시에서는 ngrok를 사용합니다.

1. 리포지토리 복사

리포지토리를 로컬 컴퓨터에 복사합니다.

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. 터널링 서비스 설치

ngrok를 아직 설치하지 않은 경우 다운로드하거나 명령줄을 사용하여 설치합니다.

$ npm install -g ngrok

이 리포지토리 디렉터리에서 원하는 포트로 로컬 서버에 대한 터널을 요청합니다.

$ ngrok http 3000

화면에 ngrok 상태가 표시되어야 합니다.

Session Status                online
Account                       Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000

로컬 컴퓨터로 포워딩되는 외부 서버의 https URL을 메모합니다. 위의 예시에서는 https://1c3b838deacb.ngrok.io입니다.

3. 종속성 설치

리포지토리 디렉터리에서도 새 터미널 탭을 엽니다.

$ npm install

또는 Yarn을 사용할 수도 있습니다.

$ yarn install

4. .env 파일 설정

.sample.env 파일을 .env로 복사합니다.

$ cp .sample.env .env

.env 파일을 수정하여 앱과 페이지에 대한 모든 값을 추가합니다.

5. 로컬에서 앱 실행

$ node app.js

이제 브라우저에서 http://localhost:3000 주소로 앱의 기본 페이지에 액세스할 수 있습니다.

2단계의 외부 URL에서도 앱에 액세스할 수 있는지 확인합니다.

Heroku를 사용한 배포

1. 리포지토리 복사

리포지토리를 로컬 컴퓨터에 복사합니다.

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. Heroku CLI 설치

디렉터리가 아직 git 리포지토리가 아닌 경우 새로 만듭니다.

$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"     

3. Heroku CLI 설치

Heroku CLI를 아직 설치하지 않았다면 다운로드하여 설치합니다.

4. CLI에서 앱 만들기

$ heroku apps:create

Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

앱에 지정된 이름을 메모합니다. 이 예시에서는 mystic-wind-83입니다.

5. 환경 변수 설정

Heroku 앱 대시보드에서 앱을 찾고 .sample.env 파일의 코멘트에 따라 구성 변수를 설정합니다.

또는 다음과 같이 명령줄에서 환경 변수를 설정할 수 있습니다.

$ heroku config:set PAGE_ID=XXXX

6. 코드 배포

$ git push heroku master

7. 로그 출력 보기

$ heroku logs --tail

Webhook 연결

서버가 실행되고 있으므로 Webhook 엔드포인트는 /webhook 경로에 있습니다. 위의 Heroku 예시에서는 http://mystic-wind-83.herokuapp.com/webhook가 됩니다.

[Messenger 플랫폼 Webhooks 가이드](https://developers.facebook.com/docs/messenger-platform/webhooks)에 따라 Webhooks를 설정합니다.

Webhooks 구독이 검증되고 나면 다음의 이벤트를 구독합니다.

• comments
• messages
• messaging_postbacks

구독한 이벤트 옆의 '테스트' 버튼을 클릭하여 Webhook를 테스트합니다. 서버의 로그 출력에 테스트 이벤트가 보여야 합니다.

앱 설정이 성공했는지 테스트

'Instagram 테스터' 역할로 계정에 로그인한 동안, 페이지로 연결된 Instagram 계정에 메시지를 보내거나 게시물에 댓글을 남겨 봅니다.

Instagram에서 메시지에 대한 응답이 보이면 앱 설정이 완료된 것입니다! 다 되었습니다!

문제 해결

앱이 나를 제외한 다른 사람에게 답장하지 않음

Facebook 앱이 아직 개발 모드일 가능성이 큽니다. 누군가를 앱의 테스터로 추가하고 그 사람이 이를 수락하면 앱은 해당 테스터에게 메시지를 보낼 수 있습니다. 준비되고 나서 instagram_manage_messages 권한을 요청하면 누구에게나 답장을 보낼 수 있게 됩니다.

기타 문제

이 가이드에 오류가 있나요? 이슈를 신고하세요