編集

次の方法で共有

Azure Static Web Apps の認証と認可

  • 操作方法

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

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

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

警告

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

前提条件

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

既定値:

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

リソース:

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

サインインを設定する

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

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

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

たとえば、GitHub でサインインするには、次の例のような URL を使用できます。

<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 add this redirect, 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 状態コードを返すルート規則を作成します。 たとえば、プロバイダーとして X (旧 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.

次のステップ

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