Dodawanie uwierzytelniania do statycznej witryny w usłudze Azure Static Web Apps

Artykuł
07/04/2024

Ten artykuł jest drugą częścią serii, w której pokazano, jak wdrożyć pierwszą witrynę w usłudze Azure Static Web Apps. Wcześniej utworzono i wdrożono statyczną witrynę z wybraną strukturą internetową.

W tym artykule dodasz uwierzytelnianie do witryny i uruchomisz lokację lokalnie przed wdrożeniem w chmurze.

Wymagania wstępne

Ten samouczek jest kontynuowany z poprzedniego samouczka i ma te same wymagania wstępne.

Uwierzytelnianie i autoryzacja

Usługa Azure Static Web Apps ułatwia korzystanie z typowych dostawców uwierzytelniania, takich jak Microsoft Entra i Google, bez konieczności pisania kodu związanego z zabezpieczeniami.

Uwaga

Opcjonalnie możesz zarejestrować dostawcę niestandardowego i przypisać role niestandardowe w celu uzyskania bardziej szczegółowej kontroli podczas korzystania z interfejsów API zaplecza.

W tym artykule skonfigurujesz witrynę tak, aby korzystała z identyfikatora Entra firmy Microsoft na potrzeby uwierzytelniania.

Dodawanie uwierzytelniania

W ostatnim artykule utworzono staticwebapp.config.json plik. Ten plik steruje wieloma funkcjami usługi Azure Static Web Apps, w tym uwierzytelnianiem.

Zaktualizuj element , staticwebapp.config.json aby był zgodny z następującą konfiguracją.
```
{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": [ "authenticated" ]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}
```
Sekcja routes umożliwia ograniczenie dostępu do nazwanych ról. Istnieją dwie wstępnie zdefiniowane role: authenticated i anonymous. Jeśli połączony użytkownik nie ma dozwolonej roli, serwer zwraca odpowiedź "401 Brak autoryzacji".

Wartości w responseOverrides sekcji konfigurują witrynę, tak aby zamiast nieuwierzytelnionego użytkownika wystąpił błąd serwera, przeglądarka została przekierowana do strony logowania.
Uruchom lokację lokalnie.

Aby uruchomić witrynę lokalnie, uruchom polecenie interfejsu wiersza polecenia start usługi Static Web Apps.
```
npx swa start
```
To polecenie uruchamia emulator usługi Azure Static Web Apps w systemie http://localhost:4280.

Ten adres URL jest wyświetlany w oknie terminalu po uruchomieniu usługi.
Wybierz adres URL, aby przejść do witryny.

Po otwarciu witryny w przeglądarce zostanie wyświetlona strona logowania do uwierzytelniania lokalnego.

Strona logowania uwierzytelniania lokalnego zapewnia emulację rzeczywistego środowiska uwierzytelniania bez konieczności korzystania z usług zewnętrznych. Możesz utworzyć identyfikator użytkownika i wybrać role, które chcesz zastosować do użytkownika z tego ekranu.
Wprowadź nazwę użytkownika, a następnie wybierz pozycję Zaloguj.

Po uwierzytelnieniu zostanie wyświetlona witryna.

Wdrażanie witryny na platformie Azure

Wdróż witrynę w taki sam sposób, jak w poprzednim samouczku.

Skompiluj witrynę:
```
npx swa build
```
Wdróż witrynę w statycznej aplikacji internetowej:
```
npx swa deploy --app-name swa-demo-site
```
Adres URL witryny jest wyświetlany po zakończeniu wdrażania. Wybierz adres URL witryny, aby otworzyć witrynę w przeglądarce. Zostanie wyświetlona standardowa strona logowania identyfikatora entra firmy Microsoft:

Zaloguj się za pomocą konta Microsoft.

Czyszczenie zasobów (opcjonalnie)

Jeśli nie kontynuujesz pracy z innymi samouczkami, usuń grupę zasobów i zasoby platformy Azure:

az group delete -n swa-tutorial

Usunięcie grupy zasobów spowoduje usunięcie wszystkich zawartych w niej zasobów. Tej akcji nie można cofnąć.