次の方法で共有


Azure API Center ポータル ビューの有効化と表示 - VS Code 拡張機能

この記事では、エンタープライズ開発者に Azure API Center 用 Visual Studio Code 拡張機能の Azure API Center ポータル ビューへのアクセスを提供する方法について説明 します。 開発者はポータル ビューを使用して、Azure API センターで API を検出したり、API 定義を表示したり、API センター自体を管理したり、インベントリに API を追加したりするためのアクセス権がない場合に、必要に応じて API クライアントを生成できます。 API センター ポータル ビューへのアクセスは、Microsoft Entra ID と Azure ロールベースのアクセス制御を使用して管理されます。

ヒント

Visual Studio Code 拡張機能は、Azure API センターを管理するアクセス許可を持つ API 開発者にさらに多くの機能を提供します。 たとえば、API 開発者は、API センターで直接、または CI/CD パイプラインを使用して API を登録できます。 詳細情報

前提条件

API センター管理者の場合

  • Azure サブスクリプション内の API センター。 まだ作成していない場合は、「クイック スタート: API センターを作成する」を参照してください。

  • Azure サブスクリプションに関連付けられている Microsoft Entra テナントでアプリ登録を作成するためのアクセス許可と、API センター内のデータへのアクセス権を付与するためのアクセス許可。

アプリ開発者の場合

  • Visual Studio Code 用 Azure API Center 拡張機能

    注記がある一部の機能は、Azure API Center 拡張機能のプレリリース バージョンでのみ使用できます。 Visual Studio Code Marketplace から拡張機能をインストールする場合、リリース バージョンまたはプレリリース バージョンを選択してインストールできます。 拡張機能ビューで拡張機能の [管理] ボタンのコンテキスト メニューを使用して、いつでも 2 つのバージョンを切り替えることができます。

次の Visual Studio Code 拡張機能は省略可能です。

API センター管理者が API センター ポータル ビューへのアクセスを有効にする手順

次のセクションでは、API センター管理者がエンタープライズ開発者が API センター ポータル ビューにアクセスできるようにする手順について説明します。

Microsoft Entra アプリ登録を作成する

まず、Microsoft Entra ID テナントでアプリ登録を構成します。 アプリの登録により、API センター ポータルは、サインインしているユーザーの代わりに API センターからデータにアクセスできます。

API Center では、アプリの登録を自動的に設定することも、アプリの登録を手動で作成することもできます。

アプリの登録を自動的に設定する

アプリの登録を自動的に設定するには、次の手順に従います。

  1. Azure portal で、API センターに移動します。
  2. 左側のメニューで、 API センター ポータル>Settings を選択します。
  3. [ ID プロバイダー ] タブで、[ セットアップの開始] を選択します。
  4. [保存と発行] を選択します

アプリの登録を手動で設定する

アプリの登録を手動で作成する場合は、次の手順に従います。

  1. Azure portal で、[Microsoft Entra ID]>[アプリの登録] の順に移動します。

  2. [+ 新規登録] を選択します。

  3. [アプリケーションを登録] ページで、次のように値を設定します。

    1. 名前api-center-portal などのわかりやすい名前に設定する
    2. [サポートされているアカウントの種類] で、[この組織ディレクトリに含まれるアカウント (シングル テナント)] を選択します。
    3. [リダイレクト URI] で、[シングルページ アプリケーション (SPA)] を選択し、URI を設定します。 API Center ポータルのデプロイの URI を、次の形式で入力します: https://<service-name>.portal.<___location>.azure-api-center.ms<service name><___location>は、API センターの名前とデプロイ先の場所 (例: https://myapicenter.portal.eastus.azure-api-center.ms) に置き換えます。
    4. 登録 を選択します。

VS Code 拡張機能の追加のリダイレクト URI を構成する

