生成AIにLINE Botを作ってもらう Claude3.5 Sonnet編その3

Last updated at 2025-02-15Posted at 2025-02-15

はじめに

前回のつづきです。validateSignature()がFalseを返す問題を解決します。ここはClaudeにがんばって考えてもらうことにしましょう

修正させてみる

プロンプト

validateSignature() の返り値は依然falseのままで問題が解決していません。以下にリクエストヘッダとリクエストボディの内容を示します。

Request Header: Headers {
"content-length": "561",
"content-type": "application/json; charset=utf-8",
host: "line-bot.bathtimefish.com:3000",
"user-agent": "LineBotWebhook/2.0",
"x-line-signature": "my1...="
}
Request Body; {"destination":"U8...","events":[{"type":"message","message":{"type":"text","id":"54...","quoteToken":"rlx...","text":"Hello"},"webhookEventId":"01...","deliveryContext":{"isRedelivery":false},"timestamp":1739605746862,"source":{"type":"user","userId":"U5..."},"replyToken":"3b...","mode":"active"}]}

回答

リクエストの内容を確認したところ、署名検証の問題を特定できました。問題は、リクエストボディの処理方法にあります。LINE Messaging APIは、特定の形式でリクエストボディの署名を生成しているため、その形式に合わせる必要があります。

main.ts

// deps.ts
import { 
  Application,
  Router,
  Context
} from "https://deno.land/x/oak@v12.6.1/mod.ts";
import { 
  Client as LineClient,
  validateSignature,
  WebhookEvent
} from "npm:@line/bot-sdk@8.0.0";

// config.ts
export interface Config {
  channelAccessToken: string;
  channelSecret: string;
  port: number;
  certFile: string;
  keyFile: string;
}

// Create config from environment variables
export const config: Config = {
  channelAccessToken: Deno.env.get("LINE_CHANNEL_ACCESS_TOKEN") || "",
  channelSecret: Deno.env.get("LINE_CHANNEL_SECRET") || "",
  port: parseInt(Deno.env.get("PORT") || "3000"),
  certFile: Deno.env.get("CERT_FILE") || "./cert/server.crt",
  keyFile: Deno.env.get("KEY_FILE") || "./cert/server.key",
};

// lineBot.ts
export class LineBot {
  private client: LineClient;

  constructor(config: Config) {
    this.client = new LineClient({
      channelAccessToken: config.channelAccessToken,
      channelSecret: config.channelSecret,
    });
  }

  // Handle webhook events
  async handleEvent(event: WebhookEvent): Promise<void> {
    if (event.type !== 'message' || event.message.type !== 'text') {
      return;
    }

    const { replyToken } = event;
    const { text } = event.message;

    // Echo the received message
    await this.client.replyMessage(replyToken, {
      type: 'text',
      text: `受信したメッセージ: ${text}`,
    });
  }
}

// server.ts
const app = new Application();
const router = new Router();
const bot = new LineBot(config);

// Middleware for LINE signature validation
async function validateLineSignatureMiddleware(ctx: Context, next: () => Promise<void>) {
  const signature = ctx.request.headers.get('x-line-signature');
  if (!signature) {
    ctx.response.status = 400;
    ctx.response.body = 'Missing signature';
    return;
  }

  // Get the raw body as a Buffer
  const rawBody = await ctx.request.body({ type: 'bytes' }).value;
  const bodyText = new TextDecoder().decode(rawBody);

  if (!validateSignature(bodyText, config.channelSecret, signature)) {
    console.error('Signature validation failed');
    console.debug('Body:', bodyText);
    console.debug('Signature:', signature);
    ctx.response.status = 400;
    ctx.response.body = 'Invalid signature';
    return;
  }

  // Parse the body as JSON for later use
  ctx.state.requestBody = JSON.parse(bodyText);
  await next();
}

// Webhook endpoint
router.post('/webhook', validateLineSignatureMiddleware, async (ctx) => {
  const body = await ctx.request.body().value;
  const events: WebhookEvent[] = body.events;

  await Promise.all(events.map((event) => bot.handleEvent(event)));
  
  ctx.response.status = 200;
  ctx.response.body = 'OK';
});

