CORS で OAuth を使用して SPA を接続する
Web API を使って Microsoft Dataverse データと連携し JavaScript を使用するシングルページ アプリケーション (SPA) を作成できます。 このようなアプリの作成を実現するために、Dataverse は クロス オリジン リソース共有 (CORS) を有効化し、SPA がクロス ドメインの境界を横切る要求を通常防ぐブラウザー制限が回避されます。
SPA と同一取得元ポリシー
SPA は、関連するクライアント側の JavaScript を全面的に使用して、新しいページを読み込む必要はない 1 つのページを作成します。 代わりに、ネットワーク要求 ("Ajax" と呼ばれることもある) を使用したプログラミング パターンを使用して、サーバーからデータやその他のリソースを取得します。 SPA は、データおよびリソースがアプリケーションと同じドメインに存在する場合に適しています。 ただし、他のドメインのデータおよびリソースへのアクセスを保護するには、モダンなブラウザーのすべてが 同一取得元ポリシー を強制的に使用して、異なるドメインのサイトのデータおよびリソースの使用からサイトを保護する必要があります。 CORS は別ドメインのリソースへアクセスするための方法を提供します。 CORS なしで Dataverse データにアクセスする SPA を作成することは、実行可能なオプションではありません。
CORS を Dataverse と共に使用する
CORS プロトコル は、CORS を実装して使用する方法の詳細な説明を提供します。 CORS が作動するために適応する必要がある、さまざまなヘッダーおよび事前に要求される事柄に関してすべてを説明します。 良いニュースは Dataverse では CORS のエキスパートになる必要がないことです。 サーバー側の設定は既に完了しており、必要なのは使用方法を知ることだけです。 Dataverse では CORS の内部構造についてをすべて理解する必要はありません。 代わりに JavaScript (MSAL.js) 向け Microsoft 認証ライブラリ を使うことで、CORS の大抵の複雑な部分が処理されます。 Dataverse のユーザーは Microsoft Entra の ID を使用して認証されるため、MSAL.js は SPA ユーザーの認証に対応した方法です。
SPA と共に MSAL.js を使用する準備
SPA を MSAL.js と共に使用するように構成する方法
- Microsoft Entra ID テナントにアプリケーションを登録します。
- その登録からの情報と共に SPA の構成変数を設定します。
次の項目を含む必要があります。- Dataverse 組織への URL
- 組織が認証に使用する Microsoft Entra ID テナントの ID です。
- アプリケーションの登録時に入手したクライアント ID
- SPA が展開されるか、または開発中にデバッグされる URL。
必要な一連の手順については、クイック スタート: クライアント側の JavaScript と Visual Studio Code を使用した Web API で説明されています。
参照
OAuth を使用して Dataverse Web サービスに接続する
クイック スタート: クライアント側の JavaScript と Visual Studio Code を使用した Web API
クイックスタート: Microsoft ID プラットフォームにアプリケーションを登録する