Chatwork API を試してみる

薄田達哉 / tatsuyasusukida

このスクラップについて

このスクラップでは Chatwork API を使用してメッセージの送受信を行う方法を試してみる

https://developer.chatwork.com/docs

ちなみに前のスクラップでは LINE で同様のことを試した

薄田達哉 / tatsuyasusukida

ドキュメントに一通り目を通したが何から手をつけて良いのかわからない

LINE のドキュメントが素晴らしかったので落差が激しい

薄田達哉 / tatsuyasusukida

ワークスペースの準備

コマンド

nest new -p npm hello-chatwork
cd hello-chatwork
npm install dotenv
touch .env

.gitignore に .env を忘れずに追加する

.gitignore

.env

薄田達哉 / tatsuyasusukida

API トークンの取得

Chatwork 画面右上から自分の名前 > サービス連携 > API トークンを選択するか https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php にアクセスして API トークンを取得して .env にコピー＆ペーストする

.env

CHATWORK_API_TOKEN="00000000000000000000000000000000"

薄田達哉 / tatsuyasusukida

テストコードの作成

コマンド

touch test/chatwork-api.e2e-spec.ts
npm install node-fetch@2
npm install --save-dev @types/node-fetch

test/chatwork-api.e2e-spec.ts

import fetch from 'node-fetch';

describe('Chatwork API', () => {
  it('/me', async () => {
    const fetchUrl = 'https://api.chatwork.com/v2/me';
    const fetchResponse = await fetch(fetchUrl, {
      headers: {
        'X-Chatworktoken': process.env.CHATWORK_API_TOKEN,
      },
    });

    console.log(fetchResponse.status);
    console.log(await fetchResponse.text());
  });
});

コマンド

npm run test:e2e -- chatwork-api --setupFiles dotenv/config

実行結果の例は下記の通り

実行結果の例

{
  "account_id": 1111111,
  "room_id": 222222222,
  "name": "\u8584\u7530 \u9054\u54c9",
  "chatwork_id": "xxxxxxxxxxxxx",
  "organization_id": 3333333,
  "organization_name": "",
  "department": "",
  "title": "",
  "url": "",
  "introduction": "",
  "mail": "",
  "tel_organization": "",
  "tel_extension": "",
  "tel_mobile": "",
  "skype": "",
  "facebook": "",
  "twitter": "",
  "avatar_image_url": "https://appdata.chatwork.com/avatar/xArw08pG7D.rsz.jpg",
  "login_mail": "susukida@example.com"
}

薄田達哉 / tatsuyasusukida

メッセージの送信

まずはグループチャットを新規作成する

新規作成したらルーム ID を確認する

ルーム ID はグループチャットの歯車アイコン > グループチャットの設定から確認できる

ルーム ID を .env ファイルに追記する

.env

ROOM_ID="000000000"

続いてテストコードを編集する

test/chatwork-api.e2e-spec.ts

import fetch from 'node-fetch';
import { URLSearchParams } from 'url';

describe('Chatwork API', () => {
  it('/me', async () => {
    const fetchUrl = 'https://api.chatwork.com/v2/me';
    const fetchResponse = await fetch(fetchUrl, {
      method: 'GET',
      headers: {
        'X-Chatworktoken': process.env.CHATWORK_API_TOKEN,
      },
    });

    console.log(fetchResponse.status);
    console.log(await fetchResponse.text());
  });

  it('/rooms/{room_id}/messages', async () => {
    const fetchUrl = `https://api.chatwork.com/v2/rooms/${process.env.ROOM_ID}/messages`;
    const fetchResponse = await fetch(fetchUrl, {
      method: 'POST',
      headers: {
        'X-Chatworktoken': process.env.CHATWORK_API_TOKEN,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        self_unread: '0',
        body: 'メッセージ本文',
      }).toString(),
    });

    console.log(fetchResponse.status);
    console.log(await fetchResponse.text());
  });
});

コマンド

npm run test:e2e -- chatwork-api --setupFiles dotenv/config

成功すると Chatwork のタイムライン上に「メッセージ本文」と投稿される

API から返送されるレスポンス内容の例は下記の通り

API から返送されるレスポンス内容の例

{"message_id":"0000000000000000000"}

薄田達哉 / tatsuyasusukida

今日は Webhook を使ったメッセージ受信を試してみる

薄田達哉 / tatsuyasusukida

リクエストの署名検証

