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

  • [アーティクル]

このサンプル記事では、サンプルの 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 アプリケーションを更新します。
  • サンプル アプリケーションをテストします。

前提条件

手順 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 アプリを登録するには、次の手順を実行します。

  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 ボックスに「http://localhost:3000/redirect」と入力します。

  8. [アクセス許可] で、[openid と offline_access アクセス許可に対して管理者の同意を付与します] チェック ボックスをオンにします。

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

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

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

    Screenshot of the web app Overview page for recording your web app I D.

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

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

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

手順 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: 依存関係をインストールする

  1. コンソール ウィンドウを開き、Node.js サンプル アプリが含まれるディレクトリに移動します。 次に例を示します。

    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp

  2. 次のコマンドを実行してアプリの依存関係をインストールします。

    npm install && npm update

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

Web アプリを Visual Studio Code などのコード エディターで開きます。 プロジェクト ルート フォルダーで、.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 Azure AD B2C 機関ドメイン (例: https://<your-tenant-name>.b2clogin.com)。 <your-tenant-name> をテナントの名前に置き換えます。
APP_REDIRECT_URI Azure AD B2C が認証応答 (トークン) を返すアプリケーション リダイレクト URI。 アプリを Azure portal に登録するときに設定したリダイレクト URI と一致し、パブリックにアクセスできる必要があります。 値はそのままにします。
LOGOUT_ENDPOINT Azure AD B2C サインアウト エンドポイント (例: 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)。 <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 からアクセスする必要があります。

  1. ターミナルで、次のコードを実行して Node.js web サーバーを起動します。

    node index.js

  2. ブラウザーで http://localhost:3000 に移動します。 [ サインイン ] ボタンを備えたページが表示されます。

    Screenshot that shows a Node web app sign in page.

サインインをテストする

  1. [ サインイン ] ボタンを備えたページの読み込みが完了したら、 [ サインイン ]を選択します。 サインインするように求められます。

  2. サインイン資格情報 (メールアドレス、パスワードなど) を入力します。 アカウントをお持ちでない場合は、 [今すぐサインアップ] を選択してアカウントを作成します。 サインインまたはサインアップに成功すると、サインイン状態を示す次のページが表示されます。

    Screenshot shows web app sign-in status.

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

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

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

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

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

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

次のステップ