編集

Azure Static Web Apps の認証と認可

  • 操作方法

警告

X (以前の Twitter) API ポリシーの変更により、アプリの事前構成済みプロバイダーの一部としてサポートを継続することはできません。 アプリでの認証/承認に引き続き X (以前の Twitter) を使用する場合は、カスタム プロバイダーを登録するためアプリ構成を更新します。

Azure Static Web Apps は、認証に GitHub、および Microsoft Entra ID を使用するために他のアクションや構成を必要としない、合理化された認証エクスペリエンスを提供します。

この記事では、既定の動作、サインインとサインアウトを設定する方法、認証プロバイダーをブロックする方法などについて説明します。

すべての事前構成済みプロバイダーを無効にするカスタム プロバイダーを登録できます。

前提条件

Azure Static Web Apps を使用した認証と認可については、次の既定値とリソースに注意してください。

既定値:

  • すべてのユーザーは、事前に構成されたプロバイダーで認証できます
    • GitHub
    • Microsoft Entra ID
    • 認証プロバイダーを制限するには、カスタム ルート規則によってアクセスをブロックします
  • サインイン後、ユーザーは anonymous ロールと authenticated ロールに属します。 ロールの詳細については、「ロールの管理」を参照してください

リソース:

  • staticwebapp.config.json ファイルでルールを定義して、許可されているユーザーが制限されたルートにアクセスできるようにします
  • 組み込みの招待システムを使用してユーザーのカスタム役割を割り当てる
  • API 関数を使用してサインイン時にユーザーにカスタム役割をプログラムで割り当てる
  • 認証と認可は、ルーティングの概念とはかなり重複していることを理解します。ルーティングの概念については、アプリケーション構成ガイドに詳しく説明されています
  • カスタム Microsoft Entra プロバイダーを構成して、特定の Microsoft Entra テナントへのサインインを制限します。 事前構成済みの Microsoft Entra プロバイダーを使用すると、任意の Microsoft アカウントでサインインできます。

サインインを設定する

Azure Static Web Apps では、/.auth システム フォルダーを使用して、承認関連の API へのアクセスが提供されています。 /.auth フォルダーの下のルートをエンド ユーザーに直接公開するのではなく、わかりやすい URL のルーティング規則を作成します。

次の表を使用して、プロバイダー固有のルートを確認します。

承認プロバイダー サインイン ルート
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

たとえば、GitHub でサインインするには、次のようなリンクを含めることができます。

<a href="/.auth/login/github">Login</a>

複数のプロバイダーをサポートすることを選択した場合は、それぞれに対応するプロバイダー固有のリンクを Web サイト上に公開します。 ルート規則を使用して、既定のプロバイダーを /login のようなわかりやすいルートにマップします。

{
  "route": "/login",
  "redirect": "/.auth/login/github"
}

サインイン後のリダイレクトを設定する

次の例のように、post_login_redirect_uri クエリ文字列パラメーターで完全修飾 URL を指定することにより、ログイン後にユーザーを特定のページに戻します。

<a href="/.auth/login/github?post_login_redirect_uri=https://zealous-water.azurestaticapps.net/success">Login</a>

You can also redirect unauthenticated users back to the referring page after they sign in. To configure this behavior, create a response override rule that sets post_login_redirect_uri to .referrer, like in the following example.

{
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github?post_login_redirect_uri=.referrer",
      "statusCode": 302
    }
  }
}

サインアウトの設定

/.auth/logout ルートでは、Web サイトからユーザーをサインアウトします。 次の例に示すように、サイト ナビゲーションにユーザーがサインアウトできるリンクを追加することが可能です。

<a href="/.auth/logout">Log out</a>

ルート規則を使用して、/login のようなわかりやすいルートにマップします。

{
  "route": "/logout",
  "redirect": "/.auth/logout"
}

サインアウト後のリダイレクトを設定する

サインアウト後にユーザーを特定のページに戻すには、post_logout_redirect_uri クエリ文字列パラメーターに URL を指定します。

認証プロバイダーをブロックする

すべての認証プロバイダーが有効になっているため、アプリで認証プロバイダーを使用できないように制限できます。 たとえば、お使いのアプリ上で、電子メール アドレスを公開するプロバイダーのみに統一したい場合があります。

プロバイダーをブロックするには、ルート規則を作成して、ブロックされたプロバイダー固有のルートへの要求に 404 状態コードを返すことができます。 たとえば、プロバイダーとして Twitter を制限するには、次のルート規則を追加します。

{
  "route": "/.auth/login/twitter",
  "statusCode": 404
}

個人データの削除

エンド ユーザーとしてアプリケーションに同意すると、ID プロバイダーに応じてメール アドレスまたはユーザー名に、そのアプリケーションからアクセスできるようになります。 この情報が提供されたら、アプリケーションの所有者は、個人データをどのように管理するかを決定できます。

この情報をシステムから取り消すには、エンド ユーザーは、個々の Web アプリの管理者に連絡する必要があります。

Azure Static Web Apps プラットフォームから個人データを削除し、今後の要求でプラットフォームからこの情報が提供されないようにするには、以下の URL を使用して要求を送信します。

https://identity.azurestaticapps.net/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

To prevent the platform from providing this information on future requests to individual apps, submit a request using the following URL:

https://<WEB_APP_DOMAIN_NAME>/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

If you're using Microsoft Entra ID, use aad as the value for the <AUTHENTICATION_PROVIDER_NAME> placeholder.

Tip

For information about general restrictions and limitations, see Quotas.

次のステップ

ルートを使用して、許可されたロールを設定してページ アクセスを制御する