開発者アカウントを使用して、ローカル開発中に Azure サービスに対して JavaScript アプリを認証する

  • [アーティクル]

クラウド アプリケーションを作成する場合、開発者はローカル ワークステーションでアプリケーションをデバッグおよびテストする必要があります。 ローカル開発時に開発者のワークステーションでアプリケーションを実行する場合でも、アプリで使用されるすべての Azure サービスに対して認証する必要があります。 この記事では、ローカル開発時に開発者の Azure 資格情報を使用して Azure に対してアプリを認証する方法について説明します。

A diagram showing a local dev app running obtaining a service principal from an .env file and use that identity to connect to Azure resources.

ローカル開発時に開発者の Azure 資格情報を使用して Azure に対してアプリを認証する場合、開発者は VS Code Azure Tools 拡張機能、Azure CLI、または Azure PowerShell から Azure にサインインする必要があります。 Azure SDK for JavaScript では、開発者がこれらのツールのいずれかからサインインしていることを検出し、サインインしているユーザーとして Azure に対してアプリを認証するために必要な資格情報を資格情報キャッシュから取得できます。

この方法は、開発者の既存の Azure アカウントを利用するため、開発チームに設定するのが最も簡単です。 ただし、開発者のアカウントにアプリケーションで必要とされるよりも多くのアクセス許可が与えられる可能性があるため、運用環境でアプリが実行されるアクセス許可を超えてしまいます。 または、ローカル開発中に使用するアプリケーションサービスプリンシパルを作成することもできます。これは、アプリが必要とするアクセスのみを持つように範囲を設定できます。

1 - ローカル開発用の Microsoft Entra グループの作成

ほとんどの場合、1 つのアプリケーションの作業に複数の開発者が参加するため、まず Microsoft Entra グループを作成して、ローカル開発でアプリに必要なロール (アクセス許可) をカプセル化することをお勧めします。 これには次のような利点があります。

  • ロールはグループ レベルで割り当てられるため、すべての開発者に同じロールが割り当てられることが保証されます。
  • アプリに新しいロールが必要な場合は、アプリの Microsoft Entra グループに追加するだけで済みます。
  • 新しい開発者がチームに加わる場合、アプリで作業するための適切な権限を得るには、それらを正しいMicrosoft Entraグループに追加する必要があります。

開発チーム用に既存の Microsoft Entra グループがある場合は、そのグループを使用できます。 それ以外の場合は、以下の手順を実行して Microsoft Entra グループを作成します。

手順 Screenshot
ページの上部にある検索ボックスに「Microsoft Entra ID」と入力し、サービスの下から Microsoft Entra ID を選択して、Azure Portal の [Microsoft Entra ID] ページに移動します。 A screenshot showing how to use the top search bar in the Azure portal to search for and navigate to the Microsoft Entra ID page.
[Microsoft Entra ID] ページで、左側のメニューから [グループ] を選択します。 A screenshot showing the location of the Groups menu item in the left-hand menu of the Microsoft Entra ID Default Directory page.
[すべてグループ] ページで、[新しいグループ] を選択します。 A screenshot showing the location of the New Group button in the All groups page.
[新しいグループ] ページで、次の操作を行います。
  1. [グループの種類] → [セキュリティ]。
  2. グループ名 →通常はアプリケーション名から作成される、セキュリティ グループの名前です。 また、グループの目的も示すために、グループの名前に local-dev のような文字列を含めるとわかりやすくなります。
  3. グループの説明 → グループの目的の説明。
  4. [メンバー] の下の [メンバーが選択されていません] リンクを選択して、グループにメンバーを追加します。
 A screenshot showing how to create a new Microsoft Entra group. The location of the link to select to add members to this group is highlighted.
[メンバーの追加] ダイアログ ボックスで、次の操作を行います。
  1. 検索ボックスを使用して、一覧で、ユーザー名の一覧をフィルター処理します。
  2. このアプリのローカル開発用に 1 人以上のユーザーを選択します。 オブジェクトを選択すると、そのオブジェクトはダイアログの下部にある [選択された項目] の一覧に移動されます。
  3. 完了したら、[選択] ボタンを選択します。
 A screenshot of the Add members dialog box showing how to select developer accounts to be included in the group.
[新規グループ] ページに戻り、[作成] を選択して、グループを作成します。

グループが作成され、[すべてのグループ] ページに戻ります。 グループが表示されるまでに最大 30 秒かかる場合があり、Azure portal でのキャッシュのためにページの更新が必要になる場合があります。		 A screenshot of the New Group page showing how to complete the process by selecting the Create button.

2 - Microsoft Entraグループへのロールの割り当て

次に、アプリがどのリソースでどのロール (アクセス許可) を必要としているかを決定し、それらのロールをアプリに割り当てる必要があります。 この例では、手順 1 で作成した Microsoft Entra グループにロールが割り当てられます。 ロールは、リソース、リソース グループ、またはサブスクリプション スコープで割り当てることができます。 ほとんどのアプリケーションではすべての Azure リソースを 1 つのリソース グループにグループ化するため、この例では、リソース グループのスコープでロールを割り当てる方法を示します。

手順 Screenshot
Azure portal の上部にある検索ボックスを使用してリソース グループ名を検索し、アプリケーションのリソース グループを見つけます。

ダイアログ ボックスの [リソース グループ] 見出しの下にあるリソース グループ名を選択して、リソース グループに移動します。		 A screenshot showing how to use the top search box in the Azure portal to locate and navigate to the resource group you want to assign roles (permissions) to.
リソース グループのページで、左側のメニューから [アクセス制御 (IAM)] を選択します。 A screenshot of the resource group page showing the location of the Access control (IAM) menu item.
[アクセス制御 (IAM)] ページで、次の操作を行います。
  1. [ロールの割り当て] タブを選択します。
  2. 上部のメニューから [+ 追加] を選択し、次に結果のドロップダウン メニューから [ロールの割り当ての追加] を選択します。
 A screenshot showing how to navigate to the role assignments tab and the location of the button used to add role assignments to a resource group.
[ロールの割り当ての追加] ページには、リソース グループで割り当てることができるすべてのロールが一覧表示されます。
  1. 検索ボックスを使用して、より管理しやすいサイズにリストをフィルター処理します。 この例では、Storage BLOB ロールをフィルター処理する方法を示します。
  2. 割り当てるロールを選択します。
    [次へ] を選択して、次の画面に進みます。
 A screenshot showing how to filter and select role assignments to be added to the resource group.
次の [ロールの割り当ての追加] ページでは、ロールを割り当てるユーザーを指定できます。
  1. [アクセスの割り当て先] で、[ユーザー、グループ、またはサービス プリンシパル] を選択します。
  2. [メンバー] で [+ メンバーの選択] を選択する
Azure portal の右側でダイアログ ボックスが開きます。		 A screenshot showing the radio button to select to assign a role to a Microsoft Entra group and the link used to select the group to assign the role to.
[メンバーの選択] ダイアログで、次の操作を行います。
  1. [選択] テキスト ボックスを使用して、サブスクリプション内のユーザーとグループの一覧をフィルター処理できます。 必要に応じて、アプリ用に作成したローカル開発 Microsoft Entra グループの最初の数文字を入力します。
  2. アプリケーションに関連付けられているローカル開発 Microsoft Entra グループを選択します。
ダイアログの下部にある [選択] を選択して続行します。		 A screenshot showing how to filter for and select the Microsoft Entra group for the application in the Select members dialog box.
Microsoft Entra グループが、[ロールの割り当ての追加] 画面に選択済みとして表示されます。

[レビューと割り当て] を選択して最終ページに移動し、もう一度レビューと割り当てを行ってプロセスを完了します。		 A screenshot showing the completed Add role assignment page and the location of the Review + assign button used to complete the process.

3 - VS Code、Azure CLI、または Azure PowerShell を使用して Azure にサインインする

開発者のワークステーションでターミナルを開き、Azure PowerShell から Azure にサインインします。

Connect-AzAccount

4 - アプリケーションに DefaultAzureCredential を実装する

Azure SDK クライアント オブジェクトを Azure に対して認証するには、アプリケーションで DefaultAzureCredential パッケージから @azure/identity クラスを使用する必要があります。 このシナリオでは、DefaultAzureCredential によって、開発者が VS Code Azure Tools 拡張機能、Azure CLI、または Azure PowerShell を使用して Azure にサインインしているかどうかが順番に確認されます。 開発者がこれらのツールのいずれかを使用して Azure にサインインしている場合、ツールへのサインインに使用される資格情報は、アプリによって Azure に対する認証に使用されます。

まず、@azure/identity パッケージを アプリケーションに追加します。

npm install @azure/identity

次に、アプリで Azure SDK クライアント オブジェクトを作成する JavaScript コードの場合、次のことが必要になります。

  1. DefaultAzureCredential モジュールから @azure/identity クラスをインポートします。
  2. DefaultAzureCredential オブジェクトを作成します。
  3. Azure SDK クライアント オブジェクト コンストラクターに DefaultAzureCredential オブジェクトを渡します。

この例を次のコード セグメントに示します。

import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';

// Acquire a credential object
const tokenCredential = DefaultAzureCredential();

const blobServiceClient = BlobServiceClient(
        `https://${accountName}.blob.core.windows.net`,
        tokenCredential
);

DefaultAzureCredential では、アプリ用に構成された認証メカニズムを自動的に検出し、Azure に対してアプリを認証するために必要なトークンを取得します。 アプリケーションで複数の SDK クライアントを使用する場合は、各 SDK クライアント オブジェクトで同じ資格情報オブジェクトを使用できます。