静的なWebアプリケーションを使用してAzure関数に認証を追加

最近、Azureの静的なWebアプリのチームは、より良い私たちのアプリを設定できるようにいくつかの変更をリリースしました.これはいくつかの変更の変更が付属していますが、我々は今我々のルートの認証設定を簡素化することができます!私はしばらくの間、これを待っていたan issue 昨年8月について.
機能を持つ静的Webアプリケーションを作成する上でのガイダンスが必要な場合は、他のブログ記事をチェックアウトできます.Using function proxies with Azure Static Web Apps

どのように前に

以前は、SWAに認証を追加するには、ルートという名前のファイルを作成しなければなりませんでした.JSONアプリケーションのビルドアーティファクトフォルダのルートです.これは一般にフレームワークからフレームワークに変わります.but this is well documented . ファイルでは、ユーザーロールに基づいて承認されたルートを定義できます.静的Webアプリケーションの既定の役割はanonymous (ログインしていない人)authenticated ( IDプロバイダのいずれかを通してログインしている人).これがルートです.認可規則付きのJSONファイルは、一般的に次のようになります.

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200,
      "allowedRoles": ["authenticated"]
    }
  ]
}

上記のファイルは、任意のページにアクセスするには、ログオンする必要があります.あなたは、ユーザーがあなたのアプリケーションのフロントページにアクセスできるようにすることができますが、ユーザーパネルにアクセスするために、彼がログオンしなければならないだろうように、どのルートが認証されるべきかを指定することができます.

今の作品

The routes ファイルの一部は主に同じです.主な変更の変更は、新しいファイルstaticwebappという名前です.設定.JSONそれは、ルートの同じ能力を持ちます.JSONとより多く:

これで、ルート定義にHTTPメソッドを定義できます.前に、認証されていないGETリクエストを許可したいが、POSTまたはPUTの認証を必要とする場合は、ポストとプットのルートに対して別のルートを定義する必要がありました.これで、同じルートを使用して、methods フィールド.以下に例を示します:

{
    "routes": [
      {
        "route": "/api/*",
        "methods": ["POST", "PUT"],
        "allowedRoles": ["authenticated"]
      }
    ]
}

上のJSONは/api そして、メソッドはPOSTです、あるいは、PUTはauthenticated 役割

NOTE: The methods field works on the routes.json file, but if you're starting a new application or modifying your routes file to use the new features, you should consider switching to the new file, since the old one is deprecated.

カスタム役割

Azure静的Webアプリケーションを使用すると、ユーザーにカスタムロールを作成することができます.現在、これは、ポータルを介してユーザーを招待するときにのみ可能ですが、それはAuthプロバイダ、電子メールアドレス、アプリのドメイン(いくつかの理由)と期限(時間、最大7日間)、および役割名を指定する必要がありますもちろん、もちろん.私の知る限り、ポータルの外でこれをする方法はありません.あなたのアプリケーションにあなたの静的なWebアプリケーションのリソースに行くには、ロール管理タブに移動し、招待をクリックしてユーザーを招待することができます.

結論

設定ファイルを使用すると、ルート定義を実行するHTTPメソッドを定義できるようになりました.HTTPメソッドのどちらが承認規則を持つかを指定できます.新しいStaticWebAppが付属して多くの機能があります.設定.JSONファイル、それらのいくつかは本当に面白いです!しかし、私はこのブログポストを認可とHTTPメソッド部分に集中することに決めました.新しいファイルについてもっと読むことができますhere . ご質問やご意見がある場合は、私に知らせてください!