Azure Active Directory B2C を使用してサンプル Node.js Web API で認証を構成する

重要

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

この記事では、Web API Node.js サンプルを呼び出すようにサンプル Node.js Web アプリケーションを構成する方法について説明します。 Web API は、Azure AD B2C 自体によって保護されている必要があります。このセットアップでは、 アプリ ID: 1 などの Web アプリが Web API ( アプリ ID: 2 など) を呼び出します。ユーザーは Web アプリに対して認証を行ってアクセストークンを取得します。アクセストークンは、保護された Web API の呼び出しに使用されます。

概要

トークンベースの認証により、Web API への要求に有効なアクセストークンが添付されます。

Web アプリは、次のイベントを完了します。

Azure AD B2C を使用してユーザーを認証します。
Web API エンドポイントで必要とされるアクセス許可 (スコープ) を持つアクセストークンを取得します。
HTTP 要求の認証ヘッダーでアクセストークンをベアラートークンとして渡します。次の形式が使用されます。

Authorization: Bearer <token>

Web API は、次のイベントを完了します。

HTTP 要求の承認ヘッダーからベアラートークンを読み取ります。
トークンを検証します。
トークン内のアクセス許可 (スコープ) を検証します。
HTTP 要求に応答します。トークンが有効でない場合、Web API エンドポイントは 401 Unauthorized HTTP エラーで応答します。

アプリ登録の概要

アプリが Azure AD B2C でサインインして Web API を呼び出せるようにするには、Azure AD B2C ディレクトリに 2 つのアプリケーションを登録する必要があります。

Web アプリケーションの登録により、アプリでは Azure AD B2C を使用してサインインできるようになります。登録時に、 リダイレクト URI を指定します。リダイレクト URI は、ユーザーが認証を完了した後に Azure AD B2C によってリダイレクトされるエンドポイントです。アプリの登録プロセスによって、アプリを一意に識別する "アプリケーション ID" ("クライアント ID" とも呼ばれます) が生成されます。また、アプリの クライアントシークレット も生成します。アプリでは、クライアントシークレットを使用して、アクセストークンの承認コードを交換します。
Web API の登録により、アプリではセキュリティで保護された Web API を呼び出すことができます。登録には、Web API の "スコープ" が含まれます。スコープを使用することで、Web API などの保護されたリソースへのアクセス許可を管理できます。 Web アプリケーションのアクセス許可を Web API のスコープに付与します。アクセストークンが要求されたら、アプリで必要なアクセス許可を要求の scope パラメーターに指定します。

アプリケーションの登録とアプリケーションアーキテクチャを次の図に示します。

Web A P I を使用したアプリのアプリケーション登録とアプリケーションアーキテクチャの図。

[前提条件]

Node.js。
Visual Studio Code または別のコードエディター。

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

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

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

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

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

手順 2: Web アプリと API を登録する

この手順では、Web および Web API アプリケーションの登録を作成し、Web API のスコープを指定します。

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

Web API アプリの登録 (App ID: 2) を作成するには、次の手順に従います。

Azure portal にサインインします。
ご自分の Azure AD B2C テナントが含まれるディレクトリを必ず使用してください。ポータルツールバーの [Directories + subscriptions](ディレクトリ + サブスクリプション) アイコンを選択します。
[ポータルの設定] | [Directories + subscriptions](ディレクトリ + サブスクリプション) ページの [ディレクトリ名] の一覧で自分の Azure AD B2C ディレクトリを見つけて、 [切り替え] を選択します。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、[新しい登録] を選択します。
アプリケーションの名前を入力します (my-api1 など)。 [リダイレクト URI] と [サポートされているアカウントの種類] を既定値のままにします。
登録を選択します。
アプリ登録が完了したら、 [概要] を選択します。
アプリケーション (クライアント) ID の値を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.2: スコープを構成する

作成した my-api1 アプリケーション (App ID: 2) を選択して、その [概要] ページを開きます。
[ 管理] で、[ API の公開] を選択します。
[アプリケーション ID URI] の横にある [設定] リンクを選択します。既定値 (GUID) を一意の名前 (例: tasks-api) に置き換え、[保存] を選択します。

