Hitelesítés hozzáadása statikus webhelyhez az Azure Static Web Appsben

Ez a cikk egy sorozat második része, amely bemutatja, hogyan helyezheti üzembe első webhelyét az Azure Static Web Appsben. Korábban létrehozott és üzembe helyezett egy statikus webhelyet a választott webes keretrendszerrel .

Ebben a cikkben hitelesítést ad hozzá a webhelyhez, és helyileg futtatja a webhelyet, mielőtt üzembe helyeznénk a felhőben.

Előfeltételek

Ez az oktatóanyag az előző oktatóanyagtól folytatódik, és ugyanazokkal az előfeltételekkel rendelkezik.

Hitelesítés és engedélyezés

Az Azure Static Web Apps megkönnyíti az olyan gyakori hitelesítésszolgáltatók használatát, mint a Microsoft Entra és a Google, biztonsági kód írása nélkül.

Ebben a cikkben úgy konfigurálja a webhelyet, hogy a Microsoft Entra-azonosítót használja a hitelesítéshez.

Hitelesítés hozzáadása

Az utolsó cikkben létrehozott egy staticwebapp.config.json fájlt. Ez a fájl az Azure Static Web Apps számos funkcióját vezérli, beleértve a hitelesítést is.

1. Frissítse a staticwebapp.config.json következő konfigurációnak megfelelőt.

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

   A routes szakasz lehetővé teszi a névvel ellátott szerepkörök hozzáférésének korlátozását. Két előre definiált szerepkör van: authenticated és anonymous. Ha a csatlakoztatott felhasználó nem rendelkezik engedélyezett szerepkörrel, a kiszolgáló "401 Jogosulatlan" választ ad vissza.

   A szakaszban szereplő értékek úgy konfigurálják a responseOverrides webhelyet, hogy a kiszolgálóhiba nem hitelesített felhasználó helyett inkább a bejelentkezési lapra irányítja át a böngészőt.

2. Futtassa a webhelyet helyileg.

   A webhely helyi elindításához futtassa a Static Web Apps CLI start parancsot.

   npx swa start
   

   Ez a parancs elindítja az Azure Static Web Apps emulátort.http://localhost:4280

   Ez az URL-cím megjelenik a terminálablakban a szolgáltatás elindítása után.

3. Válassza ki az URL-címet a webhelyre való ugráshoz.

   Miután megnyitotta a webhelyet a böngészőben, megjelenik a helyi hitelesítési bejelentkezési lap.

   

   A helyi hitelesítési bejelentkezési oldal a valódi hitelesítési élmény emulációját biztosítja külső szolgáltatások nélkül. Létrehozhat egy felhasználói azonosítót, és kiválaszthatja, hogy mely szerepköröket szeretné alkalmazni a felhasználóra ezen a képernyőn.

4. Adjon meg egy felhasználónevet, majd válassza a Bejelentkezés lehetőséget.

   A hitelesítés után megjelenik a webhely.

A webhely üzembe helyezése az Azure-ban

Helyezze üzembe a webhelyet ugyanúgy, mint az előző oktatóanyagban.

1. Webhely létrehozása:

   npx swa build
   

2. Helyezze üzembe a webhelyet a statikus webalkalmazásban:

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

   A webhely URL-címe az üzembe helyezés befejezése után jelenik meg. Válassza ki a webhely URL-címét a webhely böngészőben való megnyitásához. Megjelenik a Szokásos Microsoft Entra ID bejelentkezési lap:

   

   Jelentkezzen be Microsoft-fiókjával.

Erőforrások törlése (nem kötelező)

Ha nem folytatja a további oktatóanyagokat, távolítsa el az Azure-erőforráscsoportot és az erőforrásokat:

az group delete -n swa-tutorial

Amikor eltávolít egy erőforráscsoportot, az összes benne lévő erőforrást törli. Ezt a műveletet nem vonhatja vissza.

Kapcsolódó tartalom

• Hitelesítés és engedélyezés
• Egyéni hitelesítés