このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
この記事では、サンプル 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 パラメーターに指定します。
次の図で、アプリケーションの登録とアプリケーション アーキテクチャについて説明しています。
Visual Studio Code、または別のコード エディター。
ユーザーがアプリにサインインしようとすると、ユーザー フローを介した承認エンドポイントへの認証要求がアプリによって開始されます。 ユーザー フローによって、ユーザーのエクスペリエンスが定義および制御されます。 ユーザーがユーザー フローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。
ユーザー フローまたはカスタム ポリシーの作成をまだ行っていない場合は、作成します。 手順を繰り返して、次のように 3 つの個別のユーザー フローを作成します。
susi。 このユーザー フローでは、パスワードを忘れた 場合のエクスペリエンスもサポート されています。edit_profile) 。reset_password)。Azure AD B2C は、 B2C_1_ ユーザー フロー名の前に付加されます。 たとえば、susi が B2C_1_susi になります。
この手順では、Web および Web API アプリケーションの登録を作成し、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 アプリケーションを構成するときに使用します。
作成した my-api1 アプリケーション (App ID: 2) を選択して、その [概要] ページを開きます。
[管理] の [API の公開] を選択します。
[アプリケーション ID URI] の横にある [設定] リンクを選択します。 既定値 (GUID) を一意の名前 (例: tasks-api) に置き換え、[保存] を選択します。
Web アプリケーションで Web API のアクセス トークンを要求するときに、API に対して定義する各スコープのプレフィックスとしてこの URI を追加する必要があります。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。
API への読み取りアクセスを定義するスコープを作成するには:
[スコープの追加] を選択します。
[Add a scope (スコープの追加)] を選択し、API への書き込みアクセスを定義するスコープを追加します。
[スコープの追加] を選択します。
SPA 登録を作成するには、次の手順を実行します。
http://localhost:3000/redirect」と入力しますアプリ (アプリ ID: 1) にアクセス許可を付与するには、次の手順をおこないます。
[アプリの登録] を選択し、作成したアプリを選択します (アプリ ID: 1)。
[管理] の下にある [API のアクセス許可] を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[自分の API] タブを選択します。
Web アプリケーションへのアクセス許可が必要な API を選択します (アプリ ID: 2)。 たとえば、「my-api1」と入力します。
[アクセス許可] で、 [タスク] を展開し、前に定義したスコープを選択します(たとえば、tasks.read と tasks.write)。
[アクセス許可の追加] を選択します.
[<テナント名> に管理者の同意を与えます] を選択します。
[はい] を選択します。
[最新の情報に更新] を選択し、両方のスコープの [状態] に、Granted for ...(... に付与されました) と表示されていることを確認します。
[Configured permissions (構成済みのアクセス許可)] の一覧からスコープを選択し、スコープの完全な名前をコピーします。
このサンプルでは、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
コンソール ウィンドウを開き、Node.js サンプル アプリが含まれるディレクトリに移動します。 次に例を示します。
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
次のコマンドを実行してアプリの依存関係をインストールします。
npm install && npm update
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
Web API を登録し、そのスコープを定義したので、Azure AD B2C テナントで動作するように Web API コードを構成します。
Web API のサンプル コードは、次のいずれかの方法で入手できます。
次のコマンドを実行して、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 プロジェクトに直接アクセスすることもできます。
コード エディターで、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"
}
}
コンソール ウィンドウを開き、Node.js Web API サンプルが含まれるディレクトリに移動します。 次に例を示します。
cd active-directory-b2c-javascript-nodejs-webapi
次のコマンドを実行します。
npm install && npm update
これで、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 で認証を有効にする方法について説明します。
トレーニング
モジュール
Microsoft Entra 外部 ID により、コンシューマーと企業顧客に安全でシームレスなサインイン エクスペリエンスをどのように提供できるかについて確認します。 テナントの作成、アプリの登録、フローのカスタマイズ、アカウントのセキュリティについて調べます。
認定資格
Microsoft Certified: Identity and Access Administrator Associate - Certifications
ID ソリューションの現代化、ハイブリッド ソリューションの実装、ID ガバナンスの実装を行う Microsoft Entra ID の機能を実証します。