問い合わせフォームの通知をLINEに飛ばす方法【Next.js × LINE Messaging API 実装コード付き】

[訪問者] フォーム送信
    ↓
[サーバー] バリデーション・スパム判定 → 承認待ちとして保存
    ↓
[管理者のLINE] 「承認 / 却下」ボタン付きで通知
    ↓ 承認を押すと
[LINEグループ] メンバー全員にメッセージが届く

if (src?.userId) { 
 console.log(`[line-webhook] userId: ${src.userId} (event: ${event.type})`); 
} 
if (src?.groupId) { 
 console.log(`[line-webhook] groupId: ${src.groupId} (event: ${event.type})`); 
}

# .env.local 
LINE_CHANNEL_ACCESS_TOKEN="..." 
LINE_CHANNEL_SECRET="..." 
LINE_ADMIN_USER_ID="U..." # 承認する人 
LINE_GROUP_ID="C..." # 通知先グループ 
TURNSTILE_SECRET_KEY="..." # Cloudflare Turnstile（後述） 
NEXT_PUBLIC_TURNSTILE_SITE_KEY="..." 
KV_REDIS_REDIS_URL="rediss://..." # Upstash Redis 
CONTACT_IP_SALT="..." # IPハッシュ用のソルト（後述）

import crypto from "crypto"; 

const LINE_API = "https://api.line.me/v2/bot"; 
type LineMessage = Record<string, unknown>; 

function accessToken(): string { 
 const t = process.env.LINE_CHANNEL_ACCESS_TOKEN; 
 if (!t) throw new Error("LINE_CHANNEL_ACCESS_TOKEN が未設定です"); 
 return t; 
}

/** push送信（グループ / 1:1 共通）。無料通数を消費する */ 
export async function pushMessages( 
 to: string, 
 messages: LineMessage[], 
): Promise<void> { 
 const res = await fetch(`${LINE_API}/message/push`, { 
  method: "POST", 
  headers: { 
  "Content-Type": "application/json", 
   Authorization: `Bearer ${accessToken()}`, 
  }, 
  body: JSON.stringify({ to, messages }), 
 }); 
 if (!res.ok) { 
  throw new Error(`LINE push failed (${res.status}): ${await res.text()}`); 
 } 
} 

/** reply送信（無料通数を消費しない。承認操作への応答に使用） */ 
export async function replyMessages( 
 replyToken: string, 
 messages: LineMessage[], 
): Promise<void> { 
 const res = await fetch(`${LINE_API}/message/reply`, { 
  method: "POST", 
  headers: { 
   "Content-Type": "application/json", 
    Authorization: `Bearer ${accessToken()}`, 
  }, 
  body: JSON.stringify({ replyToken, messages }), 
 }); 
 if (!res.ok) { 
  console.error(`LINE reply failed (${res.status}): ${await res.text()}`); 
 } 
} 

export function textMessage(text: string): LineMessage { 
 return { type: "text", text }; 
}

/** 承認／却下ボタン付きconfirmテンプレート */ 
export function approvalTemplate(id: string): LineMessage { 
 return { 
  type: "template", 
  altText: "メッセージの承認確認", 
  template: { 
   type: "confirm", 
   text: "このメッセージを グループに送りますか？", 
   actions: [ 
    { 
     type: "postback", 
     label: "承認", 
     data: `approve:${id}`, 
     displayText: "承認", 
    }, 
    { 
     type: "postback", 
     label: "却下", 
     data: `reject:${id}`, 
     displayText: "却下", 
    }, 
   ], 
  }, 
 }; 
}

export function verifyLineSignature(
  rawBody: string,
  signature: string | null,
): boolean {
  const secret = process.env.LINE_CHANNEL_SECRET;
  if (!secret || !signature) return false;
  const expected = crypto
    .createHmac("sha256", secret)
    .update(rawBody)
    .digest("base64");
  try {
    return crypto.timingSafeEqual(
      Buffer.from(expected),
      Buffer.from(signature),
    );
  } catch {
    return false;
  }
}

src/app/api/contact/token/route.ts：

import { NextResponse } from "next/server";
import { issueToken, isPaused } from "@/lib/contact/store";

export const runtime = "nodejs";
export const dynamic = "force-dynamic";