Api Center の Visual Studio Code 拡張機能で API センター ポータル ビューを有効にする場合は、アプリの登録で次のリダイレクト URI も構成します。

  1. Azure portal で、アプリの登録に移動します。

  2. [ 管理>認証 ] ページで、[ プラットフォームの追加 ] を選択し、[ モバイル アプリケーションとデスクトップ アプリケーション] を選択します。

  3. 次の 3 つのカスタム リダイレクト URI を構成します。
    https://vscode.dev/redirect
    http://localhost
    ms-appx-web://Microsoft.AAD.BrokerPlugin/<application-client-id>

    <application-client-id>を、このアプリのアプリケーション (クライアント) ID に置き換えます。 この値は、アプリ登録の [概要 ] ページで確認できます。

Microsoft Entra ユーザーとグループによる API センター ポータル ビューへのサインインを有効にする

エンタープライズ開発者は、API センターの API センター ポータル ビューを表示するには、Microsoft アカウントでサインインする必要があります。 必要に応じて、Microsoft Entra テナントに開発者を追加または招待します。

サインインを有効にするには、組織内のユーザーまたはグループに Azure API Center データ閲覧者 ロールを割り当てます。スコープは API センターです。

重要

既定では、API センターの管理者と API センターの他の管理者は、API センター ポータルで API にアクセスできません。 管理者に Azure API センター データ閲覧者ロールを必ず割り当ててください。

ユーザーとグループにロールを割り当てるための詳細な前提条件と手順については、「Azure portal を使用して Azure ロールを割り当てる」を参照してください。 簡単な手順を次に示します。

  1. Azure portal で、API センターに移動します。
  2. 左側のメニューで、[アクセス制御 (IAM)]>[+ ロールの割り当ての追加] の順に選択します。
  3. [ロールの割り当ての追加] ペインで、次のように値を設定します。
    1. [ロール] ページで、[Azure API センター データ閲覧者] を検索して選択します。 [次へ] を選択します。
    2. [メンバー] ページの [アクセスの割り当て先] で、[ユーザー、グループ、またはサービス プリンシパル]>[+ メンバーの選択] の順に選択します。
    3. [メンバーの選択] ページで、ロールを割り当てるユーザーまたはグループを検索して選択します。 [選択][次へ] の順にクリックします。
    4. ロールの割り当てを確認し、[レビューと割り当て] を選択します。

新しいユーザーのアクセス構成を効率化するには、Microsoft Entra グループにロールを割り当て、動的グループのメンバーシップの規則を構成することをお勧めします。 詳細については、「Microsoft Entra ID で動的グループを作成または更新する」を参照してください。

ポータルへのアクセスを構成した後、構成済みのユーザーはポータルにサインインし、API センターで API を表示できます。

ポータルにサインインする最初のユーザーは、API Center ポータル アプリの登録によって要求されたアクセス許可に同意するように求められます。 その後、他の構成済みユーザーは同意を求められません。

エンタープライズ開発者が API センター ポータル ビューにアクセスするための手順

開発者は、次の手順に従って、Visual Studio Code 拡張機能を使用して API センター ポータル ビューに接続してサインインできます。 API センターに接続するための設定は API センター管理者が行う必要があります。 接続後、開発者は API センターで API を検出して使用できます。

