Azure Static Web AppsとGitHubを使ってSSL+SNS認証付きWebサイトを手軽に構築する

Azure Static Web Apps とは?

Azure Static Web Apps を使用すると、GitHub の特定のbranchと連動して、自動更新されるWeb アプリケーションを簡単に構築できます。

docs.microsoft.com

同じような事はGitHub Pagesでもできるのですが、

master 以外の特定のbranchを指定できる (運用環境とステージング環境とか)
認証機能を組み込める(json書くだけ)
地理的分散による高速化
他のAzureリソースと組み合わせやすい
プレビュー版なので無料

というところが、良さそうです。

現在、Azure Static Web Apps はパブリックプレビュー段階であり、無料で運用が可能です。

1アプリ250MB以内/認証は25人までなど、制限が書かれています。 docs.microsoft.com

個人的には

UnityアプリをWebGLビルドして、人に見てもらう
iOSアプリのAdhoc/Enterpriseビルドの配布ページとして
ビルドしたアプリケーションやドキュメントの配布ページとして利用する

という使い方ができるんじゃないかなと思っています。

静的ページを公開してみる

公式ドキュメントにチュートリアルがあり、これにそって進めれば、簡単に試すことができます。アカウントが一通り用意されていれば、15分ぐらいでも試せるのではないでしょうか？

docs.microsoft.com

本題、認証付きページを作成する

ここからがこの記事の本題なのですが、 Unityアプリの配布などを行う場合、不特定多数の人には見られたくないケースもあります。そういった場合に、標準で組み込まれている認証機能が、便利そうなので試してみました。

現時点でドキュメントを見ると

のアカウントを利用したアクセス制限の設定が可能です。

docs.microsoft.com

サイト構成

簡単なテストなので以下の構成とします。/index.html は誰でも見れるページ /member/フォルダは承認された人しか見れないページとします。

「静的ページを公開してみる」のチュートリアルにそってHTMLを配置すれば、認証機能以外は簡単に準備できると思います。

/index.html （誰でも見れる）
/member/index.html （認証が必要）
/routes.json (route設定のjson)

routes.jsonが出てきましたが、ここで、認証の設定を行います。

{
    "routes": [
        {
            "route": "/login",
            "serve": "/.auth/login/github"
        },
        {
            "route": "/.auth/login/facebook",
            "statusCode": "401"
        },
        {
            "route": "/member/*",
            "serve": "/member/index.html",
            "allowedRoles": [
                "reader",
                "contributor"
            ]
        },
        {
            "route": "/",
            "allowedRoles": [
                "anonymous"
            ]
        }
    ],
    "platformErrorOverrides": [
        {
            "errorType": "Unauthenticated",
            "statusCode": "302",
            "serve": "/index.html"
        }
    ]
}

各項目で以下のような設定を行っています。

/login はGitHubアカウント認証へのエイリアス（必要ないけど例として)
facebookアカウントを用いた認証は status 401で利用できないようにしている（必要ないけど例として)
/member/フォルダへのアクセスは Roleが readerとcontributorのユーザのみがアクセスできるように制限をかけている
/(ルートフォルダ)は誰でもアクセスできる
未認証ユーザーは status:302 で /index.htmlへリダイレクトしている

という設定になっています。

また、公開している/index.htmlには、認証ページへのリンクを設置します。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Hello</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <h1>Hello (public page)</h1>

    <a href="/member/index.html">ダウンロードページ</a>へのアクセスは認証が必要です。
    
    <li><a href="/.auth/login/google?post_login_redirect_uri=/member/">Googleでログイン</a></li>
    <li><a href="/.auth/login/aad?post_login_redirect_uri=/member/">Azure Active Directoryでログイン</a></li>
    <li><a href="/.auth/login/github?post_login_redirect_uri=/member/">GitHubでログイン</a></li>
    <li><a href="/login?post_login_redirect_uri=/member/">GitHubでログイン(Alias利用)</a></li>
    <li><a href="/.auth/login/twitter?post_login_redirect_uri=/member/">twitterでログイン</a></li>
    <li><a href="/.auth/logout">Log out</a></li>
</body>
</html>

/.auth/login/*** という記述はもともと定義されている認証リンクです。このページにあります
認証が成功した際には、post_login_redirect_uriパラメータを利用して /member/フォルダが表示されるようにしています。

このような形で、jsonの設定だけで認証機能を設けることができます。

実際の承認対象ユーザを追加する。

ユーザの追加は Azure Portal 上で行います。
対象のAzure Static Web Apps (静的Webアプリ) を開いて、

設定 > ロール管理＞招待　からユーザを追加できます。

f:id:pigshape:20210111203217p:plain

プレビュー版の制限で最大25ユーザまでらしいですが、少人数への配布のために手間なく、SSL　＋認証付きのページを作成できるのは、結構便利です。

littlewing

人間とコンピューターとメディアの接点をデザインするために考えたこと

Azure Static Web AppsとGitHubを使ってSSL+SNS認証付きWebサイトを手軽に構築する

Azure Static Web Apps とは?

静的ページを公開してみる

本題、認証付きページを作成する

サイト構成

実際の承認対象ユーザを追加する。