こんにちは。最近娘に「慌てて転ばないようにね」とか「早く服着ないと風邪引くよ」と注意すると「転んでないよ？」「風邪引いてないよ？」と言い返すようになって、予防の概念を教えていかないとなと思った木村です。
先日、弊社松村がAzure Static Web Appsへのアクセスに認証をかけるという記事を書きました。
これでアクセス制限はできるのですが、もうちょっとお手軽に1つのパスワードで制限したいというケースもあると思います。
2022/3/17にプレビューになった以下の機能で実現できるのですが、早速試してみたので紹介したいと思います。
デプロイするコードの準備
認証がかかってることを確認したいだけなので以下のindex.htmlだけのものをデプロイします。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
Hello, Static Web App!
</body>
</html>
デプロイ方法は何を使っても構いませんが、今回私はgithubからのデプロイでやってみました。このファイルだけが含まれるgitリポジトリ「staticwebapp-test-emptyindexonly」を作成し、githubにプッシュします。
Azure Static Web Appsを準備する。
ポータルからAzure Static Web Appsを準備します。「リソースの作成」画面で「static」で検索すると「Static Web App」が出てくるのでこれを選びます。
サブスクリプションを選択し、リソースグループを選択または新規作成します。本機能はStandardでしか使えないのでホスティングプランは「Standard」を選択します。
同じ画面でデプロイの詳細を設定します。ソースでgithubを選択し、githubアカウントでサインインします。リポジトリや分岐(ブランチ)を選択し、ビルドのプリセットは「Custom」を選択します。
あとは「確認及び作成」に進み、「作成」を押せばStatic Web Appsがデプロイされ、Webアプリ(今回はHTMLファイル1つ)がgithubからデプロイされます。
パスワードを設定する
デプロイされたStatic Web Appsに移動し、メニューの「構成」を押し、「全般設定」を押します。「環境」でステージングを作っておくとそちらだけにパスワードを書けると言うこともできますが、今回は「ステージングと運用の両方の環境を保護」を選びます。
パスワードは「全角半角のアルファベット、数字、記号」全てを含んで8文字以内となっていますので、適当なものを入力して「保存」を押します。
アクセスする
設定が終わったら実際にアクセスしてみましょう。「概要」に表示されるURLにアクセスします。
アクセスすると、https://xxxxxxxxxx.azurestaticapps.net/.auth/basicAuth/login というAzure Static Web Appsで準備されたURLにリダイレクトされ、以下の画面が表示されます。
あとはここにパスワードを入力すれば、無事表示されます。
内部的には入力されたパスワードをJavaScriptを使ってBASIC認証の形でHTTPヘッダに付与して/.auth/BasicAuth/login/callbackというURLにPOSTし、成功したら認証したことを示すStaticWebAppsBasicAuthCookieというCookieを設定して、最初にアクセスしたURLにリダイレクトされていました。
まとめ
Azure Static Web Appsで、テストの間はパスワードをかけてアクセス制限をしたい・・といった場合に、ポータルから設定できるようになりました。利用方法もとてもかんたんなので、是非お試しください。
みなさまのお役に立てば幸いです。