Web アプリケーションで Web API のアクセストークンを要求するときに、API に対して定義する各スコープのプレフィックスとしてこの URI を追加する必要があります。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。
API への読み取りアクセスを定義するスコープを作成するには:
1. [スコープ名] に tasks.read を入力します。
2. [管理者の同意の表示名] で、「Read access to tasks API」を入力します。
3. [管理者の同意の説明] で、「Allows read access to the tasks API」を入力します。
[スコープの追加] を選択します。
[Add a scope (スコープの追加)] を選択し、API への書き込みアクセスを定義するスコープを追加します。
1. [スコープ名] に「tasks.write」を入力します。
2. [管理者の同意の表示名] に、「Write access to tasks API」を入力します。
3. [管理者の同意の説明] に、「Allows write access to the tasks API」を入力します。
[スコープの追加] を選択します。

手順 2.3: Web アプリを登録する

SPA 登録を作成するには、次の操作を行います。

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

手順 2.4: クライアントシークレットを作成する

[Azure AD B2C - アプリの登録] ページで、作成したアプリケーション (アプリ ID: 1 など) を選択します。
左側のメニューの [ 管理] で、[ 証明書とシークレット] を選択します。
新しいクライアントシークレットを選択します。
[説明] ボックスに、クライアントシークレットの説明を入力します。たとえば、clientsecret1 のようにします。
[有効期限] で、シークレットが有効な期間を選択してから、 [追加] を選択します。
クライアントアプリケーションのコードで使用できるように、シークレットの値を記録します。このページからの移動後は、このシークレットの値は "二度と表示されません"。アプリケーションのコード内で、この値をアプリケーションシークレットとして使用します。

手順 2.5: Web アプリに API アクセス許可を付与する

アプリ (アプリ ID: 1) にアクセス許可を付与するには、次の手順をおこないます。

[アプリの登録] を選択し、作成したアプリを選択します (アプリ ID: 1)。
[管理] で API 許可を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[ マイ API ] タブを選択します。
Web アプリケーションへのアクセス許可が必要な API を選択します (アプリ ID: 2)。たとえば、「my-api1」と入力します。
[アクセス許可] で、 [タスク] を展開し、前に定義したスコープを選択します(たとえば、tasks.read と tasks.write)。
アクセス許可の追加 を選択します。
[<テナント名> に管理者の同意を与えます] を選択します。
[はい] を選択します。
[最新の情報に更新] を選択し、両方のスコープの [状態] に、Granted for ...(... に付与されました) と表示されていることを確認します。
[Configured permissions (構成済みのアクセス許可)] の一覧からスコープを選択し、スコープの完全な名前をコピーします。

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

このサンプルでは、Web アプリケーションでユーザーのサインアップとサインインに Azure AD B2C を使用する方法を示します。その後、アプリではアクセストークンを取得して、保護された Web API を呼び出します。

Web アプリのサンプルコードを取得するには、次のいずれかの操作を行います。

zip ファイルをダウンロードします。サンプル Web アプリを取得するには、zip ファイルを抽出します。

次のコマンドを実行して、GitHub からサンプルを複製します。

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

手順 3.1: アプリの依存関係をインストールする

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

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

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

鍵	価値
`APP_CLIENT_ID`	手順 2.3 で登録した Web アプリのアプリケーション (クライアント) ID。
`APP_CLIENT_SECRET`	手順 2.4 で作成した Web アプリのクライアントシークレット値
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	手順 1 で作成したユーザーフローのサインインとサインアップユーザーフロー機関 (例: `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` など) に置き換えます。テナント名を取得する方法について説明します。
`AUTHORITY_DOMAIN`	`https://<your-tenant-name>.b2clogin.com`などの Azure AD B2C 機関ドメイン。 `<your-tenant-name>`をテナントの名前に置き換えます。
`APP_REDIRECT_URI`	Azure AD B2C が認証応答 (トークン) を返すアプリケーションリダイレクト URI。これは、Azure portal でアプリを登録するときに設定したリダイレクト URI と一致します。この URL にはパブリックにアクセスできる必要があります。値はそのままにしておきます。
`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` など) に置き換えます。