// Health check endpoint
router.get('/health', (ctx) => {
  ctx.response.body = 'OK';
});

app.use(router.routes());
app.use(router.allowedMethods());

// Start the server
const httpsOptions = {
  cert: await Deno.readTextFile(config.certFile),
  key: await Deno.readTextFile(config.keyFile),
};

console.log(`Server starting on https://localhost:${config.port}`);
await app.listen({
  port: config.port,
  secure: true,
  certFile: config.certFile,
  keyFile: config.keyFile,
});

感想

実行したらエラーだったので次のプロンプトにしました

プロンプト

次のエラーが出力されました。対策を考えて修正コードを示してください。

Signature validation failed
Body: {"destination":"U87...","events":[{"type":"message","message":{"type":"text","id":"54...","quoteToken":"p_A...","text":"Hello"},"webhookEventId":"01...","deliveryContext":{"isRedelivery":false},"timestamp":1739607546817,"source":{"type":"user","userId":"U5..."},"replyToken":"40...","mode":"active"}]}
Signature: yu...

回答

LINE Messaging APIの署名検証の問題に対して、さらに詳しい分析と修正を行います。
出力されたデバッグ情報から、以下のことがわかります：

リクエストボディは正しくJSONとして受信されています
署名も正しく受信されています
問題は署名の検証処理にあります

main.ts

// deps.ts
import { 
  Application,
  Router,
  Context
} from "https://deno.land/x/oak@v12.6.1/mod.ts";
import { 
  Client as LineClient,
  validateSignature,
  WebhookEvent,
  middleware
} from "npm:@line/bot-sdk@8.0.0";
import * as crypto from "https://deno.land/std@0.208.0/crypto/mod.ts";

// config.ts
export interface Config {
  channelAccessToken: string;
  channelSecret: string;
  port: number;
  certFile: string;
  keyFile: string;
}

// Create config from environment variables
export const config: Config = {
  channelAccessToken: Deno.env.get("LINE_CHANNEL_ACCESS_TOKEN") || "",
  channelSecret: Deno.env.get("LINE_CHANNEL_SECRET") || "",
  port: parseInt(Deno.env.get("PORT") || "3000"),
  certFile: Deno.env.get("CERT_FILE") || "./cert/server.crt",
  keyFile: Deno.env.get("KEY_FILE") || "./cert/server.key",
};

// lineBot.ts
export class LineBot {
  private client: LineClient;

  constructor(config: Config) {
    this.client = new LineClient({
      channelAccessToken: config.channelAccessToken,
      channelSecret: config.channelSecret,
    });
  }

  // Handle webhook events
  async handleEvent(event: WebhookEvent): Promise<void> {
    if (event.type !== 'message' || event.message.type !== 'text') {
      return;
    }

    const { replyToken } = event;
    const { text } = event.message;

    // Echo the received message
    await this.client.replyMessage(replyToken, {
      type: 'text',
      text: `受信したメッセージ: ${text}`,
    });
  }
}

// server.ts
const app = new Application();
const router = new Router();
const bot = new LineBot(config);

// Middleware for LINE signature validation
async function validateLineSignatureMiddleware(ctx: Context, next: () => Promise<void>) {
  const signature = ctx.request.headers.get('x-line-signature');
  if (!signature) {
    ctx.response.status = 400;
    ctx.response.body = 'Missing signature';
    return;
  }

  // Get the raw body as a Buffer
  const rawBody = await ctx.request.body({ type: 'bytes' }).value;
  const bodyText = new TextDecoder().decode(rawBody);

  // Calculate the signature manually
  const key = await crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(config.channelSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );

  const signatureBytes = await crypto.subtle.sign(
    "HMAC",
    key,
    new TextEncoder().encode(bodyText)
  );

  const calculatedSignature = btoa(String.fromCharCode(...new Uint8Array(signatureBytes)));

  if (signature !== calculatedSignature) {
    console.error('Signature validation failed');
    console.debug('Body:', bodyText);
    console.debug('Received Signature:', signature);
    console.debug('Calculated Signature:', calculatedSignature);
    ctx.response.status = 400;
    ctx.response.body = 'Invalid signature';
    return;
  }

  // Parse the body as JSON for later use
  ctx.state.requestBody = JSON.parse(bodyText);
  await next();
}

