- ローンワークベンチがセキュアなアップロードAPIを通じて、各借入人ドキュメントをBoxにアップロードします。
- Boxが、アップロードされたドキュメントを忠実度の高いHTML5レンダリングに変換します。
- お客様のアプリが有効期間の短い埋め込みURLをリクエストして、
<iframe>に挿入します。
作業用サンプルの複製
構築する内容
このチュートリアルの最後には、次の機能を備えた実用的な統合ソリューションが完成します。- アップロードAPIを使用して借入人ドキュメントをBoxにアップロードし、プレビューのための自動変換をトリガーします。
- アップロードしたファイルのために、有効期間の短い、有効期限付き埋め込みURLを生成します。
- ワークベンチで
<iframe>内のドキュメントをレンダリングします。 - ファイルの範囲にダウンスコープされたトークンを発行し、ブラウザで保持される資格情報が常に最小権限になるようにします。
- 素のiframeをBox Content Previewにアップグレードして、審査担当者がコンテキスト内で注釈を付けたり、より充実したレビューUIを使用したりできるようにします。
前提条件
始める前に、以下が揃っていることを確認してください。- 開発者コンソールへのアクセス権限とPlatformアプリを承認する管理者権限があるBoxアカウント (は使用可。コンシューマ/個人アカウントは使用不可)。オプションのBox AI Q&Aレイヤーを利用する場合は、有料のが必須です。
- クライアント資格情報許可 (CCG) 認証とアプリケーションアクセスが [アプリアクセスのみ] に設定されている、。これにより、アプリのサービスアカウントが、アップロードされたすべてのドキュメントの所有者になります。
- Python 3.11以上。
- アプリで以下のスコープが有効になっていること。
- Boxに格納されているすべてのファイルとフォルダの読み取りと書き込み
- ワークベンチのフロントエンド (
http://127.0.0.1:5000など) に使用する正確なオリジンを、のCORS許可リストに追加します。これは、に必要な操作です。オリジンが許可リストに追加されるまでContent Previewは失敗し、403が返されます。 - Box Enterprise ID (開発者コンソールにあるアカウントアイコンの [Enterprise IDをコピー] で取得できます)。
enterprise_id) としてのCCG認証を使用します。サービスアカウントはアップロードするファイルを所有するため、それらのファイルをプレビューするのにコラボレーションへの招待が必要ありません。これは、既存の企業コンテンツを扱う統合と比べた場合、大きな簡素化ポイントです。仕組み
Box Viewのフローは次の3つの段階で構成されます。- アップロード。バックエンドがセキュアなアップロードAPIを通じて借入人ドキュメントをBoxにアップロードします。コンテンツはウイルススキャンと256ビット暗号化が適用されて保存されます。
- 変換。アップロード時に、ファイルは明瞭かつレスポンシブにレンダリングされるHTML5互換のアセットへと自動的に変換されます。変換はファイルごとに1回実行され、アセットはファイルが保存されている限り保持されます。
- 埋め込み。バックエンドがファイルの
expiring_embed_linkをリクエストしてフロントエンドに返します。フロントエンドはそれを<iframe>に配置します。
手順
開発環境のセットアップ
- ターミナルを開き、新しいプロジェクトディレクトリを作成します。
- Pythonの仮想環境を作成してアクティブ化します。
(.venv)と表示されます。これにより、仮想環境内で作業していることがわかります。source .venv/bin/activateを実行して、仮想環境を再アクティブ化する必要があります。コマンドの実行中にModuleNotFoundErrorが表示される場合、通常、venvがアクティブ化されていないことを意味します。- 必要なパッケージをインストールします。
- 資格情報を保存するための
.envファイルを作成し、以下の内容を追加します。プレースホルダの値を、Box開発者コンソールで確認した実際の資格情報で置き換えます。
LOAN_DOCS_FOLDER_IDはデフォルトでは、サービスアカウントのルートフォルダ0になっています。これは作業を開始するのに適しています。実際の環境では、専用のフォルダ (ローン申請ごとに1フォルダなど) を作成してそのIDを使用することで、ドキュメントが整理された状態に保たれます。.envファイルには機密情報 (実際の資格情報) が保存されています。Pythonコードは、os.getenv("VARIABLE_NAME")を使用してこれらの名前を参照することで、その値を読み取ります。たとえばos.getenv("BOX_CLIENT_ID")を実行すると、.envファイル内のBOX_CLIENT_ID=の隣に保存されている値を検索します。以下の手順でコードをコピーする際は、引用符で囲まれた変数名をそのまま正確に保持してください。実際の資格情報に置き換えないでください。Boxクライアントの認証
box_client.pyという名前の新しいファイルを作成します。そのファイルを開き、以下のコードを貼り付けます。借入人ドキュメントのアップロード
upload.pyという新しいファイルを作成します。次の関数は、ドキュメントをローンドキュメント用フォルダにアップロードし、新しいファイルIDを返します。ドキュメントをアップロードすると自動的に変換がトリガーされるため、少しするとファイルのプレビュー準備が整います。プレビュー用埋め込みURLの生成
preview.pyという新しいファイルを作成します。get_embed_url関数は、Boxにファイルのexpiring_embed_linkを要求し、フロントエンドによって<iframe>に配置されるURLを返します。ブラウザ用にダウンスコープされたトークンの発行
preview.pyに追加します。このトークンは、1つのファイルに対してスコープで許可されている操作のみを実行でき、ブラウザに安心して送信できるように有効期間が短く設定されています。バックエンドのエンドポイントの公開
app.pyという新しいファイルを作成します。このFlaskアプリケーションは、ローンワークベンチによって呼び出されるバックエンドです。ドキュメントをアップロードするエンドポイント、オンデマンドで新しい埋め込みURLを取得するエンドポイント、ダウンスコープされたトークンを発行するエンドポイントをそれぞれ1つ公開します。/embedエンドポイントは、リクエストが行われるたびにリンクを新しく作成します。リンクは約1分で有効期限が切れるため、フロントエンドは、このエンドポイントを事前に呼び出すのではなく、審査担当者がドキュメントを開いた瞬間に呼び出す必要があります。iframeでのドキュメントのレンダリング
<iframe>のsrcとして設定します。これは安全なアプリ内レビューインターフェースであり、審査担当者はワークベンチを離れずに済みます。review.htmlというファイルをプロジェクトのルートに作成します (app.pyの隣に配置することで、/review/<file_id>ルートから提供できます)。ファイルIDはページが自らのURLパスから読み取るため、ハードコーディングは不要です。アップロードおよび埋め込みフローのテスト
loan-reviewディレクトリを開いていること、また、仮想環境がアクティブ化されていることを確認します。Running on http://127.0.0.1:5000と表示されます。このターミナルは起動したままにしておきます。2. ドキュメントをアップロードします。2つ目のターミナルで、サンプルの納税申告書または明細書 (任意のPDFでかまいません) をアップロードします。Loan application 4815ヘッダーのみが表示される場合は、review.htmlをダブルクリック (file://プロトコル) で開いていると考えられます。代わりに、上記のURL経由で開いてください。別の健全性チェックとして、手順3の埋め込みURLを1分以内にブラウザに直接貼り付けるという方法もあります。これを行うと、ドキュメントがレンダリングされ、変換が成功したことが証明されます。トラブルシューティング
ModuleNotFoundError: 「...」という名前のモジュールが見つからない
ModuleNotFoundError: 「...」という名前のモジュールが見つからない
pythonコマンドを実行する前に、プロジェクトディレクトリからsource .venv/bin/activateを実行してください。新しく開いたターミナルタブは、すべて個別にアクティブ化する必要があります。invalid_client: クライアント資格情報が無効である
invalid_client: クライアント資格情報が無効である
.envファイルを確認します。BOX_CLIENT_IDおよびBOX_CLIENT_SECRETが、開発者コンソール > 自分のアプリ > [構成] の値と一致していることを確認します。BOX_ENTERPRISE_IDが自分のEnterprise IDであることを確認します (開発者コンソール > アカウントアイコン > [Enterprise IDをコピー])。- アプリの種類がクライアント資格情報許可であり、アプリが承認済みであることを確認します。
埋め込みリンクが返されない/expiring_embed_linkがnull
埋め込みリンクが返されない/expiring_embed_linkがnull
/review/<file_id>を開いたときに404 Not Foundが返される
/review/<file_id>を開いたときに404 Not Foundが返される
/review/<file_id>ルートが登録されていません。これはほとんどの場合、ルートは追加したのにサーバーを再起動しなかったことが理由です。Flaskは起動時に1回コードを読み込みます。Ctrl+Cでサーバーを停止して、python app.pyを再度実行してください。さらに、send_fileがインポートされていること (from flask import Flask, request, jsonify, send_file)、また、app.pyにルートが存在することを確認してください。debug=Trueを設定して実行すると、以降の編集に対して自動再読み込みが有効になります。ページにヘッダーのみが表示され、ドキュメントが表示されない
ページにヘッダーのみが表示され、ドキュメントが表示されない
review.htmlをバックエンド経由ではなく直接 (file://プロトコルを介して) 開いています。ページの相対的なfetch("/api/documents/.../embed")コールは、ページがAPIと同じオリジンから提供されている場合にのみ機能します。ファイルをダブルクリックするのではなく、バックエンドを起動してhttp://127.0.0.1:5000/review/<file_id>を開きます。ブラウザの開発者コンソールを開いて確認してください。失敗したfetchリクエストが表示されるはずです。レビューページは機能しているのに注釈ページで403 (Forbidden) が返される
レビューページは機能しているのに注釈ページで403 (Forbidden) が返される
api.box.comを呼び出します。開発者コンソールでは、繰り返されるGET https://api.box.com/2.0/files/<id>?fields=...リクエストがpreview.jsを返し、403からスローされる様子を確認できます。次の手順で修正してください。- ページを開くときに使用する正確なオリジンを、
http://127.0.0.1:5000などのスキームやポートも含めてCORS許可リスト (開発者コンソール > アプリ名 > [構成] > [CORSドメイン]) に追加します。なお、127.0.0.1とlocalhostは異なるオリジンであり、どちらか使用する方を追加します。保存して1~2分待ち、再起動と再読み込みを行います。 - それでも
403する場合、ダウンスコープされたトークンの権限が不足しています。[すべてのファイルとフォルダの読み取りと書き込み] スコープを有効にしてあり、その後に管理コンソールでアプリを再承認したことを確認します。 /annotate/<file_id>URL内のファイルIDが、トークンの発行対象となったファイルと一致していることを確認します。トークンは単一のファイルにダウンスコープされているため、IDの不一致でも403が返されます。
Box Content Previewを使用したコンテキスト内注釈の追加
iframeの埋め込みは、迅速な読み取り専用レビューに最適です。納税申告書上の疑わしい数字のハイライトや、署名漏れを指摘するコメントの追加など、審査担当者がコンテキスト内でドキュメントをマークアップできるようにするには、素のiframeの代わりに、 UI Elementを使用して同じファイルをレンダリングします。コンテンツプレビューはBoxウェブアプリ内でのレビューを担い、クライアント側のみで動作するため、注釈はワークベンチ内に留まります。 ブラウザでコンテンツプレビューを使用するにはトークンが必要です。ダウンスコープされたファイルスコープのトークン (注釈用のスコープを備えたもの) を返す/tokenエンドポイントをすでに作成したため、フロントエンドにフル権限の資格情報が表示されることはありません。
annotate.htmlというファイルをプロジェクトのルートに作成し、iframeページと同様にAPIと同じオリジンからそのファイルを提供するルートをapp.pyに追加します。
http://127.0.0.1:5000/annotate/<file_id>) を通じて開きます。
showAnnotationsがtrueに設定されていて、トークンが注釈用のスコープを備えている場合は、審査担当者にプレビューヘッダーの注釈コントロールが表示されます。注釈はBoxのファイルに対して保存されるため、2人目の審査担当者が同じドキュメントを開くと、1人目の審査担当者のメモが表示されます (annotation_view_allが付与されているため)。
item_downloadスコープも必要です。詳細なマトリックスや、リアルタイムのV4注釈を有効にする方法については、を参照してください。レビューUIを充実させるレイヤーの追加
Box Content Previewを実行すると、同一のファイルでレビュー機能を段階的に充実させることができます。その際、ドキュメントを再アップロードしたり、2つ目のコピーを作成したりする必要はありません。メタデータとアクティビティのサイドバーを追加
メタデータとアクティビティのサイドバーを追加
プレビューアーでBox AIを使用して質問に回答
プレビューアーでBox AIを使用して質問に回答
hasHeader: trueとcontentAnswersPropsをpreview.show()に渡します。詳しくは、を参照してください。申請一式をコレクションとしてレビュー
申請一式をコレクションとしてレビュー
collectionをpreview.show()に渡すと、審査担当者は、単一のプレビューアー内でナビゲーション用の矢印を使用して納税申告書、W-2、銀行取引明細書を閲覧できます。スコープで機能を調整
スコープで機能を調整
base_preview + annotation_view_self + annotation_edit (自分のメモのみ閲覧可能) を付与し、上級の融資審査担当者にはannotation_view_allを付与します。決定が確定した後は、編集スコープを削除して、効果的にドキュメントを読み取り専用にします。詳しくは、を参照してください。本番環境へのスケーリング
申請ごとにドキュメントを整理
申請ごとにドキュメントを整理
トークンと埋め込みリンクをオンデマンドで更新
トークンと埋め込みリンクをオンデマンドで更新
サーバー側で資格情報を保持
サーバー側で資格情報を保持
Enterprise Eventでレビューを監査
Enterprise Eventでレビューを監査
