フィードバック

OAuth を使用するクロス オリジン リソース共有を使用して、単一のページ アプリケーションに接続する

  • [アーティクル]

Microsoft Dataverse データと連携し JavaScript を使用する単一ページのアプリ (SPA) を作成できます。 これを実現するために、クロス オリジン リソース共有 (CORS) が有効化され SPA がクロス ドメインの境界を横切る要求を通常防ぐブラウザー制限が回避されます。

注意

Web API を使用している場合にのみ CORS がサポートされます。 組織サービスまたは廃止された組織データ サービスは使用できません。

SPA と同一取得元ポリシー

SPA は、関連するクライアント側の JavaScript を全面的に使用して、新しいページを読み込む必要はない 1 つのページを作成します。 代わりに、XMLHTTPRequests を使用してサーバーからデータとその他のリソースを取得します。 SPA は、データおよびリソースがアプリケーションと同じドメインに存在する場合に適しています。 ただし、他のドメインのデータおよびリソースへのアクセスを保護するには、モダンなブラウザーのすべてが同一取得元ポリシーを強制的に使用して、異なるドメインのサイトのデータおよびリソースの使用からサイトを保護する必要があります。 CORS は別ドメインのリソースへアクセスするための方法を提供します。 CORS なしで Dataverse データにアクセスする SPA を作成することは実行可能なオプションではありません。

CORS を Dataverse と共に使用する

クロス オリジン リソース共有仕様 は、CORS の実装と使用方法についての詳細な説明を提供します。 CORS が作動するために適応する必要がある、さまざまなヘッダーおよび事前に要求される事柄に関してすべてを説明します。 良いニュースは Dataverse では CORS のエキスパートになる必要がないことです。 サーバー側の設定は既に完了しており、必要なのは使用方法を知ることだけです。 Dataverse では CORS の内部構造についてをすべて理解する必要はありません。 代わりに、 Azure Active Directory JavaScript 用認証ライブラリ (adal.js) を使うことができ、CORS の大抵の複雑な部分はこのスクリプトで処理されます。 Dataverse が Azure Active Directory を使用して認証されるので、ADAL.js は SPA ユーザーを認証するためにサポートされている方法です。

adal.js の仕組み

コア ライブラリは、adal.js です。 このライブラリの最小化バージョンには、「https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js」からアクセスできます。 Github プロジェクトとドキュメントは、「https://github.com/AzureAD/azure-activedirectory-library-for-js」にあります。

adal.js ライブラリには OAuth2 を使用して認証するための下位レベルの機能があります。 Adal.js は、他のフレームワークと共に使用できるように設計されています。たとえば adal-angular.js ライブラリは Angular フレームワークと共に使用するように設計されています。このライブラリを使用するには、ある構成プロパティを設定し、次にやり取りのフローがトリガーされるまで待機させることです。 これは、login 関数を単純に呼び出すか、またはアプリケーションがルーティングの動作をしている場合は、そのルートのコントローラーが構成されている方法によって認証を開始できます。

認証が必要な場合は、ユーザーが資格情報を入力するサインイン ページが表示されます。 正常に認証された後に、ユーザーは URL のフラグメントとして (# を使用して) トークン情報が添付された呼び出し元ページにリダイレクトされます。 こうすることにより、SPA がトークンを取得して、ブラウザーのローカルまたはセッション記憶域にキャッシュすることができます。 つまり、ページ全体が認証後に再ロードされるが、今回は認証されたユーザーに関する情報が使用可能で、アプリケーションが Dataverse Web API または他のリソースの呼び出しに進むことができることを意味します。

Dataverse Web API を呼び出す場合、XMLHTPPRequest を含めた承認ヘッダーにトークン値を含める必要があります。 しかし、トークンには有効期限があるので、ユーザーが SPA を使用している間に有効期限が切れないことを確認する必要があります。 新しい資格情報を入力する場合、SPA ページのコンテンツすべてがサインイン ページに転送されることに注意してください。 ユーザーが何かをしている間にこれが発生すると、ユーザー エクスペリエンスがとても低下する可能性があります。 これが発生しないようにするためには、Web API コールを acquireToken 機能内にラップし、必要であればユーザーがサインイン ページに戻されることなく、トークンの有効性が確認および更新されるようにします。

SPA と共に ADAL.js を使用する準備

SPA を adal.js と共に使用するように構成するには:

  1. Azure Active Directory テナントにアプリケーションを登録します。

  2. 登録されたアプリケーション マニフェストをエクスポートし、OAuth2 の暗黙的なフローを許可するように編集し、JSON ファイルをアプリケーション登録のためにインポートして戻します。

  3. その登録からの情報と共に SPA の構成変数を設定します。
    次を含む必要があります。

    • Dataverse 組織の URL
    • 組織が認証で使用する Active Directory テナントの名前
    • アプリケーションの登録時に入手したクライアント ID
    • SPA が展開されるか、または開発中にデバッグされる URL

必要な設定の手順は「チュートリアル: adal.js で SPA アプリケーションを登録および構成する」で説明されています。

関連項目

OAuth を使用した Dataverse Web サービスへの接続

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。