ASP.NET Core での Azure Active Directory B2C を使用したクラウド認証

[アーティクル]
11/06/2024

Azure Active Directory B2C (Azure AD B2C) は、Web アプリとモバイルアプリのクラウド identity 管理ソリューションです。このサービスには、クラウドとオンプレミスでホストされているアプリの認証が用意されています。認証の種類には、個々のアカウント、ソーシャルネットワークアカウント、フェデレーションエンタープライズアカウントがあります。さらに、Azure AD B2C では、最小限の構成で多要素認証を使用できます。

ヒント

Microsoft Entra ID、Microsoft Entra 外部 ID、Azure AD B2C はそれぞれ個別の製品オファリングです。 Entra ID テナントが一般的に組織を表すのに対して、Azure AD B2C テナントまたは Microsoft Entra 外部 ID テナントは証明書利用者アプリケーションで使用される ID のコレクションを表すことができます。詳細については、「Azure AD B2C: よく寄せられる質問 (FAQ)」を参照してください。

ヒント

顧客向け Microsoft Entra 外部 ID は、Microsoft の新しい顧客 identity とアクセス管理 (CIAM) ソリューションです。

このチュートリアルでは、Azure AD B2C を使用した認証のために ASP.NET Core アプリを構成する方法について説明します。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
.NET SDK。ご利用のプラットフォーム用の最新の .NET SDK をインストールします。

準備

Azure Active Directory B2C テナントを作成する。
新しい ASP.NET Core Razor ページアプリを作成します。
```
dotnet new razor -o azure-ad-b2c
```
このコマンドを使用して、azure-ad-b2c という名前のディレクトリに Razor ページアプリを作成します。

ヒント

Visual Studio を使用してアプリを作成することもできます。
テナントで Web アプリの登録を作成します。 リダイレクト URI には、https://localhost:5001/signin-oidc を使用します。 Visual Studio によって生成されたポートを使用する場合は、5001 を、アプリで使用するポートに置き換えます。

アプリを変更する

Microsoft.Identity.Web および Microsoft.Identity.Web.UI パッケージをプロジェクトに追加します。 Visual Studio を使用している場合は、NuGet パッケージマネージャーを使用できます。
```
dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI
```
上記のコード:
- Microsoft.Identity.Web には、Microsoft identity プラットフォームで認証を行うための依存関係の基本セットが含まれています。
- Microsoft.Identity.Web.UI には、MicrosoftIdentity という名前の領域にカプセル化された UI 機能が含まれています。

appsettings.json に AzureADB2C オブジェクトを追加します。

注意

Azure B2C ユーザーフローを使用するときは、インスタンスとフローの種類の PolicyId を設定する必要があります。

{
  "AzureADB2C": {
    "Instance": "https://--your-domain--.b2clogin.com",
    "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    // Use either a secret or a certificate. ClientCertificates are recommended.
    "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc",
    // Add your policy here
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Domain には、お使いの Azure AD B2C テナントのドメインを使用します。
ClientId には、お使いのテナントで作成したアプリ登録のアプリケーション (クライアント) ID を使用します。
Instance には、お使いの Azure AD B2C テナントのドメインを使用します。
SignUpSignInPolicyId には、Azure B2C テナントで定義されているユーザーフローポリシーを使用します。
ClientSecret または ClientCertificates のいずれかの構成を使用します。 ClientCertificates をお勧めします。
その他の値はそのままにします。

Pages/Shared に、_LoginPartial.cshtml という名前のファイルを作成します。次のコードを含めます。

@using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        <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>

上記のコードでは次の操作が行われます。

ユーザーが認証されているかどうかを確認します。
必要に応じてサインアウトまたはサインインのリンクをレンダリングします。
- このリンクは、MicrosoftIdentity 領域内の Account コントローラーのアクションメソッドを指します。

Pages/Shared/_Layout.cshtml で、強調表示されている行を <header> 要素内に追加します。

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

<partial name="_LoginPartial" /> を追加すると、このレイアウトを使用するページ要求ごとに、_LoginPartial.cshtml の部分ビューがレンダリングされます。

Program.cs で、次の変更を行います。
1. 次の using ディレクティブを追加します。
```
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
```
  上記のコードで、次の手順で使用する参照を解決します。
2. builder.Services 行を次のコードで更新します。
```
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to 
    // the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages(options => {
    options.Conventions.AllowAnonymousToPage("/Index");
})
.AddMvcOptions(options => { })
.AddMicrosoftIdentityUI();
```
  上のコードでは以下の操作が行われます。
  - AddAuthentication および AddMicrosoftIdentityWebApp メソッドを呼び出して、Open ID Connect を使用するようにアプリを構成します。具体的には、Microsoft identity プラットフォーム用に構成します。
  - AddAuthorization を使用して、ASP.NET Core 承認を初期化します。
  - AddRazorPages を呼び出して、匿名ブラウザーでインデックスページを表示できるようにアプリを構成します。他の要求はすべて認証が必要です。
  - AddMvcOptions と AddMicrosoftIdentityUI を使用して、Azure AD B2C との間のリダイレクトに必要な UI コンポーネントを追加します。
3. 強調表示されている行を Configure メソッドに更新します。
```
app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();
```
  上記のコードにより、ASP.NET Core の認証が有効になります。

アプリを実行する

注意

Azure アプリ登録のリダイレクト URI と一致するプロファイルを使用します

アプリを実行します。
```
dotnet run --launch-profile https
```
たとえば、アプリのセキュリティで保護されたエンドポイント https://localhost:5001/ を参照します。
- このインデックスページは、認証チャレンジが表示されずにレンダリングされます。
- 認証されていないため、ヘッダーに サインイン リンクが含まれます。
[Privacy](ログの一元化) リンクを選択します。
- ブラウザーが、お使いのテナントで構成済みの認証方法にリダイレクトされます。
- サインインすると、ヘッダーにウェルカムメッセージと サインアウト リンクが表示されます。

次のステップ

このチュートリアルでは、Azure AD B2C を使用した認証のために ASP.NET Core アプリを構成する方法について説明しました。

ASP.NET Core アプリを Azure AD B2C を使用して認証を行うように構成したので、Authorize 属性を使用してアプリをセキュリティで保護することができます。アプリの開発を続けるには、次の内容を学習します。

Azure AD B2C ユーザーインターフェイスをカスタマイズする。
パスワードの複雑さの要件を構成する。
多要素認証を有効にする。
Microsoft、Facebook、Google、Amazon、Twitter など、追加の identity プロバイダーを構成する。
Microsoft Graph API を使用して、Azure AD B2C テナントからグループメンバーシップなどの追加のユーザー情報を取得する。
Azure AD B2C を使用して、ASP.NET Core でビルドされた Web API をセキュリティで保護する方法。
チュートリアル: Azure Active Directory B2C を使用して ASP.NET Web API へのアクセスを許可する。

次の方法で共有

ASP.NET Core での Azure Active Directory B2C を使用したクラウド認証

前提条件

準備

アプリを変更する

アプリを実行する

次のステップ

その他のリソース