API センターに接続する

  1. Visual Studio Code の左側の [アクティビティ] バーで、[API Center] を選択します。

    アクティビティ バーの API Center アイコンのスクリーンショット。

  2. Ctrl + Shift + P のキーボード ショートカットを使ってコマンド パレットを開きます。 「Azure API Center: Connect to an API Center」と入力し、Enter を押します。

  3. プロンプトに応答して、次の情報を入力します。

    1. API センターのランタイム URL で、形式は <service name>.data.<region>.azure-apicenter.ms (先頭に https:// を付けないでください)。 例: contoso-apic.data.eastus.azure-apicenter.ms。 このランタイム URL は、Azure portal ビューの API センターの [概要 ] ページに表示されます。

    2. 前のセクションで管理者によって構成されたアプリ登録のアプリケーション (クライアント) ID。

    3. 前のセクションで管理者によって構成されたアプリ登録のディレクトリ (テナント) ID。

    ヒント

    API センター管理者は、上記の接続の詳細を開発者に提供するか、次の形式で直接リンクを指定する必要があります。
    vscode://apidev.azure-api-center?clientId=<Client ID>&tenantId=<tenant ID>&runtimeUrl=<service-name>.data.<region>.azure-apicenter.ms

    API センターに接続すると、API センターの名前が API センター ポータル ビューに表示されます。

  4. API センターの API を表示するには、API センター名の下で [Azure にサインイン] を選択します。 サインインは、API センターで Azure API Center データ閲覧者ロールが割り当てられた Microsoft アカウントで可能です。

    API Center 拡張機能の API センター ポータル ビューのスクリーンショット。

  5. サインインした後、[API] を選択して API センターの API を一覧表示します。 [API] を展開して、そのバージョンと定義について確認します。

    API Center 拡張機能の API Center API 定義のスクリーンショット。

  6. アクセスが構成されている場合は、上記の手順を繰り返して、他の API センターに接続します。

API センター ポータル ビューで API を検出して使用する

API センター ポータル ビューは、エンタープライズ開発者が API の詳細を検出し、API クライアント開発を開始するのに役立ちます。 開発者は、API センター ポータル ビューで API 定義を右クリックすることで、次の機能にアクセスできます。

  • API 仕様ドキュメントのエクスポート - 定義から API 仕様をエクスポートし、ファイルとしてダウンロードします
  • API クライアントの生成 - Microsoft Kiota 拡張機能を使用して、好みの言語の API クライアントを生成します
  • Markdown の生成 - API ドキュメントを Markdown 形式で生成します
  • OpenAPI ドキュメント - API 定義のドキュメントを表示し、Swagger UI で操作を試すことができます (OpenAPI 定義でのみ使用可能)

言語モデル ツールを使用する

Azure API Center 拡張機能のプレリリース バージョンでは、API Center ポータル ビューにアクセスできる開発者は、GitHub Copilot のエージェント モードで使用する API Center 言語モデル ツールを追加できます。 エージェント モードでのツールの使用について詳しくは、こちらをご覧ください

API センター ツールをエージェント モードで使用すると、API と API のバージョン、API の定義と仕様、デプロイなどを自然言語プロンプトを使用して検索できます。

GitHub Copilot のエージェント モードで API センター言語モード ツールを追加して使用するには:

  1. 前のセクションで説明したように、API センターに接続します。

  2. Visual Studio Code で GitHub Copilot Chat を開きます。

  3. GitHub Copilot チャットのモードをエージェントに設定 します

  4. チャット ウィンドウで [ツール ] アイコンを選択します。

    Visual Studio Code の GitHub Copilot チャット ウィンドウのスクリーンショット。

  5. チャットで使用できる 1 つ以上の API センター ツールを選択します。

    Visual Studio Code で API センター ツールを選択しているスクリーンショット。

  6. チャット ウィンドウに、使用可能なツールを使用するためのプロンプトを入力します。 例えば次が挙げられます。

    Find potential MCP servers for a project I'm working on. I need the deployment URLs from my API center of any MCP servers that can run code snippets.
    
  7. GitHub Copilot Chat からの応答を確認します。 会話を続けて結果を絞り込んだり、フォローアップの質問をしたりします。

トラブルシューティング

Azure にサインインできない

API Center ポータル ビューで [Azure サインイン] を選択した後に、Azure API Center データ閲覧者ロールが割り当てられているユーザーがサインイン フローを完了できない場合は、接続の構成に問題がある可能性があります。

Microsoft Entra ID で構成したアプリ登録の設定を確認します。 アプリ登録のアプリケーション (クライアント) ID とディレクトリ (テナント) ID の値と API センターのランタイム URL を確認します。 その後、API センターへの接続をもう一度設定します。