LINE QR Bridge テストページ

右下のボタンからウィジェットを開いてテストしてください。
ngrok で公開すると、スマートフォンからの動作確認（QR 非表示）も行えます。
起動コマンド: npx http-server . -p 3000 -c-1（line-qr-connect/ で実行）

サーバー起動 & ngrok 手順

line-qr-connect/ ディレクトリで静的サーバーを起動 npx http-server . -p 3000 -c-1
ブラウザで確認（ローカル） http://localhost:3000/
別ターミナルで ngrok を起動して外部公開 ngrok http 3000
ngrok が発行した URL にアクセス（PC・スマートフォン両方で確認） https://xxxx.ngrok-free.app/

LINE QR Bridge 設定確認

widget/scripts/widget-config.js の lineQr.ENABLED が true になっていること
lineQr.QR_API_BASE_URL に onetime-qr-bridge の公開エンドポイントが設定されていること
lineQr.LINE_OFFICIAL_ACCOUNT_ID に LINE 公式アカウント ID が設定されていること

デバッグツール

テストシナリオ

右下のボタンをクリック → ウィジェットが開くこと
初回表示時に同意オーバーレイが表示されること
同意後にチャット画面が表示されること
メッセージを送信してボットの返答が表示されること
入力エリアに「LINEで続ける」ボタンが表示されること（lineQr.ENABLED: true 時）
「LINEで続ける」クリック → ローディング吹き出し表示 → QR コード吹き出しに切り替わること（PC）
ngrok URL をスマートフォンで開く → 「LINEで続ける」クリック → QR 画像が非表示で「LINEで開く」ボタンのみ表示されること
「LINEで開く」をタップ → LINE アプリが起動してトークン入りメッセージが表示されること
「URLをコピー」クリック → ラベルが「コピーしました！」に変化すること
「同意フラグをリセット」→ ウィジェットを閉じて再度開く → 同意画面が表示されること

PC での確認

「LINEで続ける」を押すと QR コードと「LINEで開く」ボタンが表示されます。

スマートフォンでの確認

ngrok URL をスマホで開くと QR 画像は非表示になり「LINEで開く」ボタンのみ表示されます。

同意フロー確認

初回アクセス時は同意オーバーレイが表示されます。「同意フラグをリセット」で再確認できます。

🌐 URL: 🆔 conversationId: ✅ consent: