Webhook（レガシー）送信機能で回答データをPOSTリクエストする方法について

本記事はWebhook（レガシー）機能について記載しております。 レガシー版の利用は非推奨となっておりますため、こちらのWebhook機能の利用をご検討ください。

回答完了後アクションにあるWebhook(レガシー)を送信する（非推奨）の設定は、回答データを特定のサーバーに送信できるインテグレーション機能です。

Payload URLに任意のURLを設定した状態で回答者が回答を完了すると、回答データが設定されたURLにPOSTメソッドでリクエストされます。

対象のアンケートの公開設定画面から「回答完了後アクション」の設定するボタンをクリックして以下のように設定することでWebhookを指定することができます。

1.アクションを実行するで「Webhook(レガシー)を送信する（非推奨）」を選択します
2.Payload URLには回答データを送信する先のURLを指定できます
3.（任意）セキュリティ目的で検証用トークンを設定することができます

Webhookリクエスト形式

公開設定で設定されたPayload URLに対してPOSTメソッドで回答データをJSONのフォーマットでリクエストします。
リクエストのPayloadは以下の様になります。

[[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"Q1. Text Select",null,null,null,null,null,null,null,null,null,null,"Q2. Scale","Q3. Free Text","Q4. Text Matrix",null,null,null,null,null,null,null,null,null,null,null,null,null,null,"Q5. Pull Down",null,"Q6. Last Question"],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"Q.\u4eca\u56de\u306e\u30a4\u30d9\u30f3\u30c8\u304c\u958b\u50ac\u3055\u308c\u308b\u3053\u3068\u3092\u77e5\u3063\u305f\u304d\u3063\u304b\u3051\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002",null,null,null,null,null,null,null,null,null,null,"Q.\u4eca\u56de\u306e\u30a4\u30d9\u30f3\u30c8\u306b\u5bfe\u3059\u308b\u6e80\u8db3\u5ea6\u309211\u6bb5\u968e\u3067\u304a\u7b54\u3048\u304f\u3060\u3055\u3044\u3002","Q.\u5148\u307b\u3069\u306e\u56de\u7b54\u306e\u7406\u7531\u3092\u304a\u66f8\u304d\u304f\u3060\u3055\u3044\u3002\u00a0","Q.\u4eca\u56de\u306e\u30a4\u30d9\u30f3\u30c8\u306e\u4ee5\u4e0b\u306e\u70b9\u306b\u3064\u3044\u3066\u305d\u308c\u305e\u308c\u6e80\u8db3\u5ea6\u3092\u304a\u7b54\u3048\u304f\u3060\u3055\u3044\u3002",null,null,null,null,null,null,null,null,null,null,null,null,null,null,"Q.\u3042\u306a\u305f\u306e\u6027\u5225\u3068\u5e74\u9f62\u3092\u304a\u7b54\u3048\u304f\u3060\u3055\u3044\u3002",null,"\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002\u00a0"],["USER No.","\u540d\u524d","\u516c\u958b\u8a2d\u5b9a","\u56de\u7b54\u9806\u5e8f","\u56de\u7b54\u9032\u6357","\u5b8c\u4e86\u3057\u305f\u304b","\u96c6\u8a08\u9664\u5916\u5bfe\u8c61\u304b","\u958b\u59cb\u6642\u523b","\u5b8c\u4e86\u6642\u523b","\u30ab\u30b9\u30bf\u30e0\u30ad\u30fc","URL\u30d1\u30e9\u30e1\u30fc\u30bf","IP\u30a2\u30c9\u30ec\u30b9","\u30d6\u30e9\u30a6\u30b6","\u30d6\u30e9\u30a6\u30b6\u30d0\u30fc\u30b8\u30e7\u30f3","OS","\u30d7\u30e9\u30c3\u30c8\u30db\u30fc\u30e0","\u753b\u9762\u30b5\u30a4\u30ba","\u30e2\u30cb\u30bf\u30fc\u8272\u6570","\u30e2\u30d0\u30a4\u30eb\u304b","score","\u30c6\u30ec\u30d3","\u65b0\u805e","\u30e9\u30b8\u30aa","\u96d1\u8a8c","\u4f01\u696d\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8","\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u5e83\u544a","\u30e1\u30fc\u30eb\u30de\u30ac\u30b8\u30f3","SNS\u30fb\u30d6\u30ed\u30b0","\u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30fc\u30eb\u30fb\u30c1\u30e9\u30b7","\u4ea4\u901a\u5e83\u544a\u30fb\u770b\u677f","\u5bb6\u65cf\u30fb\u53cb\u4eba\u30fb\u77e5\u4eba","*\u672a\u8a2d\u5b9a","*\u672a\u8a2d\u5b9a","\u5927\u5909\u6e80\u8db3;\u30b9\u30bf\u30c3\u30d5\u306e\u5bfe\u5fdc","\u6e80\u8db3;\u30b9\u30bf\u30c3\u30d5\u306e\u5bfe\u5fdc","\u666e\u901a;\u30b9\u30bf\u30c3\u30d5\u306e\u5bfe\u5fdc","\u4e0d\u6e80\u8db3;\u30b9\u30bf\u30c3\u30d5\u306e\u5bfe\u5fdc","\u5927\u5909\u4e0d\u6e80;\u30b9\u30bf\u30c3\u30d5\u306e\u5bfe\u5fdc","\u5927\u5909\u6e80\u8db3;\u30a4\u30d9\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4","\u6e80\u8db3;\u30a4\u30d9\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4","\u666e\u901a;\u30a4\u30d9\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4","\u4e0d\u6e80\u8db3;\u30a4\u30d9\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4","\u5927\u5909\u4e0d\u6e80;\u30a4\u30d9\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4","\u5927\u5909\u6e80\u8db3;\u4f1a\u5834\u306e\u96f0\u56f2\u6c17","\u6e80\u8db3;\u4f1a\u5834\u306e\u96f0\u56f2\u6c17","\u666e\u901a;\u4f1a\u5834\u306e\u96f0\u56f2\u6c17","\u4e0d\u6e80\u8db3;\u4f1a\u5834\u306e\u96f0\u56f2\u6c17","\u5927\u5909\u4e0d\u6e80;\u4f1a\u5834\u306e\u96f0\u56f2\u6c17","\u6027\u5225","\u5e74\u9f62","*\u672a\u8a2d\u5b9a"],["21902384","test","\u516c\u958b\u8a2d\u5b9a","Q1;Q2;Q3;Q4;Q5;Q6","5","true","false","2019-04-04T20:09:22+09:00","2019-04-04T20:09:52+09:00","4dd945578469a16952a57125dbd7c68c43f0c1e8","","219.113.213.138","Chrome","73.0.3683.86","OS X 10.14.3","Macintosh","1440x900","24","false","0.0","0","0","0","0","1","0","0","0","0","0","0","8","\u4f1a\u5834\u304c\u3059\u3054\u304b\u3063\u305f\uff01","1","0","0","0","0","0","1","0","0","0","1","0","0","0","0","\u7537\u6027","30\u4ee3","0"]]

