Azure Static Web Apps で静的サイトに認証を追加する

この記事は、最初のサイトを Azure Static Web Apps にデプロイする方法を示すシリーズのパート 2 です。 以前は、任意の Web フレームワークを使用して静的サイトを作成しデプロイしていました。

この記事では、クラウドにデプロイする前に、サイトに認証を追加し、サイトをローカルで実行します。

前提条件

このチュートリアルは前のチュートリアルに続き、同じ前提条件が適用されます。

認証と権限承認

Azure Static Web Apps を使用すると、セキュリティ関連のコードを記述することなく、Microsoft Entra や Google などの一般的な認証プロバイダーを簡単に使用できます。

Note

必要に応じて、カスタム プロバイダーを登録し、カスタム ロールを割り当てることで、バックエンド API を使用する際に、よりきめ細かい制御を行うことができます。

この記事では、認証に Microsoft Entra ID を使用するようにサイトを構成します。

認証を追加する

最後の記事では、staticwebapp.config.json ファイルを作成しました。 このファイルは、認証を含む、Azure Static Web Apps の多くの機能を制御します。

1. 次の構成に一致するように staticwebapp.config.json を更新します。

   {
     "navigationFallback": {
       "rewrite": "/index.html"
     },
     "routes": [
       {
         "route": "/*",
         "allowedRoles": [ "authenticated" ]
       }
     ],
     "responseOverrides": {
       "401": {
         "statusCode": 302,
         "redirect": "/.auth/login/aad"
       }
     }
   }
   

   routes セクションでは、名前付きロールへのアクセスを制限できます。 定義済みのロールには、authenticated と anonymous の 2 つがあります。 接続されたユーザーに許可されたロールがない場合、サーバーは "401 Unauthorized" 応答を返します。

   responseOverrides セクションの値は、認証されていないユーザーにサーバー エラーを表示する代わりに、ブラウザーがサインイン ページにリダイレクトされるようにサイトを構成します。

2. サイトをローカルで実行します。

   サイトをローカルで起動するには、Static Web Apps CLI start コマンドを実行します。

   npx swa start
   

   このコマンドは、http://localhost:4280 で Azure Static Web Apps エミュレーターを起動します。

   この URL は、サービスの起動後にターミナル ウィンドウに表示されます。

3. サイトに移動する URL を選択します。

   ブラウザーでサイトを開くと、ローカル認証サインイン ページが表示されます。

   

   ローカル認証サインイン ページには、外部サービスを必要としない、実際の認証エクスペリエンスのエミュレーションが用意されています。 ユーザー ID を作成し、この画面からユーザーに適用するロールを選択できます。

4. ユーザー名を入力し、Login を選択します。

   認証が完了すると、サイトが表示されます。

サイトを Azure にデプロイする

最後のチュートリアルと同じ方法でサイトをデプロイします。

1. サイトを構築します。

   npx swa build
   

2. 静的 Web アプリにサイトをデプロイします。

   npx swa deploy --app-name swa-demo-site
   

   デプロイが完了すると、サイトの URL が表示されます。 サイト URL を選択して、ブラウザーでサイトを開きます。 標準の Microsoft Entra ID サインイン ページが表示されます。

   

   Microsoft アカウントでサインインします。

リソースをクリーンアップする (省略可能)

他のチュートリアルを続行しない場合は、Azure リソース グループとリソースを削除します。

az group delete -n swa-tutorial

リソース グループを削除すると、そのグループに含まれるすべてのリソースが削除されます。 この操作は元に戻せません。

関連するコンテンツ

• 認証と権限承認
• カスタム認証