Autentisera och auktorisera Static Web Apps

  • Så här gör du

Azure Static Web Apps ger en smidig autentiseringsupplevelse, där ingen extra konfiguration krävs för att använda GitHub och Microsoft Entra ID för autentisering.

I den här artikeln får du lära dig mer om standardbeteende, hur du konfigurerar inloggning och utloggning, hur du blockerar en autentiseringsprovider med mera.

Du kan registrera en anpassad provider som inaktiverar alla förkonfigurerade leverantörer.

Varning

På grund av ändringar i X-API-principen (tidigare Twitter) är supporten inte tillgänglig som en del av de förkonfigurerade leverantörerna för din app. Om du vill fortsätta att använda X (tidigare Twitter) för autentisering/auktorisering med din app uppdaterar du appkonfigurationen för att registrera en anpassad provider.

Förutsättningar

Tänk på följande standardvärden och resurser för autentisering och auktorisering med Azure Static Web Apps.

Standardvärden:

Resurser:

  • Definiera regler i staticwebapp.config.json-filen för behöriga användare för att få åtkomst till begränsade vägar
  • Tilldela användare anpassade roller med hjälp av det inbyggda inbjudningssystemet
  • Tilldela användare anpassade roller vid inloggning med en API-funktion programmatiskt
  • Förstå att autentisering och auktorisering avsevärt överlappar routningsbegrepp, som beskrivs i programkonfigurationsguiden
  • Begränsa inloggningen till en specifik Microsoft Entra-ID-klient genom att konfigurera en anpassad Microsoft Entra-ID-provider. Med den förkonfigurerade Microsoft Entra-ID-providern kan alla Microsoft-konton logga in.

Konfigurera inloggning

Azure Static Web Apps använder systemmappen /.auth för att ge åtkomst till auktoriseringsrelaterade API:er. I stället för att exponera någon av vägarna under /.auth mappen direkt för slutanvändare skapar du routningsregler för egna URL:er.

Använd följande tabell för att hitta den providerspecifika vägen.

Auktoriseringsprovider Logga in väg
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

Om du till exempel vill logga in med GitHub kan du använda en URL som liknar följande exempel.

<a href="/.auth/login/github">Login</a>

Om du väljer att stödja fler än en leverantör använder du en leverantörsspecifik länk för varje leverantör på din webbplats. Använd en routningsregel för att mappa en standardprovider till en användarvänlig väg som /login.

{
  "route": "/login",
  "redirect": "/.auth/login/github"
}

Konfigurera omdirigering efter inloggning

Du kan returnera en användare till en specifik sida när de har loggat in genom att ange en fullständigt kvalificerad URL i frågesträngsparametern post_login_redirect_uri .

<a href="/.auth/login/github?post_login_redirect_uri=https://zealous-water.azurestaticapps.net/success">Login</a>

You can also redirect unauthenticated users back to the referring page after they sign in. To add this redirect, create a response override rule that sets post_login_redirect_uri to .referrer, like in the following example.

{
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github?post_login_redirect_uri=.referrer",
      "statusCode": 302
    }
  }
}

Konfigurera inloggning

Vägen /.auth/logout loggar ut användare från webbplatsen. Du kan lägga till en länk i webbplatsnavigering så att användaren kan logga ut, som i följande exempel.

<a href="/.auth/logout">Log out</a>

Använd en routningsregel för att mappa en egen väg som /logout.

{
  "route": "/logout",
  "redirect": "/.auth/logout"
}

Konfigurera omdirigering efter utloggning

Om du vill returnera en användare till en specifik sida när de har loggat ut anger du en URL i post_logout_redirect_uri frågesträngsparametern.

Blockera en autentiseringsprovider

Som standard är alla autentiseringsprovidrar aktiverade, men du kanske vill begränsa appen från att använda en provider. Din app kanske till exempel bara vill använda leverantörer som exponerar e-postadresser.

Om du vill blockera en provider skapar du en vägregel för att returnera en 404 statuskod för begäranden till den blockerade providerspecifika vägen. Om du till exempel vill begränsa Entra-ID (tidigare Azure Active Directory, som kallas "aad") lägger du till följande routningsregel.

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

Ta bort personliga data

När du beviljar medgivande till ett program som slutanvändare har programmet åtkomst till din e-postadress eller ditt användarnamn, beroende på identitetsprovidern. När den här informationen har angetts kan programmets ägare bestämma hur personuppgifter ska hanteras.

Slutanvändarna måste kontakta administratörer för enskilda webbappar för att återkalla den här informationen från sina system.

Om du vill ta bort personliga data från Azure Static Web Apps-plattformen och förhindra att plattformen tillhandahåller den här informationen om framtida begäranden skickar du en begäran med hjälp av följande URL:

https://identity.azurestaticapps.net/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

To prevent the platform from providing this information on future requests to individual apps, submit a request using the following URL:

https://<WEB_APP_DOMAIN_NAME>/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

If you're using Microsoft Entra ID, use aad as the value for the <AUTHENTICATION_PROVIDER_NAME> placeholder.

Tip

For information about general restrictions and limitations, see Quotas.

Gå vidare

Använda vägar för att ange tillåtna roller för att styra sidåtkomst