Přidání ověřování na statický web ve službě Azure Static Web Apps

Tento článek je druhou částí série, která ukazuje, jak nasadit první web do Azure Static Web Apps. Dříve jste vytvořili a nasadili statický web s webovou architekturou podle vašeho výběru.

V tomto článku přidáte do svého webu ověřování a web spustíte místně před nasazením do cloudu.

Požadavky

Tento kurz pokračuje z předchozího kurzu a má stejné požadavky.

Ověřování a autorizace

Azure Static Web Apps usnadňuje používání běžných zprostředkovatelů ověřování, jako je Microsoft Entra a Google, bez psaní kódu souvisejícího se zabezpečením.

Poznámka:

Volitelně můžete zaregistrovat vlastního poskytovatele a přiřadit vlastní role pro jemně odstupňované řízení při použití back-endových rozhraní API.

V tomto článku nakonfigurujete svůj web tak, aby pro ověřování používalo ID Microsoft Entra.

Přidání ověřování

V posledním článku jste vytvořili staticwebapp.config.json soubor. Tento soubor řídí mnoho funkcí pro Azure Static Web Apps, včetně ověřování.

1. Aktualizujte konfiguraci staticwebapp.config.json tak, aby odpovídala následující konfiguraci.

   {
     "navigationFallback": {
       "rewrite": "/index.html"
     },
     "routes": [
       {
         "route": "/*",
         "allowedRoles": [ "authenticated" ]
       }
     ],
     "responseOverrides": {
       "401": {
         "statusCode": 302,
         "redirect": "/.auth/login/aad"
       }
     }
   }
   

   Tato routes část umožňuje omezit přístup k pojmenované role. Existují dvě předdefinované role: authenticated a anonymous. Pokud připojený uživatel nemá povolenou roli, server vrátí odpověď 401 Neautorizováno.

   Hodnoty v responseOverrides části nakonfigurují váš web tak, aby místo neověřeného uživatele, který viděl chybu serveru, byl jeho prohlížeč přesměrován na přihlašovací stránku.

2. Spusťte web místně.

   Pokud chcete web spustit místně, spusťte příkaz rozhraní příkazového řádku start Static Web Apps.

   npx swa start
   

   Tento příkaz spustí emulátor Azure Static Web Apps na platformě http://localhost:4280.

   Tato adresa URL se zobrazí v okně terminálu po spuštění služby.

3. Vyberte adresu URL pro přechod na web.

   Po otevření webu v prohlížeči se zobrazí přihlašovací stránka místního ověřování.

   

   Přihlašovací stránka místního ověřování poskytuje emulaci skutečného prostředí ověřování bez nutnosti externích služeb. Můžete vytvořit ID uživatele a vybrat role, které chcete použít pro uživatele z této obrazovky.

4. Zadejte uživatelské jméno a pak vyberte Přihlásit.

   Po ověření se váš web zobrazí.

Nasazení webu do Azure

Nasaďte web stejným způsobem jako v posledním kurzu.

1. Vytvořte svůj web:

   npx swa build
   

2. Nasaďte web do statické webové aplikace:

   npx swa deploy --app-name swa-demo-site
   

   Po dokončení nasazení se zobrazí adresa URL vašeho webu. Výběrem adresy URL webu otevřete web v prohlížeči. Zobrazí se standardní přihlašovací stránka Microsoft Entra ID:

   

   Přihlaste se pomocí svého účtu Microsoft.

Vyčištění prostředků (volitelné)

Pokud nepokračujete s dalšími kurzy, odeberte skupinu prostředků a prostředky Azure:

az group delete -n swa-tutorial

Když odeberete skupinu prostředků, odstraníte všechny prostředky, které obsahuje. Tato akce se nedá vrátit zpátky.

Související obsah

• Ověřování a autorizace
• Vlastní ověřování