GASのウェブアプリをWorkplaceカスタム統合のWebhooksに設定する

# はじめに

こんにちは、コーポレートエンジニアの __まいまい__ です。
今回は Meta 社 (旧 Facebook 社) のビジネス向けコミュニケーションツールである __Workplace__ に関する記事です。

# 今回の目的
Workplace では __カスタム統合(アプリ)__ を追加できます。
カスタム統合の設定項目の中には __Webhooks__ があり、ここを設定することで Workplace で Webhook を利用できます。

今回は Google Apps Script (以下、GAS) でウェブアプリをデプロイし、その URL をカスタム統合の Webhooks 設定で __コールバック URL__ に指定して利用する場合に、カスタム統合の __Webhooks 設定時のトークン認証を通す方法__ を説明したいと思います。

![カスタム統合のWebhook設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/d3502e77-5005-a18a-2d65-d24b56500b77.png "カスタム統合のWebhooks設定画面")

# GAS の作成とウェブアプリのデプロイ

## GAS の作成

1. https://script.google.com/ にアクセスし、新しいプロジェクトを作成します。
1. __GET__ と __POST__ を受け取る関数 `doGet` と `doPost` のコードを作成し、保存します。

以下に `doGet` と `doPost` のサンプルコードを紹介します。

```javascript:sample.gs
// Webhooks設定のトークン認証で使用するトークンを設定
const VERIFY_TOKEN = "hogehoge"; 

function doGet(e) {
  var validRequest = e.parameter['hub.verify_token'] === VERIFY_TOKEN;
  var res = validRequest ? e.parameter['hub.challenge'] : 'Invalid Request';
  return ContentService.createTextOutput(res).setMimeType(ContentService.MimeType.TEXT);
}

function doPost(e) {
  var json = e.postData.contents;
  var data = JSON.parse(json);
  // 以下、実行したい処理を書く
}

```

- `VERIFY_TOKEN` に Workplace カスタム統合の Webhooks 設定でトークン認証する際に使用するトークンを設定します。 
    - ご自身の好きな文字列を設定してください。
- Webhooks 設定のトークン認証時に `doGet` が実行されます。
    - Workplace 側で入力されたトークンと `VERIFY_TOKEN` が比較され、相違があると `Invalid Request` が返されます。


## GAS ウェブアプリのデプロイ
1. GAS 画面で[デプロイ]ボタンをクリックし、`新しいデプロイ` をクリックします。 ![GASウェブアプリのデプロイ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/e0b59862-c9f7-67d4-6dc3-9cb8955da6ba.png "GAS画面でデプロイをクリック")
1. [種類の選択]の右側の歯車アイコンをクリックし、`ウェブアプリ` をクリックします。 ![GASウェブアプリのデプロイ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/b1019aef-7761-831e-50f5-cbc03f3eee7f.png "新しいデプロイ画面でウェブアプリを選択")
1. 以下のように設定し、`デプロイ` ボタンをクリックします。
    - __説明__: 任意の説明を入力します。
    - __次のユーザーとして実行__: `自分` を選択します。
    - __アクセスできるユーザー__: `全員` を選択します。 ![GASウェブアプリのデプロイ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/fea8d51d-62d4-0d00-dd0a-b8fe6d7626b8.png "新しいデプロイ画面で設定した後にデプロイ")
1. [ウェブアプリ]のところに表示されている URL を使いますので、コピーをクリックします。 ![GASウェブアプリのデプロイ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/a0538c05-a9ae-063b-ebbb-8a0e12ba1d50.png "ウェブアプリのURLをコピー")

# Workplace カスタム統合の Webhooks 設定

1. カスタム統合の設定ページ `https://your-company-instance.workplace.com/work/admin/apps` にアクセスします。
1. Webhooks を設定したいカスタム統合をクリックします。
1. [Webhooks]をクリックします。
1. 設定したい項目の鉛筆アイコンをクリックします。今回は[グループ]の鉛筆アイコンをクリックしています。 ![カスタム統合のWebhook設定画面2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/826b02d8-e67f-77df-4d08-7ae5e9b9c6be.png)
1. 設定画面が展開しますので、以下のように設定して `保存` ボタンをクリックします。
    - __コールバックURL__フィールド: 先ほどコピーしておいた GAS ウェブアプリの URLを貼り付けます。
    - __トークンを認証__フィールド: GAS で `VERIFY_TOKEN` に設定した文字列を入力します。
    - __comments/posts/membership/membership_requests__: 必要なものにチェックを入れます。今回は __posts__ のみチェックを入れています。 ![カスタム統合のWebhook設定画面3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/2c53438e-0e0f-88ec-76dc-e9dac1d30bb4.png)
1. トークン認証に__成功__すると画面左下に「Webhook設定が更新されました。」と表示され、Webhooks の設定が完了します。 ![トークン認証成功.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/6df60659-021d-b6dd-f1dc-2fb569203c33.png)
1. トークン認証に__失敗__すると以下のようなポップアップが表示されますので、その場合は設定内容を確認してください。 ![トークン認証失敗.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234372/5139cac9-dba0-5a62-10c2-0668f9e074e5.png)

以上で Workplace カスタム統合の Webhooks が有効になり、設定したイベントが発生すると GAS ウェブアプリの `doPost` が実行されます。

:::note warn
GAS ウェブアプリはデプロイし直すと URL が変わるので、新しくデプロイした場合はカスタム統合を再度設定し直してトークン認証してください。
:::

# 参考

今回はこちらの記事を参考にさせていただきました。

<https://qiita.com/koshi_funamizu/items/a7acdbb8bde69ce9b22d>

<https://developers.facebook.com/docs/workplace/integrations/custom-integrations/webhooks/?locale=ja_JP>