Azure Active Directory B2C を使用してサンプル Node.js Web アプリケーションで認証を構成する

2025-05-06

重要

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

このサンプル記事では、サンプルの Node.js アプリケーションを使用して、Node.js Web アプリケーションに Azure Active Directory B2C (Azure AD B2C) 認証を追加する方法を示します。サンプルアプリケーションを使用すると、ユーザーは Azure AD B2C ユーザーフローを使用して、サインイン、サインアウト、プロファイルの更新、パスワードのリセットを行えます。サンプル Web アプリケーションでは、 Node 用 Microsoft Authentication Library (MSAL) を使用して認証と承認を処理します。

この記事では、次のタスクを実行します。

Azure portal で Web アプリケーションを登録します。
Azure portal でアプリのサインインとサインアップ、 プロファイル編集、 パスワードリセット のユーザーフローを組み合わせて作成します。
独自の Azure AD B2C アプリケーションとユーザーフローを使用するように、サンプル Node アプリケーションを更新します。
サンプルアプリケーションをテストします。

[前提条件]

Node.js。
Visual Studio Code または別のコードエディター。
Azure AD B2C テナント。独自のテナントをまだ作成していない場合は、「チュートリアル: Azure Active Directory B2C テナントを作成し、テナント名を記録する」の手順に従います。

手順 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 の両方を使用して認証要求を作成します。

手順 2.1: アプリを登録する

Web アプリを登録するには、次の手順に従います。

Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、[新しい登録] を選択します。
[ 名前] に、アプリケーションの名前 ( webapp1 など) を入力します。
[サポートされているアカウントの種類] で、[(ユーザーフローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント] を選択します。
[リダイレクト URI] で、 [Web] を選択し、URL ボックスに「http://localhost:3000/redirect」と入力します。
[ アクセス許可 ] で、[ openid と offline_access のアクセス許可に管理者の同意を付与する ] チェックボックスをオンにします。
登録を選択します。
[概要] を選択します。
アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.2: Web アプリクライアントシークレットを作成する

登録済みの Web アプリケーションのクライアントシークレットを作成します。 Web アプリケーションは、クライアントシークレットを使用して、トークンを要求するときにその ID を証明します。

[管理] で、[証明書とシークレット] を選択します。
新しいクライアントシークレットを選択します。
[ 説明 ] ボックスに、クライアントシークレットの説明 ( clientsecret1 など) を入力します。
[有効期限] で、シークレットが有効な期間を選択してから、 [追加] を選択します。
シークレットの値を記録します。この値は、後の手順での構成に使用します。

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

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

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

サンプルファイルをフォルダーに抽出します。次のディレクトリ構造を持つ Web アプリを取得します。

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

views フォルダーには、アプリケーションのユーザーインターフェイスの Handlebars ファイルが含まれています。

手順 4: 依存関係をインストールする

コンソールウィンドウを開き、Node.js サンプルアプリを含むディレクトリに移動します。例えば次が挙げられます。
```
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
```
次のコマンドを実行してアプリの依存関係をインストールします。
```
npm install && npm update
```

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

Visual Studio Code などのコードエディターで Web アプリを開きます。プロジェクトのルートフォルダーの下で、 .env ファイルを開きます。このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。次のアプリ設定プロパティを更新します。

鍵	価値
`APP_CLIENT_ID`	手順 2.1 で登録した Web アプリのアプリケーション (クライアント) ID。
`APP_CLIENT_SECRET`	手順 2.2 で作成した Web アプリのクライアントシークレット値
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	サインインとサインアップのユーザーフロー機関 (例: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>`)。 `<your-tenant-name>`をテナントの名前に置き換え、`<sign-in-sign-up-user-flow-name>`をサインインとサインアップのユーザーフローの名前 (`B2C_1_susi` など) に置き換えます。テナント名を取得する方法について説明します。
`RESET_PASSWORD_POLICY_AUTHORITY`	パスワードをリセットするユーザーフローの権限 (例: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>`)。 `<your-tenant-name>`をテナントの名前に置き換え、`<reset-password-user-flow-name>`を `B2C_1_reset_password_node_app` などのパスワードリセットユーザーフローの名前に置き換えます。
`EDIT_PROFILE_POLICY_AUTHORITY`	プロファイル編集ユーザーフローの権限、例えば`https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>`など。 `<your-tenant-name>`をテナントの名前に置き換え、`<reset-password-user-flow-name>`を`B2C_1_edit_profile_node_app`などのリセットパスワードユーザーフローの名前に置き換えます。
`AUTHORITY_DOMAIN`	`https://<your-tenant-name>.b2clogin.com`などの Azure AD B2C 機関ドメイン。 `<your-tenant-name>`をテナントの名前に置き換えます。
`APP_REDIRECT_URI`	Azure AD B2C が認証応答 (トークン) を返すアプリケーションリダイレクト URI。これは、Azure portal でアプリを登録するときに設定したリダイレクト URI と一致し、パブリックにアクセスできる必要があります。値はそのままにしておきます。
`LOGOUT_ENDPOINT`	`https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000`などの Azure AD B2C サインアウトエンドポイント。 `<your-tenant-name>`をテナントの名前に置き換え、`<sign-in-sign-up-user-flow-name>`をサインインとサインアップのユーザーフローの名前 (`B2C_1_susi` など) に置き換えます。

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

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

サンプル Web アプリを実行する

これで、サンプルアプリをテストできます。 Node サーバーを起動し、 http://localhost:3000のブラウザーからアクセスする必要があります。

ターミナルで次のコードを実行して、Node.js Web サーバーを起動します。
```
node index.js
```
ブラウザーで http://localhost:3000 に移動します。 [ サインイン ] ボタンが表示されたページが表示されます。

[サインイン] ボタンが表示されたページの読み込みが完了したら、[サインイン] を選択します。サインインするように要求されます。
電子メールアドレスやパスワードなどのサインイン資格情報を入力します。アカウントをお持ちでない場合は、[ 今すぐサインアップ ] を選択してアカウントを作成します。正常にサインインまたはサインアップすると、サインインの状態を示す次のページが表示されます。

プロファイルの編集をテストする

サインインしたら、[ プロファイルの編集] を選択します。
必要に応じて新しい変更を入力し、[ 続行] を選択します。 [指定された 名前] などの新しい変更が表示されたサインイン状態のページが表示されます。

パスワードのリセットをテストする

サインインしたら、[ パスワードのリセット] を選択します。
次に表示されるダイアログで、[キャンセル] を選択して操作を 取り消すことができます。または、メールアドレスを入力し、[ 確認コードの送信] を選択します。確認コードがメールアカウントに届きます。電子メールの確認コードをコピーし、パスワードリセットダイアログに入力して、[ コードの確認] を選択します。
続行を選択します。
新しいパスワードを入力して確認し、[ 続行] を選択します。サインインの状態を示すページが表示されます。

サインアウトをテストする

サインインしたら、[ サインアウト] を選択します。 [サインイン ] ボタンがあるページが表示されます。

次のステップ

Web アプリの Azure AD B2C 認証エクスペリエンスをカスタマイズおよび強化する方法を学ぶ。
Azure AD B2C を使用して独自の Node Web アプリケーションで認証を有効にする方法について説明します。