クイックスタート: Visual Studio Code 用 Microsoft Entra 外部 ID 拡張機能の使用を開始する (プレビュー)

  • [アーティクル]

コンシューマーおよびビジネス顧客アプリケーションに認証を統合することは、リソースと顧客データをセキュリティで保護するために不可欠です。 Visual Studio Code 用 Microsoft Entra 外部 ID 拡張機能を使うと、顧客 ID とアクセス管理 (CIAM) シナリオのアプリケーションに認証をすばやく追加できます。 提供されているアプリケーション サンプルを使うと、開発環境を離れることなく、アプリケーションの外部ユーザー向けにカスタマイズされたブランドのサインイン エクスペリエンスを設定する方法を確認できます。

拡張機能の概要を示すスクリーンショット。

この拡張機能には、ユーザーのために自動的にアプリケーションのテナントを作成し、準備する基本的なセットアップ機能があります。 また、アプリケーション ID などの値を構成ファイルに自動的に入力してセットアップ プロセスをよりスムーズにすることで、ワークフローを効率化します。

外部 ID は、Azure サブスクリプションに追加できるサービスです。 既にお持ちの場合は、外部 ID を簡単に含めることができます。 そうではない場合は、Visual Studio Code 内で Microsoft Entra 外部 ID の無料試用版を設定し、サンプル アプリの構成から始めます。

拡張機能をインストールする

Microsoft Entra 外部 ID 拡張機能は、Visual Studio Code Marketplace で入手できます。

  1. Visual Studio Code をまだインストールしていない場合は、Visual Studio Code をダウンロードし、インストール手順を完了します。
  2. Visual Studio Code を開きます。 左側のアクティビティ バーで、[拡張機能] ボタンを選びます。
  3. 拡張機能 Marketplace の検索ボックスで、「Microsoft Entra 外部 ID」を検索して選びます。
  4. [Microsoft Entra 外部 ID の使用を開始する] 概要ページで [インストール] ボタンを選びます。
  5. プロンプトが表示されたら、Visual Studio Code を再起動します。

拡張機能がインストールされたら、アクティビティ バーのアイコンを使って拡張機能にアクセスできます。

チュートリアルの拡張機能を開くオプションを示すスクリーンショット。

Visual Studio Code の [ようこそ] ページから拡張機能を開くこともできます。[ヘルプ]>[ようこそ] を選び、[チュートリアル] の下にある [Microsoft Entra 外部 ID の使用を開始する] を選びます。 拡張機能の一覧を展開するには、必要に応じて [その他] を選びます。

外部 ID のセットアップの使用を開始する

Microsoft Entra 外部 ID 拡張機能を使うと、アプリと外部ユーザーのディレクトリを含む外部構成にテナントが作成されます。 この新しいテナントを既存の Azure サブスクリプションに追加できます。 また、Azure サブスクリプションをお持ちでない場合は、それが不要な試用版テナントを作成します (詳細)。

  • [Microsoft Entra 外部 ID の使用を開始する] ようこそページで、次のオプションを選びます。

    • まだ Azure アカウントをお持ちでない場合は、[無料試用版の設定] を選びます。
    • 既に Azure アカウントをお持ちの場合は、[Azure サブスクリプションの使用] を選びます。

無料試用版を設定する

  1. [無料試用版の設定] を選びます。

  2. サインインの確認メッセージで、[許可] を選びます。

  3. 新しいブラウザー ウィンドウが開きます。 個人用アカウント、Microsoft アカウント (MSA)、または GitHub アカウントを使ってサインインします。 サインインしたら、ブラウザー ウィンドウを閉じます。

  4. Visual Studio Code に戻ります。 [テナントをどこに配置する必要がありますか?] メニューで、テナント データの場所を選びます。 この選択を後から変更することはできません。

  5. テナントの名前を入力します。

    テナント名フィールドのスクリーンショット。

  6. 拡張機能により、試用版テナントが作成されます。 [表示]>[出力] ウィンドウを開くと、進行状況を確認できます。 プロセスが完了すると、"テナントが作成されました" と表示されます。

自分のサブスクリプションを使う

  1. [自分のサブスクリプションを使用する] を選びます。

  2. アカウントに複数のテナントが関連付けられている場合は、[ディレクトリの選択] メニューが表示されます。 使うサブスクリプションに関連付けられたディレクトリ (テナント) を選びます。

    ディレクトリ フィールドのスクリーンショット。

    Note

    "使用できるサブスクリプションがありません" というメッセージが表示された場合は、代わりに無料試用版を設定できます。

  3. ブラウザー ページが開き、アカウントにサインインできます。 サインインしたら、Visual Studio Code に戻ります。

  4. [サブスクリプションの追加] メニューで、お使いのサブスクリプションを選びます。

  5. [リソース グループの選択] メニューで、リソース グループを選びます。

  6. [テナントをどこに配置する必要がありますか?] メニューで、テナント データの場所を選びます。 この選択を後から変更することはできません。

  7. テナントの名前を入力し、Enter キーを押してテナントを作成します。

    試用版のテナント名フィールドのスクリーンショット。

    Note

    テナント作成プロセスは、最長で 30 分かかる場合があります。 テナントが作成されたら、Microsoft Entra 管理センターと Azure portal の両方でそれにアクセスできます。

ユーザーのサインインを設定する

