Webhooks 테스트를 위한 샘플 콜백 URL

Glitch를 사용하여 샘플 콜백 앱을 복제하여 Webhooks를 테스트하는 데 사용할 수 있는 Glitch 서버에서 공개 콜백 URL을 만들 수 있습니다. Glitch 프로젝트를 만드는 이유는 Webhooks가 트리거될 때 실시간으로 볼 수 있는 로그 파일에 Webhooks 페이로드를 작성하기 때문입니다.

클라우드 API에 대해 Webhooks를 테스트하기 위한 엔드포인트를 설정하기 전에

이 가이드는 여러 단계로 구성된 절차의 일부이며, Glitch를 사용하여 샘플 앱 엔드포인트를 구성하기 전에 해당 단계를 완료했어야 합니다. 구체적으로 다음 단계를 완료한 상태여야 합니다.

WhatsApp Business 클라우드 API를 시작하고 첫 테스트 메시지를 보내기 위한 모든 지침은 WhatsApp Business 클라우드 API 시작하기를 참조하세요.

Glitch 설정 및 구성

glitch.com으로 이동하여 계정을 만듭니다. 그러면 이 가이드에서 설명하는 모든 기능을 사용할 수 있으며 여기서 설명하는 UI와 표시되는 UI가 일치하게 됩니다. 계정을 만들지 않으면 대부분의 UI 기능이 누락되어 다르게 보입니다.
Glitch 계정을 설정하고 나면 WhatsApp 플랫폼 Webhooks 프로젝트 템플릿 링크를 사용하여 스타터 Glitch 프로젝트 템플릿을 엽니다.
Glitch 웹페이지의 오른쪽 상단에서 리믹스하여 편집하기 버튼을 클릭하여 샘플 앱을 복제합니다.
Remix to Edit를 클릭하여 나만의 Glitch 프로젝트 만들기
계정에 프로젝트 사본이 생성됩니다.
.env 파일에서 WEBHOOK_VERIFY_TOKEN 값을 원하는 임의의 문자열로 업데이트합니다. 그런 다음, 원하는 경우 앱 대시보드의 WhatsApp > API 설정에서 임시/영구 액세스 토큰의 값을 복사하고 GRAPH_API_TOKEN에 해당 값을 붙여넣습니다.
프로젝트의 Glitch 환경 변수 업데이트
오른쪽 상단에서 공유를 클릭하여 라이브 사이트 URL을 확보합니다. URL 끝에 /webhook를 추가하여 전체 콜백 URL을 확보합니다. 이는 https://<project-name>.glitch.me/webhook와 같은 형식입니다.

엔드포인트가 준비되었으므로 앱 대시보드로 돌아가야 합니다.

Glitch 엔드포인트 및 인증 토큰으로 앱 대시보드 구성

앱 대시보드에서 WhatsApp 제품을 찾아서 구성을 클릭합니다.
그런 다음 Webhooks 섹션에서 수정을 클릭합니다. 클릭하고 나면 화면에 대화 상자가 나타나고 콜백 URL과 인증 토큰을 요청합니다. Glitch 설정 및 구성 섹션에서 Glitch 프로젝트를 구성하는 데 사용한 값을 사용해야 합니다. 예를 들어 콜백 URL에 https://<project-name>.glitch.me/webhook를 사용하고 인증 토큰에 "HAPPY"를 사용합니다.
구성 페이지로 돌아가서 관리를 클릭하여 앱 대시보드 Webhooks 필드 대화 상자를 시작합니다.
Webhooks 필드 대화 상자 관리
필드 테이블의 오른쪽 끝 열에서 구독하고자 하는 모든 Webhooks 이벤트에 대해 구독을 클릭합니다(모든 Webhooks를 구독하는 것이 좋습니다).

그런 다음 메시지 행에서 테스트를 클릭하여 엔드포인트로 알림을 보냅니다.

Webhooks 알림이 트리거되었는지 확인하려면 Glitch로 돌아가서 LOGS를 선택합니다. 출력은 다음 이미지와 같아야 합니다.

전체 Webhooks 알림 페이로드는 다음과 같아야 합니다.

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "0",
      "changes": [
        {
          "field": "messages",
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "16505551111",
              "phone_number_id": "123456123"
            },
            "contacts": [
              {
                "profile": {
                  "name": "test user name"
                },
                "wa_id": "16315551181"
              }
            ],
            "messages": [
              {
                "from": "16315551181",
                "id": "ABGGFlA5Fpa",
                "timestamp": "1504902988",
                "type": "text",
                "text": {
                  "body": "this is a text message"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

WhatsApp Business 플랫폼 온프레미스 API

Glitch에서 스타터 Webhooks 프로젝트로 이동합니다. Glitch에서 리믹스
왼쪽 내비게이션에서 server.js를 클릭하여 Webhooks 엔드포인트 구현을 확인합니다.
오른쪽 상단에서 공유를 클릭하여 라이브 사이트 URL을 확보합니다. 이것이 콜백 URL이 됩니다. 이는 https://<project-name.glitch.me/webhook와 같은 형식입니다.
왼쪽 내비게이션 창의 상태 버튼을 클릭합니다. 앱이 특정 포트에서 수신하고 있다는 것이 보일 것입니다.

다른 사람 또는 자신에게 테스트 메시지를 보내서 알림을 확인합니다. 다음의 로그 예시는 수신된 문자 메시지(본문에 'Hi'라고 적혀 있음)와 전송된 문자 메시지(전송됨, 전달됨, 읽음 순으로 상태가 업데이트됨)를 나타냅니다.

Incoming webhook: {"messages":[{"from":"1234567890","id":"ABGGhSkIc2B_Ago-sDy5BNm-1gI5","text":{"body":"Hi"},"timestamp":"1529381066","type":"text"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"sent","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"delivered","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"read","timestamp":"1529381076"}]}

WhatsApp Business 플랫폼 | 클라우드 API | 온프레미스 API | Business Management API