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

[アーティクル]
03/26/2023

この記事では、サンプル Node.js Web アプリケーションを構成してサンプル Node.js Web API を呼び出す方法について説明します。 Web API は、Azure AD B2C 自体で保護する必要があります。この設定では、App ID: 1 などの Web アプリが、App ID: 2 などの Web API を呼び出します。ユーザーは、アクセストークンを取得するために 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 パラメーターに指定します。

次の図で、アプリケーションの登録とアプリケーションアーキテクチャについて説明しています。

Diagram of the application registrations and the application architecture for an app with 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 を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの [名前] を入力します (たとえば App ID: 1)。
[サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザーフローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。
[リダイレクト URI] で、[Web] を選択し、URL テキストボックスに「http://localhost:3000/redirect」と入力します
[アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェックボックスをオンにします。
[登録] を選択します。

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

[Azure AD B2C - アプリの登録] ページで、作成したアプリケーション (例: App 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 ファイルをダウンロードします。 zip ファイルを抽出して、サンプル Web アプリを取得します。

次のコマンドを実行して、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 アプリを構成する

Web アプリを Visual Studio Code などのコードエディターで開きます。 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`	Azure AD B2C 機関ドメイン (例: `https://<your-tenant-name>.b2clogin.com`)。 `<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 で作成したサインインとサインアップ ユーザーフローの名前 (例: B2C_1_susi) を使用します。
更新後、コードは次のサンプルのようになります。

config.json:
```
{
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "93733604-cc77-4a3c-a604-87084dd55348"
    },
    "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 アプリケーションの Web API へのスコープ付きアクセスをテストする準備ができました。ローカルマシンで 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 つのボタン、[Sign in to call PROTECTED API] (サインインして保護済み API を呼び出す) と [Or call the ANONYMOUS API] (または匿名 API を呼び出す) が表示されたページが表示されます。
匿名 API を呼び出すには、[Or call the ANONYMOUS API] (または匿名 API を呼び出す) を選択します。 API は、次のような date キーを使用して JSON オブジェクトで応答します。
```
    {"date":"2022-01-27T14:21:22.681Z"}
```
匿名 API は、Web API の保護されていないエンドポイントです。アクセスするためにアクセストークンは必要ありません。
保護された API エンドポイントを呼び出すには、[Sign in to call PROTECTED API] (サインインして保護済み API を呼び出す) ボタンを選択します。サインインするように求められます。
サインイン資格情報 (メールアドレス、パスワードなど) を入力します。アカウントをお持ちでない場合は、 [今すぐサインアップ] を選択してアカウントを作成します。正常にサインインまたはサインアップすると、[Call the PROTECTED API] (保護済み API を呼び出す) ボタンが表示された次のページが表示されます。
保護された API を呼び出す場合は、[Call the PROTECTED API] (保護済み API を呼び出す) ボタンを選択します。 API は、name キーの値が次のようなアカウントの姓の値である JSON オブジェクトで応答します。
```
    {"name": "User 1"} 
```

次のステップ

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

次の方法で共有

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

概要

アプリ登録の概要

前提条件

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

手順 2 - Web アプリおよび API を登録する

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

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

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

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

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

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

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

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

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

手順 4.1: Web API を更新する

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

手順 5: Web アプリおよび API を実行する

次のステップ

フィードバック

フィードバック

その他のリソース

次の方法で共有

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

概要

アプリ登録の概要

前提条件

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

手順 2 - Web アプリおよび API を登録する

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

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

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

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

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

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

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

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

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

手順 4.1: Web API を更新する

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

手順 5: Web アプリおよび API を実行する

次のステップ

フィードバック

フィードバック

その他のリソース

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

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

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

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