演習 - 認証プロバイダーとアクセスを構成する

4 分

あなたのショッピングリスト Web アプリでは、一部のルートへのアクセスをセキュリティで保護し、特定の認証プロバイダーを無効にする必要があります。この演習では、Web アプリのルーティング構成を更新して、その結果を実現します。

この演習では、次の手順を行います。

ルーティング構成に規則を追加して、一部の認証プロバイダーを無効にします。
認証されたユーザーだけがアクセスできるように、製品リストをセキュリティで保護します。
更新されたアプリをデプロイします。
制限が有効であることをテストします。

認証プロバイダーを無効にする

アプリのルーティング構成を更新して、Microsoft Entra 認証プロバイダーを無効にします。

Visual Studio Code でプロジェクトを開きます。

次のファイルを開きます。

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

JSON オブジェクトのルートに、次のルーティング構成を追加します。
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
次のルーティング規則を追加して、ユーザーが Microsoft Entra 認証プロバイダーにアクセスできないようにします。

製品リストへのアクセスをセキュリティで保護する

次に、認証されたものだけが API にアクセスできるように、製品リストをセキュリティで保護する必要があります。そのために、staticwebapp.config.json 構成ファイル内に別のルーティング規則を追加します。

この規則をroutes 配列上部に追加します。

{
  "route": "/api/products/*",
  "allowedRoles": ["authenticated"]
},

完成した staticwebapp.config.json は次のようになります。

{
  "routes": [
    {
      "route": "/api/products/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/aad",
      "statusCode": 404
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

変更をデプロイする

この構成の結果をテストする前に、アプリを再デプロイします。

Visual Studio Code で、 F1 キーを押してコマンドパレットを開きます。
「 Git: Commit All」と入力して選択します。
コミットメッセージとして「 Secure access 」と入力し、 Enter キーを押します。
F1 キーを押してコマンドパレットを開きます。
Enter キーを押して [ Git: Push] を選択し、 Enter キーを押します。

変更をプッシュしたら、ビルドおよびデプロイプロセスが実行されるまで待ちます。その後、デプロイされたアプリ上に変更が表示されます。

新しい制限をテストする

アプリを再デプロイしたら、新しい制限が有効であることをテストできます。

Visual Studio Code エクスプローラーウィンドウで、[ Static Web Apps ] セクションに戻り、[ my-static-web-app-and-authn] を右クリックし、[サイトの参照 ] を選択してブラウザーにアプリを表示します。
ログインしていない場合は、製品リストの代わりに 未承認 のメッセージが表示されます。
ログインするには、認証プロバイダーの一覧で Microsoft Entra ID を 選択します。

次のような 404 エラーページが表示されます。
ブラウザーの戻るボタンを使用して、アプリに戻ります。
ログインするには、認証プロバイダーの一覧で GitHub を選択します。
プロンプトが表示されたら、GitHub の資格情報を入力し、Azure の同意 ページで [同意の付与] を選択します。

ログインすると、製品リストが表示されます。

次のステップ

おめでとうございます。これで静的 Web アプリ内に認証ワークフロー全体が実装されました。