SNSやクラウドを使いたくない時に。長文APIキーをQRコードで安全に転送する仕組みを作った

// 最初の素朴な実装
const input = fs.readFileSync("qr_target.txt", "utf8");
const chunks: string[] = [];
for (let i = 0; i < input.length; i += 1000) {
  chunks.push(input.slice(i, i + 1000));
}
// chunks からQRコードを生成...

SCRIPT:part:base64data

SCRIPT:{sessionId}:{partIndex}:{totalParts}:{base64Chunk}

SCRIPT:a3f9k2:0:3:SGVsbG9Xb3JsZA==
SCRIPT:a3f9k2:1:3:YWJjZGVmZ2g=
SCRIPT:a3f9k2:2:3:eHl6MTIz

import QRCode from "qrcode";

public async genQrcode(): Promise<void> {
  const MAX_QR_CHARS = 500;
  const input = fs.readFileSync("input/target.txt", "utf8");

  // セッションID生成（タイムスタンプベース）
  const sessionId = Date.now().toString(36).substring(2, 8);

  // 全体をBase64エンコード
  const base64Input = Buffer.from(input, "utf8").toString("base64");

  // Base64文字列をチャンクに分割
  const base64Chunks: string[] = [];
  for (let i = 0; i < base64Input.length; i += MAX_QR_CHARS) {
    base64Chunks.push(base64Input.slice(i, i + MAX_QR_CHARS));
  }

  // メタデータ付きチャンクを生成
  const totalParts = base64Chunks.length;
  const chunks: string[] = [];
  for (let i = 0; i < totalParts; i++) {
    chunks.push(
      `SCRIPT:${sessionId}:${i}:${totalParts}:${base64Chunks[i]}`
    );
  }

  // HTMLファイルに出力
  await this.generateHtml(chunks, sessionId, totalParts, input.length);
}

for (const [i, chunk] of chunks.entries()) {
  const qrSvg = await QRCode.toString(chunk, {
    type: "svg",
    errorCorrectionLevel: "M",  // 中程度の誤り訂正
    margin: 2,
    width: 250,
  });

  // HTMLにカード形式で追加
  appendToHtml(`
    <div class="qr-card">
      <h2>Part ${i} of ${totalParts - 1}</h2>
      <div class="qr-code">${qrSvg}</div>
      <div class="chunk-info">
        Session: ${sessionId} | ${chunk.length} characters
      </div>
    </div>
  `);
}

let currentIndex = 0;
const totalCards = ${totalParts};

function showCard(index) {
  const cards = document.querySelectorAll('.qr-card');
  cards.forEach((card, i) => {
    card.classList.toggle('active', i === index);
  });
}

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft' && currentIndex > 0) {
    currentIndex--;
    showCard(currentIndex);
  }
  if (e.key === 'ArrowRight' && currentIndex < totalCards - 1) {
    currentIndex++;
    showCard(currentIndex);
  }
});

// 受信したチャンクを保持
const receivedChunks = new Map<number, string>();
let expectedTotal = 0;

function onQrScanned(data: string) {
  // SCRIPT:sessionId:part:total:base64chunk をパース
  const parts = data.split(":", 5);
  if (parts[0] !== "SCRIPT") return;

  const partIndex = parseInt(parts[2]);
  const total = parseInt(parts[3]);
  const base64Chunk = parts[4];

  expectedTotal = total;
  receivedChunks.set(partIndex, base64Chunk);

  // 全パーツが揃ったら再構成
  if (receivedChunks.size === expectedTotal) {
    const sorted = Array.from(receivedChunks.entries())
      .sort(([a], [b]) => a - b)
      .map(([_, chunk]) => chunk)
      .join("");

    const original = Buffer.from(sorted, "base64").toString("utf8");
    console.log("Reconstructed:", original);
  }
}