Cvičení – konfigurace zprostředkovatelů ověřování a přístupu

Dokončeno

Webová aplikace nákupního seznamu potřebuje zabezpečit přístup k některým trasám a zakázat konkrétní zprostředkovatele ověřování. V tomto cvičení aktualizujete konfiguraci směrování webové aplikace, abyste dosáhli tohoto výsledku.

V tomto cvičení provedete následující kroky:

1. Přidáním pravidel do konfigurace směrování zakažte některé zprostředkovatelů ověřování.
2. Zabezpečte seznam produktů, aby k němu mohli přistupovat jenom ověření uživatelé.
3. Nasaďte aktualizovanou aplikaci.
4. Otestujte, že omezení jsou platná.

Zakázání zprostředkovatelů ověřování

Aktualizujeme konfiguraci směrování naší aplikace tak, aby zakázala zprostředkovatele ověřování Microsoft Entra.

1. Otevřete projekt v editoru Visual Studio Code.

2. Otevřete následující soubor.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. Do kořenového adresáře objektu JSON přidejte následující konfiguraci směrování.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Přidáním tohoto pravidla směrování zabráníme uživatelům v přístupu k poskytovateli ověřování Microsoft Entra.

Zabezpečení přístupu k seznamu produktů

Dále chceme seznam produktů zabezpečit tak, aby k rozhraní API měli přístup pouze ověření. K tomu přidáme do konfiguračního staticwebapp.config.json souboru další pravidlo směrování.

1. Do horní části routes pole přidejte následující pravidlo.

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

2. Dokončený staticwebapp.config.json soubor by měl vypadat takto:

   {
     "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}"]
     }
   }
   

Nasazení změn

Před testováním výsledku této konfigurace aplikaci znovu nasadíme.

1. V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1.

2. Zadejte a vyberte Git: Potvrdit vše.

3. Jako zprávu potvrzení zadejte Secure access a stiskněte Enter.

4. Stisknutím klávesy F1 otevřete paletu příkazů.

5. Zadejte a vyberte Git: Nasdílení změn a stiskněte Enter.

Po nasdílení změn počkejte na spuštění procesu sestavení a nasazení. Změny by se měly zobrazit v nasazené aplikaci.

Otestování nových omezení

Po opětovném nasazení aplikace můžete otestovat platnost nových omezení.

1. V okně Průzkumníka editoru Visual Studio Code se vraťte do části Static Web Apps , klikněte pravým tlačítkem na my-static-web-app-and-authn a pak vyberte Procházet web , aby se aplikace zobrazila v prohlížeči.

2. Pokud nejste přihlášení, měla by se zobrazit zpráva Neautorizováno místo seznamu produktů.

3. V seznamu zprostředkovatele ověřování vyberte MICROSOFT Entra ID , abyste se přihlásili.

   Měla by se zobrazit chybová stránka 404 podobná této:

   

4. Stisknutím tlačítka Zpět v prohlížeči se vraťte do aplikace.

5. Výběrem GitHubu v seznamu zprostředkovatele ověřování se přihlaste.

6. Pokud se zobrazí výzva, zadejte přihlašovací údaje GitHubu a na stránce souhlasu Azure vyberte Udělit souhlas .

Teď jste přihlášení a měli byste vidět seznam produktů.

Další kroky

Blahopřejeme. Do statické webové aplikace jste implementovali úplný pracovní postup ověřování.