Lab 06: OpenID Connect、MSAL、および .NET SDK を使用した認証

Microsoft Azure ユーザー インターフェイス

Microsoft クラウド ツールの動的な性質を考慮すると、このトレーニング コンテンツの開発の後に発生する Azure UI の変更に気付くかもしれません。 その結果、ラボの指示とラボの手順が正しく整合しなくなる可能性があります。

Microsoft は、コミュニティから必要な変更の通知があったときに、このトレーニング コースを更新します。 ただし、クラウドの更新は頻繁に発生するため、このトレーニング コンテンツの更新の前に UI の変更に気付く可能性があります。 これが発生した場合は、その変更に適応し、ラボでは必要に応じてそれらに対応してください。

Instructions

開始する前に

ラボ環境にサインインする

次の資格情報を使用して Windows 11 仮想マシン (VM) にサインインします。

  • ユーザー名: Admin
  • パスワード: Pa55w.rd

注: 仮想ラボ環境に接続するための手順は、インストラクターから提供されます。

インストールされているアプリケーションを確認する

Windows 11 デスクトップでタスク バーを探します。 タスク バーには、このラボで使用する次のようなアプリケーションのアイコンが含まれています。

  • Microsoft Edge
  • Visual Studio Code

課題シナリオ

このラボでは、Microsoft Entra ID にアプリケーションを登録し、ユーザーを追加してから、アプリケーションへのユーザーのアクセスをテストして、Entra ID でアプリケーションのセキュリティが保護されていることを検証します。

アーキテクチャの図

OpenID Connect、MSAL、および .NET SDK を使用して認証を行うユーザーを示すアーキテクチャ ダイアグラム。

演習 1: シングル テナントの Entra ID 環境を構成する

