次の方法で共有

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

  • [アーティクル]

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

.env ファイルからサービス プリンシパルを取得し、その ID を使用して Azure リソースに接続するローカル開発アプリを実行している図。

開発者の Azure 資格情報を使用してローカル開発中にアプリが Azure に対して認証されるようにするには、開発者が Visual Studio 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] ページに移動します。 Azure portal の上部にある検索バーを使用して Microsoft Entra ID ページを検索し、移動する方法を示すスクリーンショット。
[Microsoft Entra ID] ページで、左側のメニューから [グループ] を選択します。 Microsoft Entra ID の既定のディレクトリ ページの左側のメニューにある「グループ」メニュー項目の場所を示すスクリーンショット。
[すべてグループ] ページで、[新しいグループ] を選択します。 [すべてのグループ] ページの [新しいグループ] ボタンの場所を示すスクリーンショット。
[新しいグループ] ページで、次の操作を行います。
  1. [グループの種類] → [セキュリティ]。
  2. グループ名 →通常はアプリケーション名から作成される、セキュリティ グループの名前です。 また、グループの目的も示すために、グループの名前に local-dev のような文字列を含めるとわかりやすくなります。
  3. グループの説明 → グループの目的の説明。
  4. [メンバー] の下の [メンバーが選択されていません] リンクを選択して、グループにメンバーを追加します。
 新しい Microsoft Entra グループの作成方法を示すスクリーンショット。このグループにメンバーを追加するために選択するリンクの場所が強調表示されています。
[メンバーの追加] ダイアログ ボックスで、次の操作を行います。
  1. 検索ボックスを使用して、一覧で、ユーザー名の一覧をフィルター処理します。
  2. このアプリのローカル開発用に 1 人以上のユーザーを選択します。 オブジェクトを選択すると、そのオブジェクトはダイアログの下部にある [選択された項目] の一覧に移動されます。
  3. 完了したら、[選択] ボタンを選択します。
 グループに含める開発アカウントを選択する方法を示す [メンバーの追加] ダイアログ ボックスのスクリーンショット。
[新規グループ] ページに戻り、[作成] を選択して、グループを作成します。

グループが作成され、[すべてのグループ] ページに戻ります。 グループが表示されるまでに最大 30 秒かかる場合があり、Azure portal でのキャッシュのためにページの更新が必要になる場合があります。		 [作成] ボタンを選択してプロセスを完了する方法を示す [新しいグループ] ページのスクリーンショット。

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

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

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

ダイアログ ボックスの [リソース グループ] 見出しの下にあるリソース グループ名を選択して、リソース グループに移動します。		 Azure portal の上部にある検索ボックスを使って、ロール (アクセス許可) の割り当て対象のリソース グループを検索してそこに移動する方法を示すスクリーンショット。
リソース グループのページで、左側のメニューから [アクセス制御 (IAM)] を選択します。 アクセス制御 (IAM) メニュー項目の場所を示すリソース グループ ページのスクリーンショット。
[アクセス制御 (IAM)] ページで、次の操作を行います。
  1. [ロールの割り当て] タブを選択します。
  2. 上部のメニューから [+ 追加] を選択し、次に結果のドロップダウン メニューから [ロールの割り当ての追加] を選択します。
 [ロールの割り当て] タブへの移動方法と、ロールの割り当てをリソース グループに追加するボタンの場所を示すスクリーンショット。
[ロールの割り当ての追加] ページには、リソース グループで割り当てることができるすべてのロールが一覧表示されます。
  1. 検索ボックスを使用して、より管理しやすいサイズにリストをフィルター処理します。 この例では、Storage BLOB ロールをフィルター処理する方法を示します。
  2. 割り当てるロールを選択します。
    [次へ] を選択して、次の画面に進みます。
 リソース グループに追加するロールの割り当てを見つけるためにフィルター処理して選択する方法を示すスクリーンショット。
次の [ロールの割り当ての追加] ページでは、ロールを割り当てるユーザーを指定できます。
  1. [アクセスの割り当て先] で、[ユーザー、グループ、またはサービス プリンシパル] を選択します。
  2. [メンバー] で [+ メンバーの選択] を選択する
Azure portal の右側でダイアログ ボックスが開きます。		 Microsoft Entra グループにロールを割り当てる際に選択するラジオ ボタンと、ロールを割り当てるグループを選択する際に使用されるリンクを示すスクリーンショット。
[メンバーの選択] ダイアログで、次の操作を行います。
  1. [選択] テキスト ボックスを使用して、サブスクリプション内のユーザーとグループの一覧をフィルター処理できます。 必要に応じて、アプリ用に作成したローカル開発 Microsoft Entra グループの最初の数文字を入力します。
  2. アプリケーションに関連付けられているローカル開発 Microsoft Entra グループを選択します。
ダイアログの下部にある [選択] を選択して続行します。		 「メンバーの選択」ダイアログ ボックスでアプリケーションの Microsoft Entra グループをフィルター処理し選択する方法を示すスクリーンショット。
Microsoft Entra グループが、[ロールの割り当ての追加] 画面に選択済みとして表示されます。

[レビューと割り当て] を選択して最終ページに移動し、もう一度レビューと割り当てを行ってプロセスを完了します。		 完了した [ロールの割り当ての追加] ページと、プロセスを完了するために使用する [レビューと割り当て] ボタンの場所を示すスクリーンショット。

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 クライアント オブジェクトで同じ資格情報オブジェクトを使用できます。