export async function GET() {
  try {
    if (await isPaused()) {
      return NextResponse.json({ paused: true }, { status: 503 });
    }
    return NextResponse.json({ token: await issueToken() });
  } catch (e) {
    // Redis障害時にフォームをハングさせない
    console.error("[contact] token issue failed:", e);
    return NextResponse.json({ error: "unavailable" }, { status: 503 });
  }
}

import { createClient } from "redis";
import crypto from "crypto";

const TOKEN_TTL = 60 * 15; // 15分

export async function issueToken(): Promise<string> {
  const redis = await getRedis();
  const token = crypto.randomUUID();
  await redis.set(`contact:token:${token}`, String(Date.now()), {
    EX: TOKEN_TTL,
  });
  return token;
}

/** トークンを消費して発行時刻を返す（無効ならnull） */
export async function consumeToken(token: string): Promise<number | null> {
  if (!token || token.length > 64) return null;
  const redis = await getRedis();
  const issuedAt = await redis.getDel(`contact:token:${token}`); // 取得と同時に削除
  return issuedAt ? Number(issuedAt) : null;
}

const client = createClient({
  url: REDIS_URL,
  socket: {
    connectTimeout: 3000,
    reconnectStrategy: (retries) => (retries > 1 ? false : 300),
  },
});

async function handlePost(req: NextRequest) {
  // 0. キルスイッチ（荒らされたら即停止できる）
  if (await isPaused()) {
    return err("paused", "ただいま受付を一時停止しています。", 503);
  }

  const body = (await req.json()) as Body;

  // 1. ハニーポット：botには成功を装う
  if (body.website) {
    return NextResponse.json({ ok: true });
  }

  // 2. ワンタイムトークン
  const issuedAt = await consumeToken(body.token ?? "");
  if (issuedAt === null) {
    return err(
      "token",
      "フォームの有効期限が切れました。再読み込みしてください。",
    );
  }

  // 3. 時間チェック：表示から3秒未満は機械的な送信
  if (Date.now() - issuedAt < 3000) {
    return err("too_fast", "送信が速すぎます。もう一度お試しください。");
  }

  // 4. 入力長
  const name = (body.name ?? "").trim();
  const message = (body.message ?? "").trim();
  if (!name || name.length > 30)
    return err("name", "名前は1〜30文字で入力してください。");
  if (!message || message.length > 500)
    return err("message", "メッセージは1〜500文字で入力してください。");

  // 5. URL・メールアドレスを含む投稿は拒否（宣伝スパムの大半がここで落ちる）
  if (/https?:\/\/|www\.|[\w.+-]+@[\w-]+\.[\w.]+/i.test(message)) {
    return err("content", "URL・メールアドレスは記載できません。");
  }

  const ip =
    (req.headers.get("x-forwarded-for") ?? "").split(",")[0].trim() ||
    "unknown";
  const country = req.headers.get("x-vercel-ip-country") ?? "??";

  // 6. Cloudflare Turnstile
  if (!(await verifyTurnstile(body.turnstileToken, ip))) {
    return err("turnstile", "認証に失敗しました。再読み込みしてください。");
  }

  // 7. レート制限
  if (!(await checkGlobalRate()))
    return err("rate_global", "本日の受付上限に達しました。", 429);
  if (!(await checkIpRate(hashIp(ip))))
    return err("rate_ip", "送信が多すぎます。", 429);

  // 8. 同一本文の重複
  if (!(await checkDuplicate(message)))
    return err("duplicate", "同じ内容が送信済みです。");

  // 9. 要注意フラグ（拒否はせず、通知に印を付ける）
  const flags: string[] = [];
  if (country !== "JP") flags.push(`海外IP: ${country}`);
  if (!/[぀-ヿ一-鿿]/.test(message)) flags.push("非日本語");

  // 保存して管理者に承認依頼
  const pending = {
    id: crypto.randomUUID(),
    name,
    message,
    country,
    flags,
    createdAt: Date.now(),
  };
  await savePending(pending);

  const flagLine = flags.length ? `\n⚠ ${flags.join(" / ")}` : "";
  const summary = `📮 新着メッセージ（承認待ち）\n名前: ${pending.name}\n国: ${country}${flagLine}\n──────\n${pending.message}`;

  const adminId = process.env.LINE_ADMIN_USER_ID;
  if (!adminId) throw new Error("LINE_ADMIN_USER_ID が未設定です");
  await pushMessages(adminId, [
    textMessage(summary),
    approvalTemplate(pending.id),
  ]);

  return NextResponse.json({ ok: true });
}

