次の方法で共有

シングルページ アプリケーション

警告

このコンテンツは、以前の Azure AD v1.0 エンドポイント用です。 新しいプロジェクトには Microsoft ID プラットフォームを使用します。

シングルページ アプリケーション (SPA) は、通常、ブラウザーで実行される JavaScript プレゼンテーション レイヤー (フロントエンド) と、サーバー上で実行され、アプリケーションのビジネス ロジックを実装する Web API バックエンドとして構成されます。暗黙的な承認許可の詳細と、アプリケーション シナリオに適しているかどうかを判断するのに役立つ情報については、「 Azure Active Directory での OAuth2 暗黙的な許可フローについて」を参照してください。

このシナリオでは、ユーザーがサインインすると、JavaScript フロントエンドは Active Directory Authentication Library for JavaScript (ADAL.JS) と暗黙的な承認付与を使用して、Azure AD から ID トークン (id_token) を取得します。 トークンはキャッシュされ、クライアントは、OWIN ミドルウェアを使用してセキュリティで保護された Web API バックエンドへの呼び出しを行うときに、それをベアラー トークンとして要求にアタッチします。

ダイアグラム

シングルページ アプリケーションの図

プロトコル フロー

  1. ユーザーが Web アプリケーションに移動します。
  2. アプリケーションは、JavaScript フロントエンド (プレゼンテーション レイヤー) をブラウザーに返します。
  3. ユーザーは、サインイン リンクをクリックするなどしてサインインを開始します。 ブラウザーから AZURE AD 承認エンドポイントに GET が送信され、ID トークンが要求されます。 この要求には、クエリ パラメーターにアプリケーション ID と応答 URL が含まれています。
  4. Azure AD は、Azure portal で構成された登録済みの応答 URL に対して応答 URL を検証します。
  5. ユーザーはサインイン ページにサインインします。
  6. 認証が成功した場合、Azure AD は ID トークンを作成し、それを URL フラグメント (#) としてアプリケーションの応答 URL に返します。 運用アプリケーションの場合、この応答 URL は HTTPS である必要があります。 返されるトークンには、アプリケーションがトークンを検証するために必要なユーザーと Azure AD に関する要求が含まれます。
  7. ブラウザーで実行されている JavaScript クライアント コードは、アプリケーションの Web API バックエンドへの呼び出しをセキュリティで保護するために使用するトークンを応答から抽出します。
  8. ブラウザーは、承認ヘッダーに ID トークンを含むアプリケーションの Web API バックエンドを呼び出します。 Azure AD 認証サービスは、リソースがクライアント ID と同じ場合にベアラー トークンとして使用できる ID トークンを発行します (この場合、これは Web API がアプリ独自のバックエンドであるため当てはまります)。

コード サンプル

シングルページ アプリケーション シナリオのコード サンプルを参照してください。 新しいサンプルが頻繁に追加されるため、必ず頻繁に確認してください。

アプリの登録

  • シングル テナント - 組織専用のアプリケーションを構築する場合は、Azure portal を使用して会社のディレクトリに登録する必要があります。
  • マルチテナント - 組織外のユーザーが使用できるアプリケーションを構築する場合は、そのアプリケーションを会社のディレクトリに登録する必要がありますが、アプリケーションを使用する各組織のディレクトリにも登録する必要があります。 アプリケーションをディレクトリで使用できるようにするには、顧客がアプリケーションに同意できるようにするサインアップ プロセスを含めることができます。 アプリケーションにサインアップすると、アプリケーションに必要なアクセス許可と、同意するオプションを示すダイアログが表示されます。 必要なアクセス許可によっては、他の組織の管理者が同意を求められる場合があります。 ユーザーまたは管理者が同意すると、アプリケーションはディレクトリに登録されます。

アプリケーションを登録した後、OAuth 2.0 暗黙的な許可プロトコルを使用するように構成する必要があります。 既定では、このプロトコルはアプリケーションで無効になっています。 アプリケーションの OAuth2 暗黙的な許可プロトコルを有効にするには、Azure portal からアプリケーション マニフェストを編集し、"oauth2AllowImplicitFlow" 値を true に設定します。 詳細については、アプリケーション マニフェストに関するページを参照してください。

トークンの有効期限

ADAL.js を使用すると、次のことが役立ちます。

  • 期限切れのトークンを更新する
  • Web API リソースを呼び出すアクセス トークンの要求

認証が成功すると、Azure AD はユーザーのブラウザーに Cookie を書き込み、セッションを確立します。 ユーザーと Azure AD の間にセッションが存在します (ユーザーと Web アプリケーションの間には存在しません)。 トークンの有効期限が切れると、ADAL.js はこのセッションを使用して別のトークンをサイレントモードで取得します。 ADAL.js は、非表示の iFrame を使用して、OAuth 暗黙的な許可プロトコルを使用して要求を送受信します。 ADAL.js は、この同じメカニズムを使用して、クロスオリジン リソース共有 (CORS) をサポートするリソースがユーザーのディレクトリに登録され、サインイン時に必要な同意がユーザーによって与えられている限り、アプリケーションが呼び出す他の Web API リソースのアクセス トークンをサイレントに取得することもできます。

次のステップ

  • Last updated on