まずは .env から環境変数を読み込めるようにする

コマンド

npm install --save @nestjs/config

src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [ConfigModule.forRoot()],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

.env に PORT, BASE_URL, WEBHOOK_TOKEN の 3 点を追加する

.env

PORT="3000"
BASE_URL="http://localhost:3000"

CHATWORK_API_TOKEN="00000000000000000000000000000000"
ROOM_ID="000000000"
WEBHOOK_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

続いてモジュールを編集してリクエストの生データにアクセスできるようにする

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule, {
    rawBody: true,
  });
  await app.listen(3000);
}
bootstrap();

続いてコントローラーを編集する、相変わらずサービスを使っていなくて行儀が悪い

src/app.controller.ts

import { Controller, Post, RawBodyRequest, Req, Res } from '@nestjs/common';
import { createHmac, timingSafeEqual } from 'crypto';
import { Request, Response } from 'express';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  /**
   * Chatwork Webhook 用のエンドポイントです。
   * @param req Express リクエストオブジェクト
   * @param res Express レスポンスオブジェクト
   */
  @Post('api/v1/chatwork/webhook')
  onApiV1ChatworkWebhook(
    @Req() req: RawBodyRequest<Request>,
    @Res() res: Response,
  ) {
    // リクエスト署名を検証します。
    const webhookToken = process.env.WEBHOOK_TOKEN;
    const privateKey = Buffer.from(webhookToken).toString('base64');
    const actualSignature = createHmac('sha256', privateKey)
      .update(req.rawBody)
      .digest('base64');

    const expectedSignature = req.headers[
      'x-chatworkwebhooksignature'
    ] as string;

    const isSignatureVerified = timingSafeEqual(
      Buffer.from(actualSignature),
      Buffer.from(expectedSignature),
    );

    if (!isSignatureVerified) {
      res.status(400).send('Bad Request: !isSignatureVerified');
      return;
    }

    res.status(200).end('OK');
  }
}

最後にテストコードを作成する

コマンド

touch test/chatwork-webhook.e2e-spec.ts

test/chatwork-webhook.e2e-spec.ts

import { createHmac } from 'crypto';
import fetch from 'node-fetch';

describe('Chatwork Webhook', () => {
  it('/api/v1/chatwork/webhook', async () => {
    const requestBody = JSON.stringify({
      webhook_setting_id: '12345',
      webhook_event_type: 'mention_to_me',
      webhook_event_time: 1498028130,
      webhook_event: {
        from_account_id: 123456,
        to_account_id: 1484814,
        room_id: 567890123,
        message_id: '789012345',
        body: '[To:1484814]おかずはなんですか？',
        send_time: 1498028125,
        update_time: 0,
      },
    });

    const webhookToken = process.env.WEBHOOK_TOKEN;
    const privateKey = Buffer.from(webhookToken).toString('base64');
    const webhookSignature = createHmac('sha256', privateKey)
      .update(requestBody)
      .digest('base64');

    const fetchUrl = process.env.BASE_URL + '/api/v1/chatwork/webhook';
    const fetchResponse = await fetch(fetchUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'User-Agent': 'Chatwork-Webhook/1.0.0',
        'X-Chatworkwebhooksignature': webhookSignature,
      },
      body: requestBody,
    });

    console.log(fetchResponse.status);
    console.log(await fetchResponse.text());
  });
});

最後に実行

コマンド

npm run test:e2e -- chatwork-webhook --setupFiles dotenv/config

実行結果