タスク 1: Azure portal を開く

  1. タスク バーで、Microsoft Edge アイコンを選択します。

  2. [ブラウザーを開く] ウィンドウで、Azure portal (https://portal.azure.com) に移動してから、このラボで使用するアカウントでサインインします。

    注:初めて Azure portal にサインインする場合は、このポータルのツアーが表示されます。 [はじめに] を選択してツアーをスキップし、ポータルの使用を開始します。

タスク 2: Entra ID ディレクトリにアプリケーションを登録する

  1. Azure portal で、[リソース、サービス、ドキュメントの検索] テキスト ボックスを使用して Entra ID を検索し、結果のリストで [Microsoft Entra ID] を選択します。

    注: これにより、ブラウザー セッションが、Azure サブスクリプションに関連付けられている Microsoft Entra ID テナントのブレードにリダイレクトされます。

  2.  Microsoft Entra ID   ブレードで、[管理] セクションの [アプリの登録] を選択します。

  3. [アプリの登録] セクションで、 [+ 新規登録] を選択します。

  4. [アプリケーションの登録] セクションで、次の操作を実行し、 [登録] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「webappoidc」と入力します
    サポートされているアカウントの種類の一覧 [この組織ディレクトリのみに含まれるアカウント (既定のディレクトリのみ - シングル テナント)] を選択します

    注: テナントの名前は、Azure サブスクリプションによって異なる場合があります。

    次のスクリーンショットは、 [アプリケーションの登録] セクションで構成されている設定を示しています。

    アプリケーションを登録するために構成されたオプションを示すスクリーンショット。

タスク 3: 一意識別子を記録する

  1. webappoidc アプリケーション登録ブレードで、 [概要] を選択します。

  2. [概要] セクションで、 [アプリケーション (クライアント) ID] テキスト ボックスの値を検索して記録します。 この値は、ラボで後から使用します。

  3. [概要] セクションで、 [ディレクトリ (テナント) ID] テキスト ボックスの値を検索して記録します。 この値は、ラボで後から使用します。

タスク 4: アプリケーションの認証設定を構成する

  1. webappoidc アプリケーションの登録ブレードで、 [管理] セクションの [認証] を選択します。

  2. [認証] セクションで、次の操作を実行し、 [構成] を選択します。

    設定 アクション
    [プラットフォーム構成] セクション [+ プラットフォームの追加] を選択します
    [プラットフォーム構成] ブレード [Web] を選択します
    [リダイレクト URI] テキストボックス 「https://localhost:5001/」と入力します
    [フロントチャネルのログアウト URL] テキスト ボックス 「https://localhost:5001/signout-oidc」と入力します

  3. [プラットフォーム構成] セクションに戻り、[URI の追加] を選択し、「https://localhost:5001/signin-oidc」と入力します。

  4. [暗黙的な許可およびハイブリッド フロー] セクションで [ID トークン (暗黙的およびハイブリッド フローに使用)] を選択します。

  5. [保存] を選択します。

    次のスクリーンショットには、 [認証] ブレードに構成されている設定が示されています。

    [認証] ブレードで構成されているオプションを示すスクリーンショット。

タスク 5:Microsoft Entra ID ユーザーを作成する

  1. Azure portal で [Cloud Shell] アイコン Cloud Shell アイコン を選択して Cloud Shell を開きます。 Cloud Shell が既定で Bash セッションに設定されている場合は、[Cloud Shell] メニューの [PowerShell に切り替える] を選択し、[確認] を選択します。

    注: Cloud Shell は、大なり記号 (>) とアンダースコア文字 (_) で表されます。

    Cloud Shell を初めて起動した場合は、リソースを作成するための一連のプロンプトが表示されます。 次の表に示すアクションを実行します。

    プロンプト アクション
    ページで、 [PowerShell] を選択します。
    はじめに [ストレージ アカウントのマウント] を選択し、ドロップダウンから自分の [ストレージ アカウント サブスクリプション] を選択し、最後に [適用] を選択します。
    ストレージ アカウントのマウント [ストレージ アカウントを自動的に作成する] を選択し、[次へ] を選択します。

  2. [Cloud Shell] ペインで、次のコマンドを実行して、Azure サブスクリプションに関連付けられている Microsoft Entra テナントにサインインします。

     Connect-AzureAD

  3. 次のコマンドを実行して、Microsoft Entra テナントのプライマリ ドメイン ネーム システム (DNS) のドメイン名を取得して表示します。

     $aadDomainName = ((Get-AzureAdTenantDetail).VerifiedDomains)[0].Name
 $aadDomainName

    注: DNS ドメイン名の値をメモしておいてください。 この値は、ラボで後から使用します。

  4. 次のコマンドを実行して、Microsoft Entra ID 認証のテストに使用する Microsoft Entra ID ユーザーを作成します。

     $passwordProfile = New-Object -TypeName Microsoft.Open.AzureAD.Model.PasswordProfile
 $passwordProfile.Password = 'Pa55w.rd1234'
 $passwordProfile.ForceChangePasswordNextLogin = $false
 New-AzureADUser -AccountEnabled $true -DisplayName 'aad_lab_user1' -PasswordProfile $passwordProfile -MailNickName 'aad_lab_user1' -UserPrincipalName "aad_lab_user1@$aadDomainName"

  5. 次のコマンドを実行して、新しく作成された Microsoft Entra ID ユーザーのユーザー プリンシパル名 (UPN) を識別します。

     (Get-AzureADUser -Filter "MailNickName eq 'aad_lab_user1'").UserPrincipalName

    注: UPN をメモしておいてください。 この値は、ラボで後から使用します。

  6. [Cloud Shell] ペインを閉じます。

確認

この演習では、シングルテナント Azure AD アプリケーションを登録し、Azure AD ユーザー アカウントを作成しました。

演習 2: シングルテナント ASP.NET の Web アプリを作成する

タスク 1: ASP.NET の Web アプリ プロジェクトを作成する

  1. ラボのコンピューターで、コマンド プロンプトを起動します。

  2. コマンド プロンプトから次のコマンドを実行して、Allfiles (F):\Allfiles\Labs\06\Starter\OIDCClient を作成し、それを現在のディレクトリに設定します。

     F:
 cd F:\Allfiles\Labs\06\Starter\OIDCClient

  3. 次のコマンドを実行して、モデル ビュー コントローラー (MVC) のテンプレートに基づいて新しい .NET Core の Web アプリを作成します (プレースホルダー <application_ID>、<tenant_ID>、<domain_Name> を、このラボで前に記録した対応する値に置き換えます)。

     dotnet new mvc --auth SingleOrg --client-id <application_ID> --tenant-id <tenant_ID> --domain <domain_Name>
 rmdir .\obj /S /Q

    注: ターミナルでエラーが発生した場合は、PowerShell を使用している可能性があります。 その場合は、/S /Q フラグを削除し、コマンドを再実行します。

  4. 次のコマンドを実行して Visual Studio Code を起動します。

     code .

    [このフォルダー内のファイルの作成者を信頼しますか?] というダイアログが表示されたら、 [はい、作成者を信頼します] を選択します。

  5. Visual Studio Code の [エクスプローラー] ペインで、MVC Web アプリを表す自動生成されたフォルダー構造を確認します。

  6. [プロパティ] フォルダーに移動し、launchsettings. json ファイルを開き、次の変更を適用します。

    セクション プロパティ 値
    iisSettings sslPort 44321
    https applicationUrl https://localhost:5001

    注:ポート番号は、Microsoft Entra ID アプリの登録を作成するときに指定した値と一致する必要があります。

  7. ファイルを保存して閉じます。

  8. Visual Studio Code の [エクスプローラー] ペインで、OIDCClient.csproj を選択します。

  9. <TargetFramework> 要素の値が net8.0 に設定されていることを確認します。

  10. Microsoft.AspNetCore.Authentication.JwtBearer と Microsoft.AspNetCore.Authentication.OpenIdConnect NuGet パッケージのバージョンが 8.0.0 に設定されていることを確認します。

  11. OIDCClient.csproj ファイルの内容が次の一覧 (UserSecretsId の値は異なります) に似ているかを確認し、変更を保存します。

     <Project Sdk="Microsoft.NET.Sdk.Web">

   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <UserSecretsId>aspnet-OIDCClient-5249f5b2-6266-4a13-b8b4-e79c6443aabc</UserSecretsId>
   </PropertyGroup>

   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.0-rc.2.23480.2" NoWarn="NU1605" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="8.0.0-rc.2.23480.2" NoWarn="NU1605" />
     <PackageReference Include="Microsoft.Identity.Web" Version="2.13.0" />
     <PackageReference Include="Microsoft.Identity.Web.UI" Version="2.13.0" />
     <PackageReference Include="Microsoft.Identity.Web.DownstreamApi" Version="2.13.0" />
   </ItemGroup>

 </Project>

  12. OIDCClient.csproj ファイルを閉じます。

  13. Views\Shared フォルダーに移動し、 _LoginPartial.cshtml ファイルを開きます。

  14. 次の行のように、各 span 要素の asp-area 属性が MicrosoftIdentity を参照していることを確認します。

     <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>

  15. 変更を加えずにファイルを閉じます。

  16. ルート フォルダーのファイル appsettings.json を開き、次の要素を含む AzureAd オブジェクトのコンテンツを確認します。

    要素 値
    Instance https://login.microsoftonline.com/
    Domain Azure サブスクリプションに関連付けられている Azure AD テナントのプライマリ DNS ドメイン
    TenantId Azure AD テナントの GUID
    ClientId Azure AD テナントに登録したアプリケーションのアプリケーション (クライアント) ID
    CallbackPath /signin-oidc

  17. 変更を加えずにファイルを閉じます。

  18. Visual Studio Code の [エクスプローラー] ペインで、Program.cs を選択します。

  19. ファイルに次の using ディレクティブが含まれていることを確認します。

     using Microsoft.AspNetCore.Authentication.OpenIdConnect;
 using Microsoft.Identity.Web;
 using Microsoft.Identity.Web.UI;

  20. 次の、関連する認証サービスをコンテナーに追加する行がファイルに含まれていることを確認します。

     // Add services to the container.
 builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
   .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));

  21. 次の、アカウント管理用のコントローラーと Razor ページを追加する行がファイルに含まれていることを確認します。

     builder.Services.AddRazorPages()
   .AddMicrosoftIdentityUI();

  22. ファイルを保存して閉じます。

