シナリオ: Web API を呼び出す Web アプリ (サーバー アプリ)

  • [アーティクル]

適用対象: Windows Server 2022、Windows Server 2019、AD FS 2019 以降

AD FS 2019 によって認証されたユーザーをサインインさせ、MSAL ライブラリを使用して Web API を呼び出すためのトークンを取得する、Web アプリを構築する方法について説明します。

この記事を読む前に、AD FS の概念と認証コード付与フローについて理解しておく必要があります

概要

Overview of web app calling web api

このフローでは、Web アプリ (サーバー アプリ) に認証を追加します。これにより、ユーザーのサインインが可能になり、Web API が呼び出されます。 Web アプリから Web API を呼び出すには、MSAL の AcquireTokenByAuthorizationCode トークン取得メソッドを使用します。 認証コード フローを使用して、取得したトークンをトークン キャッシュに格納します。 その後、コントローラーは必要に応じてキャッシュからトークンをサイレントに取得します。 必要に応じて、MSAL によってトークンが更新されます。

Web API を呼び出す Web アプリ:

  • 機密クライアント アプリケーションです。
  • シークレット (アプリケーション共有シークレット、証明書、または AD アカウント) を AD FS に登録されます。 このシークレットは、トークンを取得するための AD FS の呼び出しにおいて渡されます。

AD FS に Web アプリを登録し、Web API を呼び出すためのトークンを取得するように構成するには、こちら で入手できるサンプルを使用して、アプリの登録とコードの構成手順を確認します。

前提条件

  • GitHub クライアント ツール
  • AD FS 2019 以降が構成および実行されている
  • Visual Studio 2013 以降

AD FS でのアプリの登録

このセクションでは、AD FS で Web アプリを機密クライアントとして登録し、Web API を 証明書利用者 (RP) として登録する方法について説明します。

  1. [AD FS の管理] で、 [アプリケーション グループ] を右クリックし、 [アプリケーション グループの追加] を選択します。

  2. アプリケーション グループ ウィザードで、[名前] に「WebAppToWebApi」と入力し、[クライアント サーバー アプリケーション] で [Web API にアクセスするサーバー アプリケーション] テンプレートを選びます。 [次へ]をクリックします。

    Screenshot of the Welcome page of the Add Application Group Wizard showing the Server application accessing a web A P I template highlighted.

  3. [クライアント識別子] の値をコピーします。 この値は、後でアプリケーションのWeb.config ファイルにあるida:ClientId の値として使用されます。 [リダイレクト URI] に次を入力します: https://localhost:44326. [追加] をクリックします。 次へ をクリックします。

    Screenshot of the Server application page of the Add Application Group Wizard showing the correct client identifier and redirect U R I.

  4. [アプリケーションの資格情報の構成] 画面で、[共有シークレットを生成する] をオンにして、シークレットをコピーします。 このシークレットは、後でアプリケーションのWeb.config ファイルにあるida:ClientSecret の値として使用されます。 次へ をクリックします。

    Screenshot of the Configure Application Credentials application page of the Add Application Group Wizard showing the Generate a shared secret option selected and the generated shared secret populated.

  5. [Web API の構成] 画面で、[識別子] に次のように入力します: https://webapi. [追加] をクリックします。 次へ をクリックします。 この値は、後でアプリケーションの Web.config ファイルにある ida:GraphResourceId に使用されます。

    Screenshot of the Configure Web API page of the Add Application Group Wizard showing the correct identifier.

  6. [アクセス制御ポリシーの適用] 画面で、[すべてのユーザーを許可] を選んで、[次へ] をクリックします。

    Screenshot of the Choose Access Control Policy page of the Add Application Group Wizard showing the Permit everyone option highlighted.

  7. [アプリケーションのアクセス許可の構成] 画面で、openid と user_impersonation が選択されていることを確認し、[次へ] をクリックします。

    Screenshot of the Configure Application Permissions page of the Add Application Group Wizard showing the open I D and user impersonation options selected.

  8. [概要] 画面で、[次へ] をクリックします。

  9. [完了] 画面で、[閉じる] をクリックします。

コードの構成

このセクションでは、ユーザーをサインインさせ、Web API を呼び出すトークンを取得する、ASP.NET Web アプリを構成する方法について説明します

  1. こちらからサンプルをダウンロードします

  2. Visual Studio を使用してサンプルを開きます

  3. web.config ファイルを開きます。 次のように変更します。

    • ida:ClientId - [AD FS でのアプリの登録] セクションの #3 から クライアント識別子 の値を入力します。

    • ida:ClientSecret - [AD FS でのアプリの登録] セクションの #4 から シークレット の値を入力します。

    • ida:RedirectUri - [AD FS でのアプリの登録] セクションの #3 から リダイレクト URI の値を入力します。

    • ida:Authority -https://[お使いの AD FS ホスト名]/adfs と入力します。 例: https://adfs.contoso.com/adfs

    • ida:Resource - [AD FS でのアプリの登録] セクションの #5 から 識別子 の値を入力します。

      Screenshot of the web config file showing the modified values.

サンプルをテストする

このセクションでは、構成されたサンプルをテストする方法を説明します。

  1. コードの変更が行われたら、ソリューションをリビルドします。

  2. Visual Studio の上部で Internet Explorer が選ばれていることを確認して、緑色の矢印をクリックします。

    Screenshot of the Visual Studio UI with the IIS Express (Internet Explorer) option called out.

  3. [ホーム ページ] で、[サインイン] をクリックします。

    Screenshot of the Home Page with the Sign in option called out.

  4. AD FS サインイン ページにリダイレクトされます。 指示に従ってサインインしてください。

    Screenshot of the Sign in page.

  5. サインインしたら、[アクセス トークン] をクリックします。

    Screenshot of the Home Page with the Access Token option called out.

  6. [アクセス トークン] をクリックすると、Web API を呼び出してアクセス トークン情報が取得されます。

    Screenshot of the Access Token page showing the access token info.

次のステップ

AD FS OpenID 接続/OAuth フローとアプリケーション シナリオ