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

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 キーを押して、コマンドパレットを開きます。
「Git: Push」と入力して選択し、Enterキーを押します。

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

新しい制限をテストする

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

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

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

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

次のステップ