// Webhook endpoint
router.post('/webhook', validateLineSignatureMiddleware, async (ctx) => {
  const body = ctx.state.requestBody;
  const events: WebhookEvent[] = body.events;

  try {
    await Promise.all(events.map((event) => bot.handleEvent(event)));
    ctx.response.status = 200;
    ctx.response.body = 'OK';
  } catch (error) {
    console.error('Error handling events:', error);
    ctx.response.status = 500;
    ctx.response.body = 'Internal Server Error';
});

// Health check endpoint
router.get('/health', (ctx) => {
  ctx.response.body = 'OK';
});

app.use(router.routes());
app.use(router.allowedMethods());

// Start the server
const httpsOptions = {
  cert: await Deno.readTextFile(config.certFile),
  key: await Deno.readTextFile(config.keyFile),
};

console.log(`Server starting on https://localhost:${config.port}`);
await app.listen({
  port: config.port,
  secure: true,
  certFile: config.certFile,
  keyFile: config.keyFile,
});

主な変更点：

Denoの暗号APIを使用して、署名の検証を手動で実装
HMACを使用してチャネルシークレットで署名を生成
より詳細なデバッグ情報の出力
Base64エンコーディングの処理を修正

この修正により：

LINE Messaging APIの署名検証の仕様に完全に準拠
より正確な署名の検証が可能
問題が発生した場合のトラブルシューティングが容易

実行時の注意点：

チャネルシークレットが正しく環境変数に設定されていることを確認
リクエストヘッダーとボディが改変されていないことを確認

この修正でも問題が続く場合は、以下の情報を確認させていただけますでしょうか：

使用しているチャネルシークレットの長さ
デバッグ出力に表示される計算された署名の値

また、必要に応じて署名検証のロジックをさらに調整することも可能です。

実行してみる

おうふ。。自前のvalidateSignatureを実装してきました。。実行してみましょう。

$ deno run --allow-net --allow-env --allow-read main.ts
error: The module's source code could not be parsed: Expression expected at file:///Claude3.5Sonnet/main.ts:124:2

  });
   ~

エラーですね。

プロンプト

下記のエラーが発生しました。

error: The module's source code could not be parsed: Expression expected at file:///home/ubuntu/llm-linebots/Claude3.5Sonnet/main1.ts:124:2
});
~

回答

申し訳ありません。Denoの構文エラーを修正します。

main.ts

// deps.ts
import { 
  Application,
  Router,
  Context
} from "https://deno.land/x/oak@v12.6.1/mod.ts";
import { 
  Client as LineClient,
  WebhookEvent
} from "npm:@line/bot-sdk@8.0.0";
import * as crypto from "https://deno.land/std@0.208.0/crypto/mod.ts";

// config.ts
export interface Config {
  channelAccessToken: string;
  channelSecret: string;
  port: number;
  certFile: string;
  keyFile: string;
}

// Create config from environment variables
export const config: Config = {
  channelAccessToken: Deno.env.get("LINE_CHANNEL_ACCESS_TOKEN") || "",
  channelSecret: Deno.env.get("LINE_CHANNEL_SECRET") || "",
  port: parseInt(Deno.env.get("PORT") || "3000"),
  certFile: Deno.env.get("CERT_FILE") || "./cert/server.crt",
  keyFile: Deno.env.get("KEY_FILE") || "./cert/server.key"
};

// lineBot.ts
export class LineBot {
  private client: LineClient;

  constructor(config: Config) {
    this.client = new LineClient({
      channelAccessToken: config.channelAccessToken,
      channelSecret: config.channelSecret
    });
  }

  // Handle webhook events
  async handleEvent(event: WebhookEvent): Promise<void> {
    if (event.type !== 'message' || event.message.type !== 'text') {
      return;
    }

    const { replyToken } = event;
    const { text } = event.message;

    // Echo the received message
    await this.client.replyMessage(replyToken, {
      type: 'text',
      text: `受信したメッセージ: ${text}`
    });
  }
}

// server.ts
const app = new Application();
const router = new Router();
const bot = new LineBot(config);

