Azure AD B2C を使ってサンプル web アプリケーションで認証を構成する

この記事では、サンプルの ASP.NET Web アプリケーションを使用して、Web アプリケーションに Azure Active Directory B2C (Azure AD B2C) 認証を追加する方法を説明します。

重要

この記事で参照されているサンプルの ASP.NET web アプリケーションは、アクセス トークンではなく ID トークンを返すため、REST API の呼び出しのために使うことはできません。 REST API を呼び出すことができる web アプリについては、ASP.NET Core でビルドされた Web API を、Azure AD B2C を使ってセキュリティで保護するをご覧ください。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。 OIDC を使用して、ユーザーを安全にアプリケーションにサインインさせることができます。 この Web アプリのサンプルでは、Microsoft Identity Web が使用されます。 Microsoft Identity Web は、web アプリへの認証および認可のサポートの追加を簡略化する ASP.NET Core ライブラリのセットです。

サインイン フローには、次の手順が含まれます。

1. ユーザーが Web アプリにアクセスして [サインイン] を選択します。
2. アプリによって認証要求が開始され、ユーザーが Azure AD B2C にリダイレクトされます。
3. ユーザーがサインアップまたはサインインし、パスワードをリセットします。 ソーシャル アカウントを使用してサインインすることもできます。
4. ユーザーがサインインに成功すると、Azure AD B2C はアプリに ID トークンを返します。
5. アプリは、ID トークンを認証し、要求の内容を読み取り、セキュリティで保護されたページをユーザーに返します。

ID トークンが有効期限切れになった場合、またはアプリ セッションが無効になった場合、アプリは新しい認証要求を開始し、ユーザーを Azure AD B2C にリダイレクトします。 Azure AD B2C SSO セッションがアクティブである場合、Azure AD B2C は、ユーザーに再度サインインを促さずにアクセス トークンを発行します。 Azure AD B2C セッションが有効期限切れまたは無効になった場合、ユーザーは再度サインインするように促されます。

サインアウト

サインアウト フローには、次の手順が含まれます。

1. アプリから、ユーザーがサインアウトします。
2. アプリによってそのセッション オブジェクトがクリアされ、認証ライブラリによってそのトークン キャッシュがクリアされます。
3. アプリによってユーザーが Azure AD B2C サインアウト エンドポイントに移動し、Azure AD B2C セッションが終了されます。
4. ユーザーが再びアプリにリダイレクトされます。

前提条件

次のいずれかを実行中のコンピューター:

Visual Studio

• ASP.NET および Web 開発ワークロードを使用する Visual Studio 2022 17.0 以降のバージョン
• .NET 6.0 SDK

Visual Studio Code

• Visual Studio Code
• C# for Visual Studio Code (最新バージョン)
• .NET 6.0 SDK

手順 1: ユーザー フローを構成する

ユーザーがアプリにサインインしようとすると、ユーザー フローを介した承認エンドポイントへの認証要求がアプリによって開始されます。 ユーザー フローによって、ユーザーのエクスペリエンスが定義および制御されます。 ユーザーがユーザー フローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。

ユーザー フローまたはカスタム ポリシーの作成をまだ行っていない場合は、作成します。 手順を繰り返して、次のように 3 つの個別のユーザー フローを作成します。

• サインインと サインアップを結合したユーザー フロー (例:)susi。 このユーザー フローでは、パスワードを忘れた 場合のエクスペリエンスもサポート されています。
• プロファイル編集 ユーザー フロー (例: edit_profile) 。
• パスワードのリセット ユーザー フロー (例: reset_password)。

Azure AD B2C は、 B2C_1_ ユーザー フロー名の前に付加されます。 たとえば、susi が B2C_1_susi になります。

手順 2: Web アプリケーションを登録する

アプリケーションが Azure AD B2C でサインインできるようにするには、Azure AD B2C ディレクトリにアプリを登録します。 アプリを登録すると、アプリと Azure AD B2C の間に信頼関係が確立されます。

アプリの登録時に、リダイレクト URI を明記します。 リダイレクト URI は、ユーザーが Azure AD B2C で認証を行った後、Azure AD B2C によってリダイレクトされるエンドポイントです。 アプリ登録プロセスは、アプリを一意に識別するアプリケーション ID (またはクライアント ID として知られています) を生成します。 アプリが登録されると、Azure AD B2C はアプリケーション ID とリダイレクト URI の両方を使用して認証要求を作成します。

Web アプリの登録を作成するには、次の手順を使用します。

1. Azure portal にサインインします。

2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。

3. Azure portal で、 [Azure AD B2C] を検索して選択します。

4. [アプリの登録] を選択し、 [新規登録] を選択します。

5. [名前] で、アプリケーションの名前を入力します (webapp1 など)。

6. [サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザー フローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。

7. [リダイレクト URI] で、 [Web] を選択し、URL ボックスに「https://localhost:44316/signin-oidc」と入力します。

8. [管理] で[認証] を選択し、[暗黙的な許可とハイブリッド フロー] に移動し、[ID トークン (暗黙的およびハイブリッド フローに使用)] チェックボックスを選択します。

9. [アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェック ボックスをオンにします。

10. [登録] を選択します。

11. [概要] を選択します。

12. アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

    

手順 3: Web アプリのサンプルを取得する

ZIP ファイルをダウンロードするか、GitHub からサンプル Web アプリケーションをクローンします。

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

パスの合計文字長が 260 以下のフォルダーにサンプル ファイルを展開します。

手順 4: サンプル Web アプリを構成する

サンプル フォルダー内の 1-WebApp-OIDC/1-5-B2C/ フォルダーで、Visual Studio または Visual Studio Code を使用して WebApp-OpenIDConnect-DotNet.csproj プロジェクトを開きます。

プロジェクトのルート フォルダーで、appsettings.json ファイルを開きます。 このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。 次のアプリ設定のプロパティを更新します。

Section	キー	値
AzureAdB2C	インスタンス	Azure AD B2C テナント名の最初の部分 (例: https://contoso.b2clogin.com)。
AzureAdB2C	Domain	Azure AD B2C テナントの完全なテナント名 (例: contoso.onmicrosoft.com)。
AzureAdB2C	ClientId	手順 2 の Web アプリ アプリケーション (クライアント) ID。
AzureAdB2C	SignUpSignInPolicyId	ユーザー フロー、または手順 1 で作成したカスタム ポリシー。

最終的な構成ファイルは、次の JSON のようになります。

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

手順 5: サンプル Web アプリを実行する

1. プロジェクトをビルドして実行します。

2. https://localhost:44316 にアクセスします。

3. [サインアップ/イン] を選択します。

   

4. サインインアップまたはサインイン プロセスを完了します。

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

アプリケーションをデプロイする

運用アプリケーションでは、アプリ登録のリダイレクト URI は通常、アプリが実行されているパブリックにアクセス可能なエンドポイント (https://contoso.com/signin-oidc など) です。

お使いの登録済みアプリケーションでは、いつでもリダイレクト URI を追加したり、変更したりすることができます。 リダイレクト URI には、次の制限があります。

• 応答 URL は、スキーム https で始まる必要があります。
• 応答 URL では大文字と小文字が区別されます。 大文字と小文字の区別は、実行中のアプリケーションの URL パスの場合と一致している必要があります。

次のステップ

• コード サンプルについてさらに確認する。
• Azure AD B2C を使用して独自の Web アプリケーションで認証を有効にする方法について説明します。