Iframeステップ 1/2
フロントエンドの設定
ページにウィジェットを埋め込み、銀行選択画面を表示して、iframe のメッセージを受信します。
ウィジェットは https://widget.wealthreader.com/js/load.js で読み込む iframe です。このページはフロントエンドのみを扱います。callback と銀行データはバックエンドで設定します。
このページを配信するドメインは、ウィジェットを開く前にクライアントエリアで許可する必要があります。許可されていなければ、ウィジェットはドメインが未承認であると応答します。
連携チェックリスト
0/3最小限のコード
操作ごとに新しい operation_id を生成します。entities_to_display を空にすると、api_key で利用できるすべての金融機関が表示されます。技術チームから別の指示がない限り、wait_full_response は true のままにしてください。
<script>
const wr_conf = {
operation_id: crypto.randomUUID(),
entities_to_display: [],
wait_full_response: true
};
window.addEventListener("message", (event) => {
if (event.origin !== "https://widget.wealthreader.com") {
return;
}
if (event.data === "flow completed") {
// El callback de backend ya se envió con éxito.
// Cierra el selector o redirige a la pantalla de éxito.
return;
}
if (typeof event.data !== "string") {
return;
}
try {
const message = JSON.parse(event.data);
if (message.error) {
console.log(message.error.code, message.error.message);
// OTP, login incorrecto, callback caído, etc.
}
} catch (err) {
// Ignora otros mensajes del iframe.
}
});
</script>
<iframe
id="wr-iframe"
title="Wealth Reader widget"
width="100%"
frameBorder="0"
referrerpolicy="origin"
></iframe>
<script src="https://widget.wealthreader.com/js/load.js"></script>load.js は id="wr-iframe" の iframe を探し、ウィンドウに応じて高さを設定します。縦方向の空間を確保してください。ページの途中に置くと表示が切れる場合があります。
postMessage メッセージ
iframe は次のようにページと通信します。
event.data |
タイミング | 対応 |
|---|---|---|
"flow completed" |
読み取りが成功し、かつ callback が 200 + {"status":"ok"} を返したとき |
ウィジェットを閉じるか成功画面へ進みます。このメッセージに銀行データは含まれません。 |
error を含む JSON |
処理が継続中（2FA、契約など）、または失敗したとき | error.code と error.message を確認します。callback はまだ送信されていません。 |
必ず event.origin === "https://widget.wealthreader.com" を確認してください。
wr_conf のパラメーター
| パラメーター | 必須 | 既定値 | 機能 |
|---|---|---|---|
operation_id |
はい | — | 自分で生成する識別子。callback で返され、フロントエンドとバックエンドを関連付けます。 |
entities_to_display |
いいえ | すべて | 金融機関コードの配列。空または未指定ならすべて。一覧: https://api.wealthreader.com/entities/ |
wait_full_response |
いいえ | true |
true: 商品と取引。false: 商品一覧のみ。 |
date_from |
いいえ | 昨日 | 取得する取引の開始日。形式は AAAA-MM-DD。wait_full_response が true の場合のみ適用。 |
product_types |
いいえ | api_key で利用できる商品 |
商品の絞り込み。配列またはカンマ区切りの一覧。 |
default_login |
いいえ | — | 金融機関コード。その金融機関のフォームを直接開きます。 |
default_login_entity_country |
いいえ | ES |
ISO 国コード（ES、FR など）。default_login がある場合のみ使用します。 |
token |
いいえ | — | 再認証用。無効になったトークンの銀行を事前選択します。 |
psd2 |
いいえ | true |
PSD2 金融機関を表示します。entities_to_display で絞り込んでいない場合のみ。 |
nonpsd2 |
いいえ | true |
PSD2 以外の経路の金融機関を表示します（より詳細な情報）。psd2 と同じ条件が適用されます。 |
language |
いいえ | ブラウザーの言語 | "es" または "en"。 |
tokenize |
いいえ | クライアントエリアの設定 | true を指定すると、再利用できる token が callback で返されます。 |
business_account |
いいえ | true |
法人向け金融機関を含めます。 |
personal_account |
いいえ | true |
個人向け金融機関を含めます。 |
wait_full_response
true のままにしてください。無効にすると待ち時間を数秒短縮できますが、取引データを受信できません。明確な UX 上の理由がない限り無効にしないでください。無効にする場合は、後から API と callback の token を使って取引を取得してください。
date_from
未指定の場合、ウィジェットは昨日の日付を使用します。「すべての履歴」ではありません。
欧州の銀行で 89 日を超える期間を取得する場合、追加の二要素認証を求められることがあります。ユーザーはウィジェット内で完了します。読み取りに数分かかる場合があります。
product_types
指定できる値:
accounts— 口座portfolios— 投資ポートフォリオcards— カードreceipts— 口座振替loans— ローンdeposits— 預金leases— リース / レンタルinsurances— 保険factoringconfirmingproperties— 不動産invoices— 請求書files— ファイル（Norma 43、19 など）
例: ["accounts", "cards", "loans"] または "accounts,cards,loans"。
次の手順
選択画面が正しく表示されたら、iframe バックエンドへ進んでください。