// Middleware for LINE signature validation
async function validateLineSignatureMiddleware(ctx: Context, next: () => Promise<void>) {
  const signature = ctx.request.headers.get('x-line-signature');
  if (!signature) {
    ctx.response.status = 400;
    ctx.response.body = 'Missing signature';
    return;
  }

  // Get the raw body as a Buffer
  const rawBody = await ctx.request.body({ type: 'bytes' }).value;
  const bodyText = new TextDecoder().decode(rawBody);

  // Calculate the signature manually
  const key = await crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(config.channelSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );

  const signatureBytes = await crypto.subtle.sign(
    "HMAC",
    key,
    new TextEncoder().encode(bodyText)
  );

  const calculatedSignature = btoa(String.fromCharCode(...new Uint8Array(signatureBytes)));

  if (signature !== calculatedSignature) {
    console.error('Signature validation failed');
    console.debug('Body:', bodyText);
    console.debug('Received Signature:', signature);
    console.debug('Calculated Signature:', calculatedSignature);
    ctx.response.status = 400;
    ctx.response.body = 'Invalid signature';
    return;
  }

  // Parse the body as JSON for later use
  ctx.state.requestBody = JSON.parse(bodyText);
  await next();
}

// Webhook endpoint
router.post('/webhook', validateLineSignatureMiddleware, async (ctx) => {
  const body = ctx.state.requestBody;
  const events: WebhookEvent[] = body.events;

  try {
    await Promise.all(events.map((event) => bot.handleEvent(event)));
    ctx.response.status = 200;
    ctx.response.body = 'OK';
  } catch (error) {
    console.error('Error handling events:', error);
    ctx.response.status = 500;
    ctx.response.body = 'Internal Server Error';
  }
});

// Health check endpoint
router.get('/health', (ctx) => {
  ctx.response.body = 'OK';
});

app.use(router.routes());
app.use(router.allowedMethods());

// Start the server
const httpsOptions = {
  cert: await Deno.readTextFile(config.certFile),
  key: await Deno.readTextFile(config.keyFile)
};

console.log(`Server starting on https://localhost:${config.port}`);
await app.listen({
  port: config.port,
  secure: true,
  certFile: config.certFile,
  keyFile: config.keyFile
});

主な修正点：

余分なセミコロンを削除
オブジェクトリテラルの最後のカンマを統一
コードの構造を整理

これで構文エラーは解消されるはずです。サーバーを再起動して動作を確認してください。問題が続く場合は、エラーメッセージを共有していただけますでしょうか？

実行してみる

$ deno run --allow-net --allow-env --allow-read main.ts
Server starting on https://localhost:3000

今度は正常に起動しました。
しかしメッセージを送信すると以下のエラーが発生しました。

[uncaught application error]: TypeError - Cannot read properties of undefined (reading 'importKey')

request: {
  url: "https://line-bot.bathtimefish.com:3000/webhook",
  method: "POST",
  hasBody: true
}
response: { status: 404, type: undefined, hasBody: false, writable: true }

    at validateLineSignatureMiddleware (file://Claude3.5Sonnet/main.ts:78:35)
    at eventLoopTick (ext:core/01_core.js:168:7)
    at async dispatch (https://deno.land/x/oak@v12.6.1/middleware.ts:80:7)
    at async dispatch (https://deno.land/x/oak@v12.6.1/middleware.ts:80:7)
    at async dispatch (https://deno.land/x/oak@v12.6.1/middleware.ts:80:7)
    at async Application.#handleRequest (https://deno.land/x/oak@v12.6.1/application.ts:470:9)

importKeyがないようですが、、、これ以上深掘るのは違いますね。。

おわりに

まさかvalidateSignatureを見限るとは思ってませんでした。この流れは沼方向一直線なので良くないですね。。次回はどうにか軌道修正を試みようと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

生成AIにLINE Botを作ってもらう Claude3.5 Sonnet編 その3

はじめに

修正させてみる

プロンプト

回答

感想

プロンプト

回答

実行してみる

プロンプト

回答

実行してみる

おわりに

生成AIにLINE Botを作ってもらう Claude3.5 Sonnet編その3