Azure Static Web Appsの認証・認可環境をローカルで構築する
だいたいどのサービ スでも認証・認可って利用されると思うんですが、必須にもかかわらず、認証・認可周りって環境を整えるのが面倒だと思うのは自分だけではないはず・・・。
しかし、AzureのStatic Web AppsにはAzure側で認証・認可の機能を提供してくれます（MSサイト）。
これを使わない手はないってことで、意気揚々と実装したんですが、ローカルってどうやんねん？ってことで調査・構築できたので、メモメモ。
環境
バージョンとか
今回は以下の環境で実施しています。
| Angular | Node |
|---|---|
| 18.2.7 | 22.9.0 |
コンテナ開発でやっているので、Dockerが入っている方は是非Cloneしてみてください（Github）
SPA
angularでng newをした状態が前提となります。
swaのインストール
static-web-apps-cliというcliが必要とのこと。
しかし、手順の通りにやると
bash: swa: command not found
ってなるので、今回はグローバル（-Dじゃなくて-g）で入れちゃいます(;´д｀)
$ npm install -g @azure/static-web-apps-cli
構築手順
基本的にはMS公式の通りです。
swa init
package.jsonと同じ階層で以下のコマンドを実行し、設定を行います
$ swa init
以下のように
? Choose a configuration name > workspace
と設定ファイルの名前を聞かれるので、好きなものを設定し、エンターを押す。
すると、多分package.jsonを読み取ってアプリの構成こんな感じでしょ？って提示があるので、
とりあえずY
Detected configuration for your app:
Framework(s): Angular
App location: .
Output location: dist/sample-auth-static-apps
API location:
API language:
API version:
Data API location:
App build command: npm run build
API build command:
App dev server command: npm start
App dev server URL: http://localhost:4200
API dev server URL:
? Are these settings correct? › (Y/n)
だいたいは上の設定でいいんですが、開発時にnpm run devとか設定してあった場合は、swa-cli.config.jsonのrunとかをそのコマンドに書き換えてあげないといけません。
この状態で以下のコマンドを実行するとswa-cli.config.jsonのrunのコマンドが内部的に実行され、ブラウザが立ち上がる状態になるはずです。
$ swa start
もし、実行しても動いてなくね？ってなったら、一度coinfigのrunに設定してあるコマンドを実行してみてください。
というのも、angularとかだと最初にオートコンプリートの設定とか聞かれるパターンもあるので、runの実行自体が正常に行われているかどうか確認が必要になります。
正常に完了するとlocalhost:4280にアクセスしてみると、SPAの画面になるかと思います（今回の環境では下図）。
authの設定をしてみる
azure static web appsのauthはログインのURLが~/.auth/login/xxxとなっており、xxxは例えばgithubになります。
試しにhttp://localhost:4280/.auth/login/githubへアクセスすると下図のような画面になるはずです。
ここで例えばUsernameをb0cchiとかに設定し、Loginボタンをクリックすることで認証状態になり、以下の画面のように遷移するはずです。
SPAからは~/.auth/meでユーザー情報が得られるので、ここでは、nameをとっています。
もちろん~/.auth/meへアクセスすると以下のようになっていることが確認できると思います。
これでローカルにてAzure Static Web Appsのauthの環境が整いました！
最後に
意外とログイン状態とログアウト状態で気にすることが多い昨今。サクッと開発環境を整えて本業をガツガツ進 めちゃってください。