Webhook は、さまざまなシステムを統合し、リアルタイムで通知を送信するための強力なツールです。これらを使用すると、従来の API のように、何か新しいものがあるかどうかを確認するための継続的なリクエストを必要とせずに、イベントが発生したときに、あるアプリケーションが別のアプリケーションに自動的に通知することができます。この投稿では、Webhook の仕組みと構成方法を理解し、Webhook の開発とテストを容易にする Webhook.site ツールを使用した実用的な例を検討します。

Webhook とは何ですか?

簡単に言うと、Webhook は、イベントが発生するたびにサービスが特定の URL に HTTP リクエストを送信できるようにするメカニズムです。 (API を使用する場合のように) 変更を確認するためにサーバーに繰り返しクエリを実行する必要がなく、Webhook はイベントが発生するとすぐにアプリケーションに通知します。これにより時間とリソースが節約され、システム間の対話がより効率的になります。

Webhook の典型的な使用例は支払いサービスです。トランザクションが完了すると、システムは支払いステータスを通知する Webhook をアプリケーションに送信します。そこから、アプリケーションは、注文ステータスの更新、電子メールによる領収書の送信などのアクションの中で、この情報を処理できます。

Webhook はどのように機能しますか?

1. Webhook 設定: 通知を受信するための URL を登録します。この URL は、Webhook を送信するサービスで関連イベントが発生するたびに呼び出されます。

2. イベント発生: 設定されたイベント (トランザクション、データ更新、レコードの作成など) が発生すると、サービスは登録された URL への HTTP リクエストをトリガーします。

3. Webhook 処理: アプリケーションはこのリクエストを受信し、情報を処理します。たとえば、データベース内のデータを更新したり、ユーザーに応答を送信したり、その他の必要なタスクを実行したりできます。

4. リクエスト応答: Webhook の処理後、アプリケーションは HTTP ステータス コード (200 OK など) で応答して、リクエストが正しく受信され処理されたことを通知する必要があります。

Webhook.site を使用した実践例

実際のアプリケーションで Webhook を構成する前に、ローカルまたは開発環境で Webhook をテストすることをお勧めします。このための優れたツールは Webhook.site です。 Webhook を送信してプレビューおよびデバッグできる一時 URL が提供され、データがどのように受信されるかを正確に確認できます。

Webhook.site を使って Webhook の受信テストをしてみましょう。

1. Webhook.site にアクセスしています:

   • Webhook.サイトに移動します。
   • サイトは、一意の URL (https://webhook.site/unique-url など) を自動的に生成します。これは、通知を受け取るために使用する URL になります。

2. Webhook 送信の設定:

   • Webhook をトリガーするシステムがあると想像してください。 Webhook.site.
   によって提供される URL にリクエストを送信するようにこのシステムを構成します。
   • ローカルでテストする場合は、cURL や Postman などのツールを使用して Webhook の送信をシミュレートし、生​​成された URL にリクエストを送信できます。

次に、この URL への Webhook の送信をシミュレートする Node.js コードを実装しましょう。

Node.jsでのWebhook実装例

ここでは、Webhook を受信するようにエンドポイントを構成する方法と、axios (またはその他の HTTP ライブラリ) を使用して Webhook を送信する方法の例を示します。

const express = require('express');
const axios = require('axios');
const app = express();

// Middleware para processar o body das requisições como JSON
app.use(express.json());

// Endpoint que recebe os webhooks
app.post('/webhook-receiver', (req, res) => {
  const event = req.body;

  // Processar o evento (aqui você adiciona a lógica que desejar)
  console.log('Webhook recebido:', event);

  // Retornar um status de sucesso para o serviço que enviou o webhook
  res.status(200).send('Evento processado com sucesso');
});

// Simulando o envio de um webhook para o Webhook.site
const webhookURL = 'https://webhook.site/unique-url';  // Substitua pela sua URL do Webhook.site

const sendWebhook = async () => {
  try {
    const payload = {
      event: 'payment_completed',
      data: {
        orderId: '12345',
        amount: 100.0,
        currency: 'USD'
      }
    };

    const response = await axios.post(webhookURL, payload);
    console.log('Webhook enviado com sucesso:', response.status);
  } catch (error) {
    console.error('Erro ao enviar webhook:', error);
  }
};

app.listen(3000, () => {
  console.log('Servidor rodando na porta 3000');

  // Enviar o webhook após o servidor iniciar
  sendWebhook();
});

この例では:

• Webhook の受信をシミュレートする /webhook-receiver エンドポイントを作成しました。
• axios を使用して Webhook.site への Webhook の送信をシミュレートし、架空の支払いからのデータを含むペイロードを渡します。
• Webhook.site は通知を受信し、リクエストの内容をパネルに表示します。

Webhook における適切なセキュリティ慣行

Webhook ではデータを URL に直接送信する必要があるため、セキュリティ上の予防措置を講じる必要があります。

1. Origin Validation: リクエストが実際に予期されたサービスから来ているかどうかを確認します。多くのサービスでは、リクエストの信頼性を検証するために使用できる暗号署名 (HMAC などを使用) を提供しています。

2. HTTPS を使用する: HTTPS を使用するように Webhook エンドポイントを常に構成し、サービスとアプリケーション間の通信が確実に暗号化されるようにします。

3. 認証: HTTPS に加えて、一部のアプリケーションでは、追加のセキュリティ層として認証トークンまたはキーを Webhook リクエストに含める必要があります。

4. レート制限: サーバーが一定期間に処理できるリクエストの数に制限を実装し、短期間に大量のリクエストでアプリケーションが過負荷になるのを防ぎます。

Webhook とAPI

Webhook と API を混同することがよくありますが、主な違いは次のとおりです。

• API: これらはアクティブです。アプリケーションはサーバーにリクエストを送信し、応答としてデータを受け取ります。情報を「検索」する必要があります。
• Webhook: これらは受動的です。イベントが発生すると、サーバーはアプリケーションに情報を自動的に送信します。あなたは尋ねる必要がなくても情報を「受け取る」ことができます。

Webhook は、決済システム、イベント通知、さまざまなサービス間の統合など、リアルタイム通知が必要なシナリオで特に役立ちます。

結論

Webhook は、さまざまなシステムがリアルタイムで自動的に通信できるようにするシンプルで効率的な方法です。 Webhook.site などのツールを使用すると、Webhook を運用環境に統合する前に、Webhook をテストおよびデバッグできます。さらに、適切なセキュリティ慣行に従うことで、エンドポイントが望ましくないアクセスから確実に保護されます。

最新のアプリケーションを開発していて、さまざまなサービスを統合する必要がある場合、Webhook はサービス間の通信を自動化する優れたソリューションです。

Webhook に関する質問や興味深い経験がある場合は、コメントで共有してください。