Microsoft Entra 外部 ID の認証サンプルを要件別サンプルに追加する

[kharada7]

概要

2024年1月現在、Azure AD B2Cの後継としてMicrosoft Entra ID for customers(GA版の名称：Entra 外部 ID)がPublic Previewになっている。
AlesInfiny/maia#470 のサンプルをEntra 外部 IDに対応させたバージョンを、横並びにして要件別サンプルとして公開したい。

Maiaは以下で対応。

• Microsoft Entra 外部 ID の認証サンプルを要件別サンプルに追加する maia#472

完了条件

• Microsoft Entra 外部 ID の認証機能と連携したサンプルアプリケーションを要件別サンプルとして公開されていること
• 要件別サンプルの解説ページで、ある程度の構築手順が説明されていること
• 詳細な情報は、要件別サンプルに同梱するReadmeの中で解説していること
• Dresscaとの親和性が高い形式で、要件別サンプルのアプリケーションが構築されていること
• 要件別サンプルのページから、今回作成するサンプルアプリケーションをZipファイル形式でダウンロードできること（Zipファイルの作成や配置も、ワークフローの中で自動できに行われること）

[fkoyama]

Entra外部IDの認証サンプルの全体像検討

• Entra外部IDの認証サンプル追加にあたり、既存のAzure AD B2Cの認証サンプルを元に動作確認を実施
  ⇒基本的にはフロント側のauthentication-config.ts, バックエンド側のappsettings.jsonを修正して対応できることを確認
• 主にEntra外部IDのサンプルアプリ参照

動作確認手順

• 外部テナントを作成
  • https://learn.microsoft.com/ja-jp/entra/external-id/customers/quickstart-tenant-setup
• ユーザーフローを作成
  • https://learn.microsoft.com/ja-jp/entra/external-id/customers/how-to-user-flow-sign-up-sign-in-customers
• アプリケーションの登録
  • https://learn.microsoft.com/ja-jp/entra/identity-platform/quickstart-register-app
  • フロントエンド
    • サポートされているアカウントの種類 ：「この組織ディレクトリのみに含まれるアカウント」
    • プラットフォーム：SPA
    • リダイレクトURI：http://localhost:5173
  • バックエンド
    • サポートされているアカウントの種類 ：「この組織ディレクトリのみに含まれるアカウント」
• フロントエンドアプリをユーザーフローに追加
  • https://learn.microsoft.com/ja-jp/entra/external-id/customers/how-to-user-flow-add-application
• バックエンドアプリのAPI公開(委任されたアクセス許可 (スコープ) を追加する)
  • https://learn.microsoft.com/ja-jp/entra/identity-platform/quickstart-web-api-dotnet-protect-app?tabs=aspnet-core
• フロントエンドアプリにバックエンドアプリへのアクセス許可を与える
  • https://learn.microsoft.com/ja-jp/entra/identity-platform/quickstart-configure-app-access-web-apis#add-permissions-to-access-your-web-api
  • 管理者の同意を付与する
• authentication-config.ts, appsettings.jsonの値を修正する
  • https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial/tree/main/2-Authorization/0-call-api-vanillajs