データ形式はクリエイティブサーベイのCSVデータと同様の形式になっています。
Webhookでは該当の回答完了者のみのデータをPOSTします。
回答者ごとの回答値はCSVデータ上では4行目の配列に格納されています。
CSVデータ形式についての解説はこちらを参照してください。

Webhook署名の検証方法

WebhookのX-CREATIVE-SURVEY-SIGNATUREヘッダには、タイムスタンプと署名が含まれています。
タイムスタンプの前にはt=が付き、署名の前にはv=が付きます。

X-CREATIVE-SURVEY-SIGNATURE: t=1492774577,
v=88a498139364c8e76eb91c897077f687c5247ae3

わかりやすくするために上記の例では改行が追加されていますが、実際のX-CREATIVE-SURVEY-SIGNATUREヘッダはすべて1行になります。
CREATIVE SURVEYはSHA-256でハッシュベースのメッセージ認証コード（HMAC）を使って署名を生成します。

手順1：ヘッダからタイムスタンプと署名を抽出する

区切り文字として,文字を使用してヘッダを分割し、要素のリストを取得します。次に、=文字を区切り文字として使用して各要素を分割し、プレフィックスと値のペアを取得します。

プレフィックスtの値はタイムスタンプに対応し、vは署名に対応します。他のすべての要素は使用しません。

手順2： signed_pa​​yload文字列 を準備する

signed_pa​​yload文字列は以下を連結することで得られます。

• タイムスタンプ（文字列として）
• .文字
• JSONペイロード

手順3：予想される署名を決定する

SHA256ハッシュ関数を使用してHMACを計算します。公開設定画面に表示されるPayload検証用トークンをキーとして使用し、signed_pa​​yload文字列をメッセージとして使用します。

手順4：署名を比較する

ヘッダの署名と予想される署名を比較します。署名が一致する場合は、現在のタイムスタンプと受信したタイムスタンプの差を計算し、その差が許容範囲内かどうかを判断します。

最終更新日：2023/11/28