Azure Static Web AppsのサイトにGitHub認証でアクセス制限をかける方法

はじめに

GitHub認証でアクセス制限をかけてみました。

開発環境

  • GitHub
  • Windows10
  • Azure

サンプルサイト

bandicam 2021-05-11 13-45-06-347.jpg

bandicam 2021-05-11 13-45-10-828.jpg

やり方

staticwebapp.config.jsonをルートフォルダに追加

bandicam 2021-05-11 13-55-08-615.jpg

これでadminページにはアクセスできなくなります。
bandicam 2021-05-11 14-02-53-219.jpg

ユーザーをロールに追加

AzureのStaticAppにアクセスしてロール管理→招待からリンクを作成
bandicam 2021-05-11 14-10-35-383.jpg

招待リンクにアクセスして同意
image.png

ログイン/ログアウト リンクを追加

ロールを付与したアカウントでログインするとadminページにアクセスすることができるようになります。
image.png

image.png

ロールが付与されていないアカウントで認証を行ってもアクセスすることはできません。
image.png

追記

設定ファイルを上のようにすると全ページにフィルターをかけることができます。
この場合ログインリンクへのアクセスは直urlで行うことになります。