export async function checkIpRate(ipHash: string): Promise<boolean> {
  const redis = await getRedis();
  const key = `contact:rl:ip:${ipHash}`;
  const n = await redis.incr(key);
  await redis.expire(key, 3600); // 毎回TTLを張り直す
  return n <= 2; // 1時間に2件まで
}

export function hashIp(ip: string): string {
  const salt = process.env.CONTACT_IP_SALT ?? "";
  return crypto
    .createHash("sha256")
    .update(`${salt}:${ip}`)
    .digest("hex")
    .slice(0, 16);
}

async function verifyTurnstile(
  token: string | undefined,
  ip: string,
): Promise<boolean> {
  const secret = process.env.TURNSTILE_SECRET_KEY;
  if (!secret) {
    // 本番でキー未設定なら素通りさせない（フェイルクローズ）
    if (process.env.NODE_ENV === "production") {
      console.error(
        "[contact] TURNSTILE_SECRET_KEY が未設定のため送信を拒否しました",
      );
      return false;
    }
    return true; // ローカル開発のみスキップ
  }
  if (!token) return false;

  const res = await fetch(
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
    {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams({ secret, response: token, remoteip: ip }),
    },
  );
  const data = (await res.json()) as { success?: boolean };
  return !!data.success;
}

export async function POST(req: NextRequest) {
  const rawBody = await req.text();
  if (!verifyLineSignature(rawBody, req.headers.get("x-line-signature"))) {
    return NextResponse.json({ ok: false }, { status: 401 });
  }

  const { events } = JSON.parse(rawBody) as { events: LineEvent[] };

  for (const event of events ?? []) {
    if (event.type !== "postback" || !event.postback) continue;

    // 管理者以外からのpostbackは無視
    const adminId = process.env.LINE_ADMIN_USER_ID;
    if (adminId && event.source?.userId !== adminId) continue;

    const m = event.postback.data.match(/^(approve|reject):([0-9a-f-]{36})$/);
    if (!m) continue;
    const [, action, id] = m;

    // 取得と同時に削除＝二重承認を防ぐ
    const pending = await takePending(id);
    if (!pending) {
      await replyMessages(event.replyToken!, [
        textMessage("このメッセージは処理済みか、期限切れです。"),
      ]);
      continue;
    }

    if (action === "approve") {
      const text = `📮 ファンメッセージ\n名前: ${pending.name}\n──────\n${pending.message}`;
      await pushMessages(process.env.LINE_GROUP_ID!, [textMessage(text)]);
      await replyMessages(event.replyToken!, [
        textMessage("✅ グループに送信しました。"),
      ]);
    } else {
      await replyMessages(event.replyToken!, [
        textMessage("🗑 却下しました。グループには送信されません。"),
      ]);
    }
  }

  return NextResponse.json({ ok: true });
}

const fetchToken = useCallback(async () => {
  try {
    // サーバーが応答しなくても画面を固まらせない
    const res = await fetch("/api/contact/token", {
      signal: AbortSignal.timeout(8000),
    });
    if (res.status === 503) {
      const data = await res.json().catch(() => ({}));
      setStatus(data.paused ? "paused" : "error");
      return;
    }
    const data = (await res.json()) as { token: string };
    setToken(data.token);
    setStatus("ready");
  } catch {
    setStatus("error");
    setErrorMsg("読み込みに失敗しました。再読み込みしてください。");
  }
}, []);

<input
  type="text"
  name="website"
  value={website}
  onChange={(e) => setWebsite(e.target.value)}
  tabIndex={-1}
  autoComplete="off"
  aria-hidden="true"
  style={{ position: "absolute", left: -9999, width: 1, height: 1, opacity: 0 }}
/>

// scripts/reset-contact-limits.mjs
const keys = await client.keys("contact:rl:*");
for (const k of keys) await client.del(k);