Azure AD B2C を使用して独自の Web アプリで認証を有効にする

2025-05-08

重要

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。詳細については、FAQ を参照してください。

この記事では、独自の ASP.NET Web アプリケーションに Azure Active Directory B2C (Azure AD B2C) 認証を追加する方法について説明します。 OpenID Connect プロトコルを使用する ASP.NET Core ミドルウェアを使用して ASP.NET Core Web アプリケーションを作成する方法について説明します。

この記事は、サンプル Web アプリでの認証の構成と組み合わせて使用し、サンプル Web アプリを独自の Web アプリに置き換えます。

[前提条件]

前提条件と統合の手順を確認するには、「サンプル Web アプリケーションでの認証の構成」を参照してください。

手順 1: Web アプリプロジェクトを作成する

既存の ASP.NET model-view-controller (MVC) Web アプリプロジェクトを使用することも、新しく作成することもできます。新しいプロジェクトを作成するには、コマンドシェルを開き、次のコマンドを入力します。

dotnet new mvc -o mywebapp

上記のコマンドでは、次の処理が行われます。

新しい MVC Web アプリが作成されます。
-o mywebapp パラメーターは、アプリのソースファイルを含む mywebapp という名前のディレクトリを作成します。

手順 2: 認証ライブラリを追加する

Microsoft Identity Web ライブラリを追加します。これは、Azure AD B2C 認証と承認のサポートを Web アプリに簡単に追加する一連の ASP.NET Core ライブラリです。 Microsoft Identity Web ライブラリは、Cookie ベースの認証を使用して認証パイプラインを設定します。 HTTP 認証メッセージの送受信、トークンの検証、要求の抽出などを行います。

Microsoft Identity Web ライブラリを追加するには、次のコマンドを実行してパッケージをインストールします。

Visual Studio
Visual Studio Code

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

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI

手順 3: 認証ライブラリを開始する

Microsoft Identity Web ミドルウェアは、ホスティングプロセスの開始時に実行されるスタートアップクラスを使用します。この手順では、認証ライブラリを開始するために必要なコードを追加します。

Startup.csを開き、クラスの先頭に次のusing宣言を追加します。

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

Microsoft Identity Web は Cookie ベースの認証を使用して Web アプリを保護するため、次のコードは SameSite Cookie 設定を設定します。次に、 AzureAdB2C アプリケーション設定を読み取り、そのビューを使用してミドルウェアコントローラーを開始します。

ConfigureServices(IServiceCollection services)関数を次のコードスニペットに置き換えます。

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

次のコードは、Cookie ポリシーを追加し、認証モデルを使用します。 Configure関数を次のコードスニペットに置き換えます。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

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

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

手順 4: UI 要素を追加する

ユーザーインターフェイス要素を追加するには、ユーザーがサインインしているかどうかを確認するためのロジックを含む部分ビューを使用します。ユーザーがサインインしていない場合、部分ビューはサインインボタンをレンダリングします。サインインしている場合は、ユーザーの表示名とサインアウトボタンが表示されます。

次のコードスニペットを使用して、/Views/Shared フォルダー内に新しいファイル _LoginPartial.cshtml を作成します。

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

/Views/Shared_Layout.cshtml ファイルを変更して、追加した _LoginPartial.cshtml ファイルを含めます。 _Layout.cshtml ファイルは、ユーザーがページ間で一貫したエクスペリエンスを提供する一般的なレイアウトです。レイアウトには、アプリのヘッダーやフッターなどの一般的なユーザーインターフェイス要素が含まれています。

注

実行している .NET Core のバージョンと、既存のアプリにサインインを追加するかどうかに応じて、UI 要素の外観が異なる場合があります。その場合は、ページレイアウト内の適切な場所に _LoginPartial を含めるようにしてください。

/Views/Shared/_Layout.cshtml ファイルを開き、次のdiv要素を追加します。

<div class="navbar-collapse collapse">
...
</div>

この要素を次の Razor コードに置き換えます。

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

上記の Razor コードには、次の手順で作成する Claims アクションへのリンクが含まれています。

手順 5: 要求ビューを追加する

ID トークン要求を表示するには、 /Views/Home フォルダーの下に Claims.cshtml ビューを追加します。

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

この手順では、Claims ビューをホーム コントローラーにリンクするアクションを追加します。 Claims アクションでは、Authorize属性を使用します。この属性により、アクションへのアクセスが認証されたユーザーに制限されます。

/Controllers/HomeController.cs コントローラーで、次のアクションを追加します。

[Authorize]
public IActionResult Claims()
{
    return View();
}

クラスの先頭に、次の using 宣言を追加します。

using Microsoft.AspNetCore.Authorization;

手順 6: アプリ設定を追加する

Azure AD B2C ID プロバイダーの設定は 、appsettings.json ファイルに格納されます。 appsettings.jsonを開き、次の設定を追加します。

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-___domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

必要な情報については、サンプル Web アプリの認証の構成に関する記事を参照してください。次の設定を使用します。

インスタンス: <your-tenant-name> を Azure AD B2C テナント名の最初の部分 (たとえば、 https://contoso.b2clogin.com) に置き換えます。
ドメイン: <your-b2c-___domain> を Azure AD B2C の完全なテナント名 ( contoso.onmicrosoft.com など) に置き換えます。
クライアント ID: <web-app-application-id>を手順 2 のアプリケーション ID に置き換えます。
ポリシー名: <your-sign-up-in-policy> を、手順 1 で作成したユーザーフローに置き換えます。

手順 7: アプリケーションを実行する

プロジェクトをビルドして実行します。
https://localhost:5001 にアクセスします。
[ サインアップ/サインイン] を選択します。
サインインアップまたはサインインプロセスを完了します。

正常に認証されると、ナビゲーションバーに表示名が表示されます。 Azure AD B2C トークンがアプリに返す要求を表示するには、[要求] を選択 します。

次のステップ

Web アプリの Azure AD B2C 認証エクスペリエンスをカスタマイズおよび強化する方法を学ぶ。