オンプレミスの JavaScript アプリから Azure リソースへの認証

  • [アーティクル]

Azure の外部 (オンプレミスやサードパーティのデータ センターなど) でホストされているアプリは、Azure リソースにアクセスするときに、アプリケーション サービス プリンシパルを使用して Azure に対する認証を行う必要があります。 アプリケーション サービス プリンシパル オブジェクトは、Azure のアプリ登録プロセスを使用して作成されます。 アプリケーション サービス プリンシパルが作成されると、アプリのクライアント ID とクライアント シークレットが生成されます。 クライアント ID、クライアント シークレット、テナント ID を環境変数に保存して、Azure SDK for JavaScript が環境変数を使用して実行時に Azure に対してアプリを認証できるようにします。

アプリが実行されている環境 (テスト、ステージ、運用環境など) ごとに異なるアプリ登録を作成する必要があります。 これにより、各サービス プリンシパルに対して環境固有のリソースのアクセス許可を構成し、ある環境にデプロイされたアプリが別の環境の一部である Azure リソースと通信しないようにすることができます。

1 - Azure にアプリケーションを登録する

アプリは、Azure portal または Azure CLI を使用して Azure に登録できます。

Azure portal にサインインして、次の手順を実行します。

手順 Screenshot
Azure portal で、次の操作を行います。
  1. Azure portal の上部にある検索バーに「アプリの登録」と入力します。
  2. 検索バーの下に表示されるメニューの [サービス] 見出しの下にある [アプリの登録] と書かれた項目を選択します。
 A screenshot showing how to use the top search bar in the Azure portal to find and navigate to the App registrations page.
[アプリの登録] ページで、[+ 新規登録] を選択します。 A screenshot showing the location of the New registration button in the App registrations page.
[アプリケーションの登録] ページで、次のようにフォームに入力します。
  1. 名前 → Azure でのアプリ登録の名前を入力します。 この名前には、アプリの登録の対象となるアプリ名と環境 (テスト、運用) を含めることをお勧めします。
  2. サポートされているアカウントの種類 → この組織のディレクトリ内のアカウントのみ。
[登録] を選択してアプリを登録し、アプリケーション サービス プリンシパルを作成します。		 A screenshot to fill out Register by giving the app a name and specifying supported account types as accounts in this organizational directory only.
お使いのアプリの [アプリの登録] ページで、次の操作を行います。
  1. アプリケーション (クライアント) ID → これは、ローカル開発中にアプリが Azure にアクセスするために使用するアプリ ID です。 この値は、後の手順で必要になるので、テキスト エディターで一時的な場所にコピーします。
  2. ディレクトリ (テナント) ID → この値は、Azure に対して認証するときにもアプリで必要になります。 この値も後の手順で必要になるので、テキスト エディターで一時的な場所にコピーします。
  3. クライアント資格情報 → アプリが Azure に対して認証して Azure サービスを使用する前に、アプリのクライアント資格情報を設定する必要があります。 [証明書またはシークレットの追加] を選択して、アプリの資格情報を追加します。
 A screenshot of the App registration after completion. This screenshot shows the application and tenant IDs, which will be needed in a future step.
[証明書とシークレット] ページで、[+ 新しいクライアント シークレット] を選びます。 A screenshot showing the location of the link to use to create a new client secret on the certificates and secrets page.
[クライアント シークレットの追加] ダイアログがページの右側から表示されます。 このダイアログで、次の操作を行います。
  1. 説明 → 現在の値を入力します。
  2. 有効期限 → "24 か月"の値を選択します。
[追加] を選択してシークレットを追加します。

重要: シークレットの有効期限の前に予定表にアラームを設定します。 これにより、事前に新しいシークレットを追加し、このシークレットの有効期限が切れる前にアプリを更新して、アプリのサービスが中断しないようにできます。		 A screenshot showing the page where a new client secret is added for the application service principal created by the app registration process.
証明書&シークレット ページには、クライアント シークレットの値が表示されます。

この値をテキストエディタの一時的な場所にコピーします。これは、将来の手順で必要になるためです。

重要: この値が表示されるのはこのタイミングだけです。 このページを終了または更新すると、この値を再度表示できなくなります。 このクライアント シークレットを無効にせずに別のクライアント シークレットを追加できますが、この値は再び表示されません。		 A screenshot showing the page with the generated client secret.

2 - アプリケーション サービス プリンシパルにロールを割り当てる

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

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

ダイアログ ボックスの [リソース グループ] 見出しの下にあるリソース グループ名を選択して、リソース グループに移動します。		 A screenshot showing 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. [選択] テキスト ボックスを使用して、サブスクリプション内のユーザーとグループの一覧をフィルター処理できます。 必要に応じて、アプリ用に作成したサービス プリンシパルの最初の数文字を入力して、一覧をフィルター処理します。
  2. アプリケーションに関連付けられているサービス プリンシパルを選択します。
ダイアログの下部にある [選択] を選択して続行します。		 A screenshot showing how to filter for and select the Microsoft Entra group for the application in the Select members dialog box.
サービス プリンシパルが、[ロールの割り当ての追加] 画面に選択済みとして表示されます。

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

3 - アプリケーションの環境変数を構成する

JavaScript アプリを実行するプロセスのAZURE_CLIENT_ID、AZURE_TENANT_ID、AZURE_CLIENT_SECRET 環境変数を設定して、実行時にアプリでアプリケーション サービス プリンシパルの資格情報を使用できるようにする必要があります。 DefaultAzureCredential オブジェクトでは、これらの環境変数でサービス プリンシパル情報を検索します。

AZURE_CLIENT_ID=<value>
AZURE_TENANT_ID=<value>
AZURE_CLIENT_SECRET=<value>

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

Azure SDK クライアント オブジェクトを Azure に対して認証するには、アプリケーションで @azure/identity パッケージの DefaultAzureCredential クラスを使用する必要があります。

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

npm install @azure/identity

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

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

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

// connect-with-default-azure-credential.js
import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';
import 'dotenv/config'

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
if (!accountName) throw Error('Azure Storage accountName not found');

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

上記のコードで DefaultAzureCredential オブジェクトがインスタンス化されると、DefaultAzureCredential では、Azure に接続するためのアプリケーション サービス プリンシパル情報の環境変数 AZURE_SUBSCRIPTION_ID、AZURE_TENANT_ID、AZURE_CLIENT_ID、AZURE_CLIENT_SECRET を読み取ります。