
言語 🇯🇵 日本語
概要
実装
内部の仕組み
FastComments では、コメントがシステムに追加、更新、または削除されるたびに API エンドポイントを呼び出すことができます。
これは HTTP/HTTPS を介した非同期 Webhook によって実現します。
ウェブフックとは 
Webhookは、2つのシステム間の仕組み、または統合であり、"producer" (FastComments) がイベントを発生させ "consumer" (あなた) がAPIコールでそれを受け取るものです。
対応イベントとリソース 
FastComments は Comment リソースに対してのみウェブフックをサポートしています。
コメントの作成、削除、更新時のウェブフックをサポートしています。
これらはそれぞれシステム内で別個のイベントと見なされるため、ウェブフックイベントのセマンティクスと構造が異なります。
ローカル開発のセットアップ 
For Local development, use a tool like ngrok.
ローカル開発には、ngrok のようなツールを使用してください。
In order to simplify keeping the system secure, local development follows the same process as setting up and securing other environments.
システムのセキュリティを簡素化するために、ローカル開発は他の環境のセットアップおよび保護と同じプロセスに従います。
Step 1: Add "localhost" to domains in your account.
ステップ 1: アカウントのドメインに "localhost" を追加する
Add "localhost" as a domain here.
"localhost" を こちら でドメインとして追加してください。
Step 2: Pick an API Key
ステップ 2: API Key を選択する
We're going to be adding webhook configuration for your domain, so we'll need an API key. You can do that here.
ドメイン用にウェブフックの設定を追加するため、API Key が必要です。こちらで作成できます。
Under "Associate with domain" - select your "localhost" domain.
"Associate with domain" の項目で、"localhost" ドメインを選択してください。
NOTE: Alternatively, you can use one API Secret for all testing activity and staging environments. Simply add an API Secret for "All Domains", and give it a name like "test".
注意: 代替として、すべてのテスト活動およびステージング環境に対して1つの API Secret を使用することもできます。単に "All Domains" 用の API Secret を追加し、名前を "test" のように付けてください。
Ensure you have an API Secret defined for your production domain(s). Events for all other domains will use the wildcard (testing) secret.
本番ドメインには必ず API Secret を定義してください。その他のすべてのドメインのイベントはワイルドカード(テスト)シークレットを使用します。
Step 3: Add Your Webhook
ステップ 3: ウェブフックを追加する
While running ngrok or similar tool, set the value for "localhost" here.
ngrok 等のツールを実行している間に、"localhost" の値を こちら で設定してください。
When clicking Send Test Payload, we will send two test events to check that you validate the API key.
Send Test Payload をクリックすると、API Key の検証を確認するために 2 件のテストイベントを送信します。
Once it validates, hit Save.
検証が完了したら、Save を押してください。
Step 4: Add A Comment
ステップ 4: コメントを追加する
Now you can add, edit, or delete comments and should see us call your local development machine with the events, using your testing API key. There may be up to 30 seconds delay for the events to reach your machine.
これでコメントの追加、編集、削除が可能になり、テスト用 API Key を使用してイベントでローカル開発マシンにコールが来るのが確認できるはずです。イベントがマシンに届くまでに最大で 30 秒の遅延が発生する場合があります。
セットアップ 
本番と同じ手順を localhost に対して行ってください。本番ドメインと API Secrets が設定されていることを確認してください。
まず、Webhooks admin に移動してください。これは Manage Data -> Webhooks からアクセスできます。
設定ページは次のように表示されます:
このページで、各種コメントイベントごとのエンドポイントを指定できます。
各イベントタイプごとに、統合が正しく設定されていることを確認するために必ず「Send Test Payload」をクリックしてください。詳しくは次のセクション「Testing」を参照してください。
テスト 
Webhooks 管理画面には各イベントタイプ(作成、更新、削除)に対して Send Test Payload ボタンがあります。作成イベントと更新イベントはダミーの WebhookComment オブジェクトを送信しますが、削除イベントをテストする場合は ID のみを含むダミーのリクエストボディが送信されます。
ペイロードの検証
Webhook 統合をテストする際、受信リクエストに以下のヘッダーが含まれていることを確認してください:
token- あなたの API SecretX-FastComments-Timestamp- Unix タイムスタンプ(秒)X-FastComments-Signature- HMAC-SHA256 署名
ペイロードが正当であることを確認するために HMAC 署名の検証を使用してください。
テスト用ツール
開発中に受信する webhook ペイロードを確認するために、webhook.site や ngrok のようなツールを使用できます。
イベントタイプ
- 作成イベント: 新しいコメントが作成されたときにトリガーされます。デフォルトのメソッド: PUT
- 更新イベント: コメントが編集されたときにトリガーされます。デフォルトのメソッド: PUT
- 削除イベント: コメントが削除されたときにトリガーされます。デフォルトのメソッド: DELETE
各イベントはリクエストボディに完全なコメントデータを含みます(ペイロードの形式については Data Structures を参照してください)。
データ構造 
唯一ウェブフック経由で送信される構造は、以下の TypeScript で示された WebhookComment オブジェクトです。
WebhookComment オブジェクトの構造
"Create" イベントの構造
"create" イベントのリクエストボディは WebhookComment オブジェクトです。
"Update" イベントの構造
"update" イベントのリクエストボディは WebhookComment オブジェクトです。
"Delete" イベントの構造
"delete" イベントのリクエストボディは WebhookComment オブジェクトです。
2023年11月14日の変更
以前は "delete" イベントのリクエストボディにはコメントの id のみが含まれていました。現在は削除時のフルコメントが含まれます。
Run 
ユーザーがコメント内でタグ付けされた場合、その情報は mentions というリストに格納されます。そのリスト内の各オブジェクトは以下の構造を持ちます。
Run 
HTTP メソッド
管理パネルで各ウェブフックイベントタイプの HTTP メソッドを設定できます:
- Create Event: POST または PUT (デフォルト: PUT)
- Update Event: POST または PUT (デフォルト: PUT)
- Delete Event: DELETE、POST、または PUT (デフォルト: DELETE)
すべてのリクエストが ID を含むため、Create および Update 操作はデフォルトで冪等(PUT)です。同じ Create または Update リクエストを繰り返しても、あなたの側でオブジェクトが重複して作成されることはないはずです。
リクエストヘッダー
各ウェブフックリクエストには次のヘッダーが含まれます:
| ヘッダー | 説明 |
|---|---|
Content-Type |
application/json |
token |
あなたの API シークレット |
X-FastComments-Timestamp |
リクエストが署名された Unix タイムスタンプ(秒) |
X-FastComments-Signature |
HMAC-SHA256 署名(sha256=<hex>) |
詳細な HMAC 署名の検証方法は セキュリティと API トークン を参照してください。
セキュリティとAPIトークン 
FastComments webhook requests include multiple authentication mechanisms for security.
Headers Sent
| Header | Description |
|---|---|
token |
Your API Secret (for backwards compatibility) |
X-FastComments-Timestamp |
Unix timestamp (seconds) when the request was signed |
X-FastComments-Signature |
HMAC-SHA256 signature of the payload |
HMAC Signature Verification (Recommended)
We strongly recommend verifying the HMAC signature to ensure webhook payloads are authentic and haven't been tampered with.
Signature Format: sha256=<hex-encoded-signature>
How the signature is computed:
- Concatenate:
timestamp + "." + JSON_payload_body - Compute HMAC-SHA256 using your API Secret as the key
- Hex-encode the result
Example Verification (Node.js)
const crypto = require('crypto');
function verifyWebhookSignature(req, apiSecret) {
const timestamp = req.headers['x-fastcomments-timestamp'];
const signature = req.headers['x-fastcomments-signature'];
if (!timestamp || !signature) {
return false;
}
// タイムスタンプが最近のものであることを検証する(5分以内)
const now = Math.floor(Date.now() / 1000);
if (Math.abs(now - parseInt(timestamp, 10)) > 300) {
return false; // リプレイ攻撃の防止
}
// 署名を検証する
const payload = JSON.stringify(req.body);
const expectedSignature = crypto
.createHmac('sha256', apiSecret)
.update(`${timestamp}.${payload}`)
.digest('hex');
return signature === `sha256=${expectedSignature}`;
}
Example Verification (Python)
import hmac
import hashlib
import time
import json
def verify_webhook_signature(headers, body, api_secret):
timestamp = headers.get('X-FastComments-Timestamp')
signature = headers.get('X-FastComments-Signature')
if not timestamp or not signature:
return False
# タイムスタンプが最近のものであることを検証する
now = int(time.time())
if abs(now - int(timestamp)) > 300:
return False
# 署名を検証する
payload = json.dumps(body, separators=(',', ':'))
message = f"{timestamp}.{payload}"
expected = hmac.new(
api_secret.encode(),
message.encode(),
hashlib.sha256
).hexdigest()
return signature == f"sha256={expected}"
Example Verification (PHP)
function verifyWebhookSignature($headers, $body, $apiSecret) {
$timestamp = $headers['X-FastComments-Timestamp'] ?? null;
$signature = $headers['X-FastComments-Signature'] ?? null;
if (!$timestamp || !$signature) {
return false;
}
// タイムスタンプが最近のものであることを検証する(5分以内)
$now = time();
if (abs($now - intval($timestamp)) > 300) {
return false;
}
// 署名を検証する
$payload = json_encode($body, JSON_UNESCAPED_SLASHES);
$message = $timestamp . '.' . $payload;
$expectedSignature = 'sha256=' . hash_hmac('sha256', $message, $apiSecret);
return hash_equals($expectedSignature, $signature);
}
Legacy Authentication
The token header containing your API Secret is still sent for backwards compatibility. However, we recommend migrating to HMAC verification for improved security as it protects against replay attacks.
仕組みと再試行の処理 
システム内の Comment オブジェクトへのすべての変更は、イベントを発生させ、そのイベントはキューに送られます。
最初の webhook イベントは通常、イベント発生から6秒以内に送信されます。
API がダウンした場合に備えて、このキューは Webhooks 管理画面で監視できます。
あなたの API へのリクエストが失敗した場合、当社はそれをスケジュールに基づいて再キューします。
そのスケジュールは 1 Minute * the retry count です。コールが1回失敗した場合は1分後に再試行します。2回失敗した場合は2分待ち、以降同様に増えていきます。これは、負荷に関連する理由で API がダウンしている場合に、あなたの API に過剰な負荷をかけないためです。
Webhooks はログページからキャンセルできます。
結論
これで Webhooks ドキュメントは終了です。
FastComments の Webhook 統合がわかりやすく、迅速に設定できることを願っています。
ドキュメントに不備があると感じた場合は、下記からお知らせください。