ユーザーが自分のメール アドレスとパスワードまたはワンタイム パスコードを使ってサインインできるようにアプリを構成できます。 会社ロゴの追加、背景色の変更、またはサインイン レイアウトの調整によって、ユーザー エクスペリエンスの外観をデザインすることもできます。 これらの変更は、この新しいテナント内のすべてのアプリの外観に適用されます。

  1. [ユーザーのサインインを設定する] で、[サインインとブランドを設定する] を選びます。

    サインインとブランド化の設定手順を示すスクリーンショット。

  2. 新しいテナントにサインインするように求められます。 [許可] を選び、開いたブラウザー ウィンドウで現在使っているアカウントを選んでサインインします。 Visual Studio Code に戻ります。

  3. 上部の [ユーザーのサインイン方法] メニューで、ユーザーが使用できるようにするサインイン方法 ([メール アドレスとパスワード] または [メール アドレスとワンタイム パスコード]) を選びます。

    サインイン方法を示すスクリーンショット。

  4. [OK] を選択します。

  5. サインイン ページをブラウザー ウィンドウ内のどこに表示するかを選びます。[中央揃え] または [右揃え] のいずれかです。

    サインイン レイアウトの選択肢を示すスクリーンショット。

  6. サインアップ ページの背景色を選びます。

    背景色を示すスクリーンショット。

  7. 次に、エクスプローラー ウィンドウが開いたら、会社のロゴを追加できます。 会社のロゴ ファイルを参照し、[アップロード] を選びます。

    Note

    画像の要件は次のとおりです。

    • 画像サイズ: 245 x 36 ピクセル
    • ファイルの最大サイズ: 50 KB
    • ファイルの種類: 透過 PNG または JPEG

  8. メッセージ "サインイン フローの構成中" が表示されます。 [出力] ウィンドウで進行状況を確認できます。 構成が完了すると、"ユーザー フローのセットアップが完了しました" というメッセージが表示されます。

サンプル アプリを設定して実行する

この拡張機能には、さまざまなアプリケーションの種類や開発言語で認証がどのように実装されるかを示すコード サンプルがいくつか含まれています。 拡張機能内からシングル ページ アプリケーション (JavaScript、React、Angular) サンプルを選ぶと、拡張機能により、サインイン エクスペリエンスに合わせてアプリケーションが自動的に構成されます。

  1. [サンプル アプリを設定して実行する] を選び、[サンプル アプリを設定する] ボタンを選びます。

    サンプル アプリを設定して実行する手順のスクリーンショット。

  2. メニューでダウンロードするアプリの種類を選びます。 もう一度アカウントを選ぶように求められたら、これまで使っていたものと同じアカウントを選びます。

    アプリの選択のスクリーンショット。

  3. エクスプローラー ウィンドウが開くので、サンプル リポジトリの保存場所を選択できます。 フォルダーを選び、[ここにリポジトリをダウンロードする] を選びます。

  4. ダウンロードが完了すると、新しい Visual Studio Code プロジェクト ワークスペースが開き、ダウンロードしたアプリ フォルダーがエクスプローラーに表示されます。

  5. Visual Studio Code ウィンドウで新しいターミナルを開きます。

  6. 上部のメニューで、[実行]>[デバッグなしで実行] を選びます。 デバッグ コンソールには、起動スクリプトの進行状況が表示されます。 プロジェクトが設定され、ビルド スクリプトが実行されるまでに少し時間がかかります。

拡張機能によってアプリケーションがダウンロードされると、自動的に Microsoft Authentication Library (MSAL) 構成が更新され、新しいテナントに接続され、設定したエクスペリエンスが使われます。 これ以上の構成は必要ありません。プロジェクトがビルドされたらすぐにアプリケーションを実行できます。 たとえば、authConfig ファイルでは、clientId がアプリケーション ID に設定され、authority が新しいテナントのサブドメインに設定されます。

auth-config ファイルのスクリーンショット。

エクスペリエンスを実行する

セットアップが完了したら、ブラウザーにアプリケーションのローカル ホスト リダイレクト URI を入力して、サインイン エクスペリエンスを試してください。 リダイレクト URL は、アプリケーションの README.md ファイルに記載されています。

エクスプローラー ビューを使う

エクスプローラー ビューには、テナント内の登録済みアプリケーションと認証ユーザー フローが表示されます。 構成情報を表示することや、Microsoft Entra 管理センターに直接移動してリソースをさらに構成または管理することができます。 エクスプローラー ビューにアクセスするには、アクティビティ バーのアイコンを選んで Microsoft Entra 外部 ID 拡張機能を開きます。

リソース管理

プロジェクト リソースを表示するには、左側のパネルの [リソースの管理] の下にあるノードを展開します。

エクスプローラー ビューのスクリーンショット。

エクスプローラー ビューでは、リソースを選び、Microsoft Entra 管理センターに直接移動して、リソースを管理または構成できます。 たとえば、アプリケーションを右クリックし、[管理センターで開く] を選びます。 サインインするように求められ、Microsoft Entra 管理センターが開き、そのアプリケーションのアプリ登録ページが直接表示されます。

[管理センターで開く] オプションのスクリーンショット。

作業の開始アクション

[作業の開始] セクションでは、無料試用版のドキュメントにアクセスすることや、拡張機能のチュートリアルを開かずにサインイン エクスペリエンスの構成ページやサンプル アプリのダウンロード ページに直接移動することができます。

チュートリアルを開始するための左側メニュー オプションのスクリーンショット。

次のステップ

外部 ID の無料試用版テナントの詳細を参照してください。