更新後、最終的な構成ファイルは次のサンプルのようになります。

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

手順 4: Web API のサンプルコードを取得する

Web API を登録し、そのスコープを定義したので、Azure AD B2C テナントで動作するように Web API コードを構成します。

Web API のサンプルコードは、次のいずれかの方法で入手できます。

*.zip アーカイブをダウンロードします。
次のコマンドを実行して、GitHub からサンプル Web API プロジェクトを複製します。
```
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
```
また、GitHub で Azure-Samples/active-directory-b2c-javascript-nodejs-webapi プロジェクトに直接アクセスすることもできます。

手順 4.1: Web API を更新する

コードエディターで、config.json ファイルを開きます。
前に作成したユーザーフローとアプリケーション登録を使用して変数の値を変更します。
- tenantNameには、テナント名の名前 (fabrikamb2cなど) を使用します。
- clientIDの場合は、手順 2.1 で作成した Web API のアプリケーション (クライアント) ID を使用します。
- policyNameの場合は、手順 1 で作成した Sing in とサインアップユーザーフローの名前 (B2C_1_susiなど) を使用します。
更新後、コードは次のサンプルのようになります。

config.json:
```
{
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "Enter_the_Application_Id_Here"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}
```

手順 4.2: アプリの依存関係をインストールする

コンソールウィンドウを開き、Node.js Web API サンプルが含まれるディレクトリに移動します。例えば次が挙げられます。
```
cd active-directory-b2c-javascript-nodejs-webapi
```
次のコマンドを実行してください:
```
npm install && npm update
```

手順 5: Web アプリと API を実行する

これで、Web API への Web アプリケーションのスコープアクセスをテストする準備ができました。 Node.js Web API とサンプル Web アプリケーションの両方をローカルコンピューターで実行します。

ターミナルで、サンプル Web API に移動し、Node.js Web API サーバーを起動します。例: '
```
cd active-directory-b2c-javascript-nodejs-webapi
node index.js
```
コンソールウィンドウには、アプリケーションがホストされている場所のポート番号が表示されます。
```
Listening on port 5000...
```
別のターミナルインスタンスで、サンプル Web アプリに移動し、Node.js Web アプリサーバーを起動します。例えば次が挙げられます。
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js
```
コンソールウィンドウには、アプリケーションがホストされている場所のポート番号が表示されます。
```
Msal Node Auth Code Sample app listening on port !3000
```
ブラウザーで http://localhost:3000 に移動します。ページに 2 つのボタンが表示されます。 サインインして PROTECTED API を呼び出 すか、 ANONYMOUS API を呼び出します。
匿名 API を呼び出すには、[ または匿名 API を呼び出す] を選択します。 API は、次のような date キーを使用して JSON オブジェクトで応答します。
```
    {"date":"2022-01-27T14:21:22.681Z"}
```
匿名 API は、Web API の保護されていないエンドポイントです。アクセスするにはアクセストークンは必要ありません。
保護された API エンドポイントを呼び出すには、[ サインインして PROTECTED API を呼び出す ] ボタンを選択します。サインインするように要求されます。
電子メールアドレスやパスワードなどのサインイン資格情報を入力します。アカウントをお持ちでない場合は、[ 今すぐサインアップ ] を選択してアカウントを作成します。正常にサインインまたはサインアップすると、次のページに [ PROTECTED API の呼び出し] ボタンが表示されます 。
保護された API を呼び出すには、[ PROTECTED API の呼び出し ] ボタンを選択します。 API は、次のようなアカウントの姓である name キーを使用して JSON オブジェクトで応答します。
```
    {"name": "User 1"} 
```

次のステップ

Azure AD B2C を使用して独自の Web API で認証を有効にする方法について説明します

フィードバック

このページはお役に立ちましたか?

Last updated on 2024-01-11