Azure Static Web Appsで作成した静的サイトに簡易的なログイン機能を追加してみようと思います。

認証について

Azure Static Web Appsには認証と承認のための機能が用意されています。

標準でサポートしているプロバイダーは以下の通りです。
　　・　GitHub
　　・　Microsoft Entra ID

X (以前の Twitter)もサポート対象でしたが、APIの変更により、現在はカスタムプロバイダー登録が必要です。

サポートされているプロバイダーの場合、追加で認証の設定を行う必要はありません。
各プロバイダー用のログインルートへアクセスさせることでユーザのログインを可能とします。
各プロバイダーに対してアプリケーションの登録など必要ありません。

構成について

プロバイダーは「Microsoft Entra ID」を採用し、認証機能を追加していきます。

また、プログラムは、Reactのクイックスタートとして提供されているものに認証を追加していきたいと思います。
前回、静的サイトを作成したときにHelloWorldを表示させたプログラムです。

修正前の構成は以下の通りです。

react-basic
    ├── README.md
    ├── azure-static-web-apps-salmon-sky-056318b00.yml
    ├── package-lock.json
    ├── package.json
    ├── playwright.config.ts
    ├── public
    │　　├── favicon.ico
    │　　├── index.html
    │　　├── logo192.png
    │　　├── logo512.png
    │　　├── manifest.json
    │　　└── robots.txt
    ├── src
    │　　├── App.js
    │　　├── index.css
    │　　├── index.js
    │　　└── logo.svg
    ├── staticwebapp.config.json
    └── tests
        ├── Readme.md
        └── playwright.spec.ts

認証の設定

ここから実際に認証を設定していきたいと思います。
Azure Static Web AppsのプランはFreeのまま進めます。

「staticwebapp.config.json」はStatic Web Appsの構成を制御するために使用されます。
このファイルを使ってアプリケーションの動作や機能を設定することができます。

まず、認証を必須とする設定に変更していこうと思います。

現時点の「staticwebapp.config.json」は以下の通りです。
navigationFallbackは特定のルートが見つからない場合、index.htmlへ遷移します。

{
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

この設定の通り、どんなURLでアクセスしても必ずindex.htmlへ遷移します。

次回へ続きます。