タスク 2: シングルテナント シナリオでシングルテナント Web アプリをテストする

  1. [Visual Studio Code] ウィンドウで、上部のメニュー バーから [ターミナル] メニューに移動し、 [新しいターミナル] を選択します。

  2. [ターミナル] パネルで、現在の作業ディレクトリの現在のパスは F:\Allfiles\Labs\06\Starter\OIDCClient である必要があります。 次のコマンドを実行して、.NET Web アプリをビルドします。

     dotnet build

    注: ビルド エラーがある場合は、Allfiles (F):\Allfiles\Labs\06\Solution\OIDCClient フォルダー内のファイルを確認します。 警告メッセージはすべて無視してください。

  3. 次のコマンドを実行して自己署名証明書を生成し、それを信頼するようにローカル コンピューターを構成します。

     dotnet dev-certs https --trust

  4. 自動生成された証明書のインストールを求めるダイアログが表示されたら、 [はい] を選択します。

  5. ターミナル プロンプトから、次のコマンドを実行して .NET Web アプリを実行します。

     dotnet run

  6. InPrivate モードで Microsoft Edge ブラウザーを起動し、https://localhost:5001 URL に移動します。

  7. [接続はプライベートではありません] というメッセージが表示された場合は、 [詳細] を選択し、 [Continue to localhost (unsafe)] リンクを選択します。

  8. [ブラウザーを開く] ウィンドウで、メッセージが表示されたら、このラボで前に作成した aad_lab_user1 Microsoft Entra ID アカウントの UPN を使用し、パスワードに Pa55w.rd1234 を使用して認証します。

    注: [お使いのアカウントの保護にご協力ください] ウィンドウが表示されたら、 [今はしない] を選択します。

    注:管理者の承認が必要というメッセージが表示された場合は、昇格された特権を持つ Microsoft Entra ID を使用して、このタスクの残りの部分を完了する必要があります。 これを行うには、[Have an admin account? Sign in with that account](管理者アカウントを持っている場合 そのアカウントでサインインします) リンクを選択し、その管理者アカウントでサインインして、次の手順に進みます。

  9. ブラウザー ウィンドウによって、要求されたアクセス許可の Web ページが自動的に開きます。

  10. 要求されたアクセス許可を確認します。これには、基本プロファイルの表示と、自分がアクセス権を付与したデータへのアクセスの管理が含まれます。

  11. Accept を選択します。

  12. ブラウザーによって表示されるターゲット サイトの [ようこそ] ホーム ページを確認し、aad_user1 Microsoft Entra ID アカウントの UPN がブラウザー ウィンドウに表示されることを確認します。

  13. [ようこそ] ページで、[サインアウト] を選択します。

  14. サインアウトするアカウントを選択するように求めるメッセージが表示されたら、aad_lab_user1 Microsoft Entra ID アカウントを選択します。 [サインアウト] ページに自動的にリダイレクトされます。

  15. Microsoft Edge ブラウザーを閉じます。

確認

この演習では、シングルテナント Web アプリを実装し、それをシングルテナント Microsoft Entra 環境でテストしました。