IFTTTでif `Google Assistant` then `Webhook`でBad Requestが発生したときの対応メモ

概要

IFTTTを利用してGoogle Assistantからの入力文字列を、Webhook経由でWebAPIへクエリストリングで渡すときに、HTTP Status 400(Bad Request)が出てハマったのでメモしておきます。

発生した環境と現象

下記経路のngrokの呼び出し時にHTTP Status 400(Bad Request)になります。

通信経路

Google Home ⇒ IFTTT( if Google Assistant then WebHooks )(*1) ⇒ ngrok ⇒ WebAPI(*2)

*1 IFTTT -> MyAppletの設定

Google Assistant(Say a phrase with a text ingradient)

項目	設定
What do you want to say?	ブラウザ検索 $
What's another way to say it?
And another way?
What do you want the Assistant to say in response?
Language	Japanese

Webhooks(Make a web request)

項目	設定
URL	https://xxxxxxxx.ngrok.io/api/ctl?c=search&v=<<{{TextField}}>>
Method	GET
Content Type	text/plain
Body

*2 WebAPIのソース(nodejs)

const express = require('express');

let app = express();
app.listen(3000);

app.get("/api/ctl", async function (req, res, next) {
    console.log(req.query);
    ...
}

IFTTTのActivityに表示されるエラー

調べてみた

##1.ngrokを通さないときに、どんなリクエストが来るか確認してみる。

URL

https://xxxxxxxx.ngrok.io/api/ctl?c=search&v=<<{{TextField}}>>

レスポンス
文字化けしています。エスケープも効いていません。

{ c: 'search', v: '<<ƹÈ>>' }

##2.<<< >>>でのエスケープをダメ元で確認

Web上で検索すると<<< と >>> で囲むという記載も見受けられますのでまさかと思い、試してみました。

URL

https://xxxxxxxx.ngrok.io/api/ctl?c=search&v=<<<{{TextField}}>>>

レスポンス

なんと・・・文字化けしていません。

{ c: 'search', v: 'テスト' }

原因

IFTTT画面上のコメント間違いでした。実際は、IFTTTのWebHook(Make a web request)でのURLエンコードは<<< >>>が正しいようです。

おまけ

2018/08/23時点ではescapeは<< >> と記載されていました。