チュートリアル: アプリケーションにサインインを追加する - Microsoft identity platform

[アーティクル]
02/12/2024

前のチュートリアルでは、ASP.NET Core プロジェクトが作成され、認証用に構成されました。このチュートリアルでは、必要なパッケージをインストールし、サインインとサインアウトのエクスペリエンスに認証を実装するコードを追加します。

このチュートリアルの内容:

認証に必要な NuGet パッケージを特定してインストールする
コードに認証を実装する
サインインとサインアウトのエクスペリエンスを追加する

前提条件

「チュートリアル: アプリケーションを認証用に準備する」の前提条件と手順を完了していること。

ID パッケージをインストールする

ユーザーの認証を有効にするためには、ID 関連の NuGet パッケージがプロジェクトにインストールされている必要があります。

Visual Studio のトップメニューで、[ツール] > [NuGet Package Manager] > [ソリューションの NuGet パッケージの管理] を選択します。
[参照] タブを選択した状態で、Microsoft.Identity.Web.UI を検索して選択します。 [プロジェクト] チェックボックスをオンにして、[インストール] を選択します。
Microsoft.Identity.Web.Diagnostics と Microsoft.Identity.Web.DownstreamApi に対してこれを繰り返します。

Visual Studio Code ターミナルで、NewWebAppLocal に移動します。

次のコマンドを入力して、関連する NuGet パッケージをインストールします。

dotnet add package Microsoft.Identity.Web.UI
dotnet add package Microsoft.Identity.Web.Diagnostics
dotnet add package Microsoft.Identity.Web.DownstreamApi

トップメニューで、[ツール]>[NuGet パッケージの管理] の順に選択します。
Microsoft.Identity.Web を検索し、Microsoft.Identity.Web パッケージを選択し、[プロジェクト] を選択して [パッケージの追加] を選択します。
検索を変更して Microsoft.Identity.Web.UI を 読み取り、[パッケージの追加] を選択します。
ポップアップで、正しいプロジェクトが選択されていることを確認し、[OK] を選択します。
追加の [ライセンスの同意] ウィンドウが表示される場合は、[承諾] を選択します。

Note

Visual Studio for Mac は、Microsoft のモダンライフサイクルポリシーに従って、2024 年 8 月 31 日までに廃止される予定です。 Visual Studio for Mac 17.6 は 2024 年 8 月 31 日までサポートが継続され、セキュリティ問題や Apple からのプラットフォーム更新のためのサービス更新プログラムが提供されます。詳細については、「Visual Studio for Mac の動作」を参照してください。

認証を実装し、トークンを取得する

Program.cs を開き、ファイル内容全体を次のスニペットに置き換えます。

// <ms_docref_import_types>
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
// </ms_docref_import_types>

// <ms_docref_add_msal>
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
IEnumerable<string>? initialScopes = builder.Configuration["DownstreamApi:Scopes"]?.Split(' ');


builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd")
    .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
        .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
        .AddInMemoryTokenCaches();
// </ms_docref_add_msal>

// <ms_docref_add_default_controller_for_sign-in-out>
builder.Services.AddRazorPages().AddMvcOptions(options =>
    {
        var policy = new AuthorizationPolicyBuilder()
                      .RequireAuthenticatedUser()
                      .Build();
        options.Filters.Add(new AuthorizeFilter(policy));
    }).AddMicrosoftIdentityUI();
// </ms_docref_add_default_controller_for_sign-in-out>

// <ms_docref_enable_authz_capabilities>
WebApplication app = builder.Build();

app.UseAuthentication();
app.UseAuthorization();
// </ms_docref_enable_authz_capabilities>

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.MapRazorPages();
app.MapControllers();

app.Run();

NuGet パッケージをインストールし、認証に必要なコードを追加したら、サインインとサインアウトのエクスペリエンスを追加します。

_LoginPartial.cshtml ファイルを作成する

[ページ] を展開し、[共有] を右クリックして、[追加] > [Razor ページ] を選択します。
[Razor ページ - 空]、[追加] の順に選択します。
名前に _LoginPartial.cshtml と入力し、[追加] を選択します。

_LoginPartial.cshtml ファイルを編集する

_LoginPartial.cshtml を開き、サインインとサインアウトのエクスペリエンスを追加するために次のコードを追加します。

@using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <li class="nav-item">
            <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

_Layout.cshtml を開き、前の手順で作成した _LoginPartial への参照を追加します。この 1 行を </ul> と </div> の間に置く必要があります。
```
    </ul>
    <partial name="_LoginPartial" />
</div>
```

次の手順

チュートリアル: API を呼び出して結果を表示する

次の方法で共有