メインコンテンツへスキップ
iframe で DocFlow を埋め込むと、自社システム内で文書一覧、ファイル詳細、レビュータスクなどのページを直接表示できます。ユーザーが別途 DocFlow を開く必要はありません。連携前に API で有効な token を取得し、iframe の URL に付与してください。
このページでは、クイック連携（API から返される詳細ページ URL をそのまま使用）と、汎用連携（URL を組み立てて token を付与）の 2 つの連携方法を説明します。あわせて、親ページと iframe の postMessage 通信、および複数 iframe 利用時の Token 分離機構について説明します。

​
連携フロー概要

  • クイック連携: 「ファイル詳細ページ」または「レビュー詳細ページ」だけを表示したい場合に適しています。API で task_detail_url を取得し、そのまま iframe に埋め込みます。
  • 汎用連携: ホーム、ワークスペース設定、文書一覧など任意の DocFlow ページを埋め込みたい場合に適しています。先に API でユーザー token を生成し、アクセス URL に token パラメータを付与します。

​
クイック連携方式

ファイル詳細ページとレビュー詳細ページでは、API から埋め込み可能な URL を直接取得できます。
  1. 対応する API を呼び出し、task_detail_url フィールドを取得します。
  2. 返却された task_detail_url を iframe の src に設定して埋め込みます。
別途 token を渡す必要はありません。この URL には認証情報が含まれています。

​
汎用連携方式

​
ステップ 1: ユーザー Token を生成

短期有効トークンを生成 API を呼び出し、現在のユーザーの有効な token を取得します。
API の詳細は REST API ドキュメントを参照してください。

​
ステップ 2: Token を付与して DocFlow ページにアクセス

iframe の src で DocFlow フロントエンドページにアクセスする際、URL に token=xxx パラメータを追加します。
以下ではパブリッククラウドのドメイン https://docflow.textin.ai を例にしています。プライベートデプロイの場合は、実際のドメインに置き換えてください。 注意: すべての DocFlow フロントエンド URL は、認証用にクエリパラメータ token を追加できます。

​
ホームにアクセス

<iframe src="https://docflow.textin.ai?token=xxx" referrerpolicy="origin" />

​
指定ワークスペースにアクセス

<iframe src="https://docflow.textin.ai/workspace/configure?workspaceIdNo=xxx&token=xxx" referrerpolicy="origin" />

​
ファイル詳細ページにアクセス

  • 直接アクセス:
<iframe src="https://docflow.textin.ai/documents/detail-new?workspaceIdNo=xxx&id=xxx&resultId=xxx&token=xxx" referrerpolicy="origin" />
  • 最小表示モード（一部の遷移リンクを非表示）:
<iframe src="https://docflow.textin.ai/documents/detail-new?workspaceIdNo=xxx&id=xxx&resultId=xxx&token=xxx&mode=minimal" referrerpolicy="origin" />

​
レビュータスク詳細ページにアクセス

  • 直接アクセス:
<iframe src="https://docflow.textin.ai/review/task/task-detail?workspaceIdNo=xxx&id=xxx&token=xxx" referrerpolicy="origin" />
  • 最小表示モード（一部の遷移リンクを非表示）:
<iframe src="https://docflow.textin.ai/review/task/task-detail?workspaceIdNo=xxx&id=xxx&token=xxx&mode=minimal" referrerpolicy="origin" />

​
親ページの連携例

親ページに iframe を埋め込み、DocFlow から送信される postMessage イベント（token 期限切れ、ログイン、ログアウト、権限不足など）を監視します。これにより、token の更新やユーザーへの通知を行いやすくなります。 
<iframe
  id="docflow-iframe"
  src="https://your-domain.com/documents/list?token=YOUR_TOKEN"
  allow="clipboard-read; clipboard-write"
  referrerpolicy="origin"
></iframe>

<script>
const iframeOrigin = 'https://your-domain.com';

window.addEventListener('message', (event) => {
  if (event.origin !== iframeOrigin) return;

  const { type, data } = event.data || {};

  switch (type) {
    case 'tokenExpired':
      console.warn('Token の有効期限が切れました。再取得して iframe を更新してください');
      break;
    case 'login':
      console.log('ユーザーがログインしました');
      break;
    case 'logout':
      console.warn('ユーザーがログアウトしました');
      break;
    case 'noPermission':
      console.warn('権限が不足しています');
      break;
    case 'error':
      console.error('エラーが発生しました', data);
      break;
  }
});
</script>

​
補足

​
postMessage 通信プロトコル

iframe 内の DocFlow ページは、以下の種類のメッセージを親ウィンドウへ送信します。親ページでは window.addEventListener('message', ...) で受信して処理できます。
メッセージタイプ説明トリガー
tokenExpiredToken が無効API が 401 を返した場合
loginユーザーのログイン成功Token 認証に成功した場合
logoutユーザーのログアウトユーザーが自発的にログアウトした場合
noPermission権限不足API が権限エラーを返した場合
errorエラー発生汎用エラー通知
メッセージ形式: 
interface IframeMessage {
  type: 'tokenExpired' | 'login' | 'logout' | 'noPermission' | 'error';
  data?: unknown;
}

​
Token 分離機構

同一ブラウザ内で、複数の異なる親ページが DocFlow iframe を埋め込んでいる場合、システムは「送信元」ごとにユーザー状態を分離し、Token の競合を防ぎます。この機構は Referrer 情報（document.referrer または親ページの origin）に依存します。連携側は以下のいずれかを満たす必要があります。
1）Referrer ポリシーで origin の送信を許可する。
2）同一オリジンポリシーを使用する（親子が同一オリジン）。
推奨設定: 方式 1: iframe 属性（推奨） 
<iframe
  src="https://docflow.textin.ai/documents/list?token=YOUR_TOKEN"
  referrerpolicy="origin"
></iframe>
方式 2: HTML meta タグ 親ページの <head> に以下を追加します。 
<meta name="referrer" content="origin">
方式 3: HTTP レスポンスヘッダー 親ページが配置されているドメインの HTTP レスポンスに以下を設定します。 
Referrer-Policy: origin