> hello-chatwork@0.0.1 test:e2e
> jest --config ./test/jest-e2e.json

  console.log
    200

      at Object.<anonymous> (chatwork-webhook.e2e-spec.ts:38:13)

  console.log
    OK

      at Object.<anonymous> (chatwork-webhook.e2e-spec.ts:39:13)

 PASS  test/chatwork-webhook.e2e-spec.ts
  Chatwork Webhook
    ✓ /api/v1/chatwork/webhook (51 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.825 s
Ran all test suites matching /chatwork-webhook/i.

ちゃんと動いている様子

Cloud Run にデプロイする前に署名検証失敗時のログ出力処理を追加しておいた方が良さそう

薄田達哉 / tatsuyasusukida

Webhook のレスポンスは何かに使われるのだろうか?

恐らく何にも使われないと予想する

薄田達哉 / tatsuyasusukida

リクエストボディをそのまま表示する

ついでにリクエスト署名の検証失敗時のログ出力処理を追加した

src/app.controller.ts

import { Controller, Post, RawBodyRequest, Req, Res } from '@nestjs/common';
import { createHmac, timingSafeEqual } from 'crypto';
import { Request, Response } from 'express';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  /**
   * Chatwork Webhook 用のエンドポイントです。
   * @param req Express リクエストオブジェクト
   * @param res Express レスポンスオブジェクト
   */
  @Post('api/v1/chatwork/webhook')
  onApiV1ChatworkWebhook(
    @Req() req: RawBodyRequest<Request>,
    @Res() res: Response,
  ) {
    // リクエスト署名を検証します。
    const webhookToken = process.env.WEBHOOK_TOKEN;
    const privateKey = Buffer.from(webhookToken).toString('base64');
    const actualSignature = createHmac('sha256', privateKey)
      .update(req.rawBody)
      .digest('base64');

    const expectedSignature = req.headers[
      'x-chatworkwebhooksignature'
    ] as string;

    const isSignatureVerified = timingSafeEqual(
      Buffer.from(actualSignature),
      Buffer.from(expectedSignature),
    );

    if (!isSignatureVerified) {
      res.status(400).send('Bad Request: !isSignatureVerified');
      console.warn(JSON.stringify({ actualSignature, expectedSignature }));
      return;
    }

    // リクエストの内容を出力します。
    console.info(req.rawBody.toString());

    res.status(200).end('OK');
  }
}

PORT 環境変数の読み込みを忘れていた

src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [ConfigModule.forRoot()],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

テストコードは変更なしで実行する

コマンド

npm run test:e2e -- chatwork-webhook --setupFiles dotenv/config

下記はテストコードの実行結果ではなくサーバー側のログ出力

サーバー側の出力

{"webhook_setting_id":"12345","webhook_event_type":"mention_to_me","webhook_event_time":1498028130,"webhook_event":{"from_account_id":123456,"to_account_id":1484814,"room_id":567890123,"message_id":"789012345","body":"[To:1484814]おかずはなんですか？","send_time":1498028125,"update_time":0}}

期待した通りに動作している、良かった

薄田達哉 / tatsuyasusukida

Cloud Run へデプロイ

コマンド

touch .gcloudignore

.gcloudignore

/.git/
/dist/
/node_modules/
/test/
/.env
/README.md

アップロードされるファイルを確認する

コマンド

gcloud meta list-files-for-upload

実行結果

nest-cli.json
.gitignore
package-lock.json
package.json
tsconfig.build.json
.prettierrc
.eslintrc.js
tsconfig.json
.gcloudignore
src/main.ts
src/app.service.ts
src/app.module.ts
src/app.controller.spec.ts
src/app.controller.ts

続いて package.json を編集する

package.json

{
  "scripts": {
    "gcp-build": "npm run build",
    "start": "node dist/main",
    "deploy": "gcloud run deploy hello-chatwork --source . --platform managed --region asia-northeast1 --allow-unauthenticated"
}

デプロイコマンドを実行する

コマンド

npm run deploy

デプロイが完了したら CLI か GCP Web コンソールから環境変数を設定する

薄田達哉 / tatsuyasusukida

Chatwork Webhook の登録

下記の URL にアクセスする

入力する必要があるのは下記 3 点

Webhook 名
Webhook URL
イベント

Webhook 名はわかりやすい名前であれば何でも良い

Webhook URL は Cloud Run の URL + /api/v1/chatwork/webhook

イベントはアカウントイベントとルームイベントの 2 つがある

アカウントイベントは自分がメンションされた時（多分＠とかを使ったメッセージが送信された時）に Webhook が実行される

ルームイベントは指定したルームでやり取りされる全てのメッセージが対象になる

ルームイベントはルーム ID を指定しなければならないので複数のルームを対象にするには Webhook を複数作成する必要がある、これはユースケースによっては厄介だがそういう仕様なので仕方ない

今回はアカウントイベントを使ってみる

作成ボタンを押すとトークンが表示されるので WEBHOOK_TOKEN として Cloud Run 環境変数に登録する

薄田達哉 / tatsuyasusukida

Chatwork でメンションする場合は Slack みたいに @ を使うのではなく、メッセージ入力部の左上にある TO ボタンを押します。

薄田達哉 / tatsuyasusukida

よく考えたら CHATWORK_API_TOKEN, ROOM_ID の環境変数は登録する必要ないが一応登録しておこう

薄田達哉 / tatsuyasusukida

自分で自分にメンションする

グループチャットに自分一人だとメンションできない（する必要がない）

下記のようにメッセージを送ればメンションできるのかな

メンションの形式

[To:0000000]薄田 達哉さん

0000000 のアカウント ID は環境設定 > Chatworkについてから確認できる

薄田達哉 / tatsuyasusukida

メッセージを送ってみたが反応がない

まだ反映されていないのかな？

BASE_URL を変更してテストコードを実行して確認してみる

コマンド

BASE_URL="https://hello-chatwork-xxxxxxxxxx-an.a.run.app" npm run test:e2e -- chatwork-webhook --setupFiles dotenv/config

テストコードは失敗したが Cloud Run のログではアクセスの記録を確認できた

自分で自分にメンションした場合はダメなのかな？

薄田達哉 / tatsuyasusukida

ルームイベントに変更してみる

もう一回試してみたけど結果は変わらなかったのでルームイベントに変更してみる

ルーム ID は URL の #rid 以下からコピーするかグループチャットの設定（歯車アイコン）から確認できる

変更したらログが表示された！

ただし、署名の検証に失敗している様子、やはりログを仕込んでおいて良かった

薄田達哉 / tatsuyasusukida

原因はすぐわかった

Chatwork のドキュメントを読み直したらすぐ分かった、下記が関連箇所

トークンをBase64デコードしたバイト列を秘密鍵とします（トークンはWebhook編集画面で確認できます）

Base64 デコードではなくエンコードしていた笑

なんで Base64 らしきものをもう一回エンコードするんだろうと疑問だったが解決した

ソースコードとテストコードを下記の通り修正する

src/app.controller.ts

import { Controller, Post, RawBodyRequest, Req, Res } from '@nestjs/common';
import { createHmac, timingSafeEqual } from 'crypto';
import { Request, Response } from 'express';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  /**
   * Chatwork Webhook 用のエンドポイントです。
   * @param req Express リクエストオブジェクト
   * @param res Express レスポンスオブジェクト
   */
  @Post('api/v1/chatwork/webhook')
  onApiV1ChatworkWebhook(
    @Req() req: RawBodyRequest<Request>,
    @Res() res: Response,
  ) {
    // リクエスト署名を検証します。
    const webhookToken = process.env.WEBHOOK_TOKEN;
    const privateKey = Buffer.from(webhookToken, 'base64');
    const actualSignature = createHmac('sha256', privateKey)
      .update(req.rawBody)
      .digest('base64');

    const expectedSignature = req.headers[
      'x-chatworkwebhooksignature'
    ] as string;

    const isSignatureVerified = timingSafeEqual(
      Buffer.from(actualSignature),
      Buffer.from(expectedSignature),
    );

    if (!isSignatureVerified) {
      res.status(400).send('Bad Request: !isSignatureVerified');
      console.warn(JSON.stringify({ actualSignature, expectedSignature }));
      return;
    }

    // リクエストの内容を出力します。
    console.info(req.rawBody.toString());

    res.status(200).end('OK');
  }
}

test/chatwork-webhook.e2e-spec.ts

import { createHmac } from 'crypto';
import fetch from 'node-fetch';

describe('Chatwork Webhook', () => {
  it('/api/v1/chatwork/webhook', async () => {
    const requestBody = JSON.stringify({
      webhook_setting_id: '12345',
      webhook_event_type: 'mention_to_me',
      webhook_event_time: 1498028130,
      webhook_event: {
        from_account_id: 123456,
        to_account_id: 1484814,
        room_id: 567890123,
        message_id: '789012345',
        body: '[To:1484814]おかずはなんですか？',
        send_time: 1498028125,
        update_time: 0,
      },
    });

    const webhookToken = process.env.WEBHOOK_TOKEN;
    const privateKey = Buffer.from(webhookToken, 'base64');
    const webhookSignature = createHmac('sha256', privateKey)
      .update(requestBody)
      .digest('base64');

    const fetchUrl = process.env.BASE_URL + '/api/v1/chatwork/webhook';
    const fetchResponse = await fetch(fetchUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'User-Agent': 'Chatwork-Webhook/1.0.0',
        'X-Chatworkwebhooksignature': webhookSignature,
      },
      body: requestBody,
    });

    console.log(fetchResponse.status);
    console.log(await fetchResponse.text());
  });
});