Anpassad autentisering i Azure Static Web Apps

Azure Static Web Apps tillhandahåller hanterad autentisering som använder providerregistreringar som hanteras av Azure. Om du vill göra registreringen mer flexibel kan du åsidosätta standardinställningarna med en anpassad registrering.

• Med anpassad autentisering kan du också konfigurera anpassade leverantörer som stöder OpenID Connect. Med den här konfigurationen kan du registrera flera externa leverantörer.

• Om du använder anpassade registreringar inaktiveras alla förkonfigurerade leverantörer.

Kommentar

Anpassad autentisering är endast tillgänglig i Azure Static Web Apps Standard-planen.

Konfigurera en anpassad identitetsprovider

Anpassade identitetsprovidrar konfigureras i avsnittet i auth konfigurationsfilen.

För att undvika att placera hemligheter i källkontrollen tittar konfigurationen på programinställningar för ett matchande namn i konfigurationsfilen. Du kan också välja att lagra dina hemligheter i Azure Key Vault.

Microsoft Entra ID

Börja med att skapa följande programinställningar för att skapa registreringen:

Namn	Värde
AZURE_CLIENT_ID	Program-ID :t (klient) för Microsoft Entra-appregistreringen.
AZURE_CLIENT_SECRET	Klienthemligheten för Microsoft Entra-appregistreringen.

Använd sedan följande exempel för att konfigurera providern i konfigurationsfilen.

Microsoft Entra-leverantörer är tillgängliga i två olika versioner. Version 1 definierar uttryckligen userDetailsClaim, vilket gör att nyttolasten kan returnera användarinformation. Version 2 returnerar däremot användarinformation som standard och anges av v2.0 i openIdIssuer URL:en.

Microsoft Entra version 1

{
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<TENANT_ID>",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

Ersätt med ditt Klient-ID för <TENANT_ID> Microsoft Entra.

Microsoft Entra version 2

{
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<TENANT_ID>/v2.0",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

Ersätt med ditt Klient-ID för <TENANT_ID> Microsoft Entra.

Mer information om hur du konfigurerar Microsoft Entra-ID finns i dokumentationen för App Service-autentisering/auktorisering om hur du använder en befintlig registrering.

Information om hur du konfigurerar vilka konton som kan logga in finns i Ändra konton som stöds av ett program och Begränsa din Microsoft Entra-app till en uppsättning användare i en Microsoft Entra-klientorganisation.

Kommentar

Även om konfigurationsavsnittet för Microsoft Entra-ID är azureActiveDirectory, aliaserar plattformen detta till aad i URL:en för inloggning, utloggning och rensning av användarinformation. Mer information finns i avsnittet om autentisering och auktorisering .

Anpassat certifikat

Använd följande steg för att lägga till ett anpassat certifikat i din Microsoft Entra ID-appregistrering.

1. Om det inte redan är det laddar du upp certifikatet till ett Microsoft Key Vault.

2. Lägg till en hanterad identitet i din statiska webbapp.

   För användartilldelade hanterade identiteter anger du keyVaultReferenceIdentity egenskapen för ditt statiska platsobjekt till den användartilldelade hanterade identiteten resourceId .

   Hoppa över det här steget om din hanterade identitet är systemtilldelad.

3. Bevilja den hanterade identiteten följande åtkomstprinciper:

   • Hemligheter: Hämta/lista
   • Certifikat: Hämta/lista

4. Uppdatera autentiseringskonfigurationsavsnittet i konfigurationsavsnittet azureActiveDirectory med ett clientSecretCertificateKeyVaultReference värde enligt följande exempel:

   {
     "auth": {
       "rolesSource": "/api/GetRoles",
       "identityProviders": {
         "azureActiveDirectory": {
           "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
           "registration": {
             "openIdIssuer": "https://login.microsoftonline.com/common/v2.0",
             "clientIdSettingName": "AZURE_CLIENT_ID",
             "clientSecretCertificateKeyVaultReference": "@Microsoft.KeyVault(SecretUri=https://<KEY_VAULT_NAME>.azure.net/certificates/<CERTIFICATE_NAME>/<CERTIFICATE_VERSION_ID>)",
             "clientSecretCertificateThumbprint": "*"
           }
         }
       }
     }
   }
   

   Se till att ersätta dina värden i för platshållarna omgivna av <>.

   I den hemliga URI:n anger du nyckelvalvets namn och certifikatnamn. Om du vill fästa på en version inkluderar du certifikatversionen, annars utelämnar du versionen så att körningen kan välja den senaste versionen av certifikatet.

   Ange clientSecretCertificateThumbprint lika med för att * alltid hämta den senaste versionen av certifikatens tumavtryck.

Äpple

Börja med att skapa följande programinställningar för att skapa registreringen:

Namn	Värde
APPLE_CLIENT_ID	Apples klient-ID.
APPLE_CLIENT_SECRET	Apple-klienthemligheten.

Använd sedan följande exempel för att konfigurera providern i konfigurationsfilen.

{
  "auth": {
    "identityProviders": {
      "apple": {
        "registration": {
          "clientIdSettingName": "APPLE_CLIENT_ID",
          "clientSecretSettingName": "APPLE_CLIENT_SECRET"
        }
      }
    }
  }
}

Mer information om hur du konfigurerar Apple som autentiseringsprovider finns i dokumentationen om autentisering/auktorisering för App Service.

Facebook

Börja med att skapa följande programinställningar för att skapa registreringen:

Namn	Värde
FACEBOOK_APP_ID	Facebooks program-ID.
FACEBOOK_APP_SECRET	Facebook-programhemligheten.

Använd sedan följande exempel för att konfigurera providern i konfigurationsfilen.

{
  "auth": {
    "identityProviders": {
      "facebook": {
        "registration": {
          "appIdSettingName": "FACEBOOK_APP_ID",
          "appSecretSettingName": "FACEBOOK_APP_SECRET"
        }
      }
    }
  }
}

Mer information om hur du konfigurerar Facebook som autentiseringsprovider finns i dokumentationen för App Service-autentisering/auktorisering.

GitHub

Börja med att skapa följande programinställningar för att skapa registreringen:

Namn	Värde
GITHUB_CLIENT_ID	GitHub-klient-ID:t.
GITHUB_CLIENT_SECRET	GitHub-klienthemligheten.

Använd sedan följande exempel för att konfigurera providern i konfigurationsfilen.

{
  "auth": {
    "identityProviders": {
      "github": {
        "registration": {
          "clientIdSettingName": "GITHUB_CLIENT_ID",
          "clientSecretSettingName": "GITHUB_CLIENT_SECRET"
        }
      }
    }
  }
}

Google

Börja med att skapa följande programinställningar för att skapa registreringen:

Namn	Värde
GOOGLE_CLIENT_ID	Googles klient-ID.
GOOGLE_CLIENT_SECRET	Google-klienthemligheten.

Använd sedan följande exempel för att konfigurera providern i konfigurationsfilen.

{
  "auth": {
    "identityProviders": {
      "google": {
        "registration": {
          "clientIdSettingName": "GOOGLE_CLIENT_ID",
          "clientSecretSettingName": "GOOGLE_CLIENT_SECRET"
        }
      }
    }
  }
}

Mer information om hur du konfigurerar Google som autentiseringsprovider finns i dokumentationen om App Service-autentisering/auktorisering.

Twitter

Börja med att skapa följande programinställningar för att skapa registreringen:

Namn	Värde
TWITTER_CONSUMER_KEY	Twitter-konsumentnyckeln.
TWITTER_CONSUMER_SECRET	Twitter konsumenthemlighet.

Använd sedan följande exempel för att konfigurera providern i konfigurationsfilen.

{
  "auth": {
    "identityProviders": {
      "twitter": {
        "registration": {
          "consumerKeySettingName": "TWITTER_CONSUMER_KEY",
          "consumerSecretSettingName": "TWITTER_CONSUMER_SECRET"
        }
      }
    }
  }
}

Mer information om hur du konfigurerar Twitter som autentiseringsprovider finns i dokumentationen om autentisering/auktorisering för App Service.

OpenID Connect

Du kan konfigurera Azure Static Web Apps att använda en anpassad autentiseringsprovider som följer OIDC-specifikationen (OpenID Connect). Följande steg krävs för att använda en anpassad OIDC-provider.

• En eller flera OIDC-leverantörer tillåts.
• Varje provider måste ha ett unikt namn i konfigurationen.
• Endast en provider kan fungera som standardomdirigeringsmål.

Registrera ditt program med identitetsprovidern

Du måste registrera programmets information med en identitetsprovider. Kontakta providern om de steg som krävs för att generera ett klient-ID och en klienthemlighet för ditt program.

När programmet har registrerats hos identitetsprovidern skapar du följande programhemligheter i programinställningarna för den statiska webbappen:

Namn	Värde
MY_PROVIDER_CLIENT_ID	Klient-ID:t som genereras av autentiseringsprovidern för din statiska webbapp.
MY_PROVIDER_CLIENT_SECRET	Klienthemligheten som genereras av autentiseringsproviderns anpassade registrering för din statiska webbapp.

Om du registrerar andra leverantörer behöver var och en ett associerat klient-ID och ett klienthemlighetsarkiv i programinställningarna.

Viktigt!

Programhemligheter är känsliga säkerhetsautentiseringsuppgifter. Dela inte den här hemligheten med någon, distribuera den i ett klientprogram eller kontrollera källkontrollen.

När du har autentiseringsuppgifterna för registrering använder du följande steg för att skapa en anpassad registrering.

1. Du behöver OpenID Connect-metadata för providern. Den här informationen exponeras ofta via ett dokument med konfigurationsmetadata, som är providerns Issuer URL-suffix med /.well-known/openid-configuration. Samla in den här konfigurations-URL:en.

2. Lägg till ett auth avsnitt i konfigurationsfilen med ett konfigurationsblock för OIDC-leverantörerna och din providerdefinition.

   {
     "auth": {
       "identityProviders": {
         "customOpenIdConnectProviders": {
           "myProvider": {
             "registration": {
               "clientIdSettingName": "MY_PROVIDER_CLIENT_ID",
               "clientCredential": {
                 "clientSecretSettingName": "MY_PROVIDER_CLIENT_SECRET"
               },
               "openIdConnectConfiguration": {
                 "wellKnownOpenIdConfiguration": "https://<PROVIDER_ISSUER_URL>/.well-known/openid-configuration"
               }
             },
             "login": {
               "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
               "scopes": [],
               "loginParameterNames": []
             }
           }
         }
       }
     }
   }
   

• Providernamnet myProvider är i det här exemplet den unika identifierare som används av Azure Static Web Apps.
• Ersätt <PROVIDER_ISSUER_URL> med sökvägen till providerns utfärdar-URL .
• Med login objektet kan du ange värden för: anpassade omfång, inloggningsparametrar eller anpassade anspråk.

Återanrop till autentisering

Identitetsprovidrar kräver en omdirigerings-URL för att slutföra inloggnings- eller utloggningsbegäran. De flesta leverantörer kräver att du lägger till url:erna för återanrop i en tillåtna lista. Följande slutpunkter är tillgängliga som omdirigeringsmål.

Typ	URL-mönster
Inloggning	https://<YOUR_SITE>/.auth/login/<PROVIDER_NAME_IN_CONFIG>/callback
Utloggning	https://<YOUR_SITE>/.auth/logout/<PROVIDER_NAME_IN_CONFIG>/callback

Om du använder Microsoft Entra-ID använder aad du som värde för <PROVIDER_NAME_IN_CONFIG> platshållaren.

Kommentar

Dessa URL:er tillhandahålls av Azure Static Web Apps för att ta emot svaret från autentiseringsprovidern. Du behöver inte skapa sidor på dessa vägar.

Inloggning, utloggning och användarinformation

Om du vill använda en anpassad identitetsprovider använder du följande URL-mönster.

Åtgärd	Mönster
Inloggning	/.auth/login/<PROVIDER_NAME_IN_CONFIG>
Utloggning	/.auth/logout
Användarinformation	/.auth/me
Rensa användarinformation	/.auth/purge/<PROVIDER_NAME_IN_CONFIG>

Om du använder Microsoft Entra-ID använder aad du som värde för <PROVIDER_NAME_IN_CONFIG> platshållaren.

Hantera roller

Varje användare som har åtkomst till en statisk webbapp tillhör en eller flera roller. Det finns två inbyggda roller som användarna kan tillhöra:

• anonym: Alla användare tillhör automatiskt den anonyma rollen.
• autentiserad: Alla användare som är inloggade tillhör den autentiserade rollen.

Utöver de inbyggda rollerna kan du tilldela anpassade roller till användare och referera till dem i filen staticwebapp.config.json .

Inbjudningar

Lägga till en användare i en roll

Om du vill lägga till en användare i en roll genererar du inbjudningar som gör att du kan associera användare till specifika roller. Roller definieras och underhålls i filen staticwebapp.config.json .

Skapa en inbjudan

Inbjudningar är specifika för enskilda auktoriseringsleverantörer, så tänk på behoven i din app när du väljer vilka leverantörer som ska stödjas. Vissa leverantörer exponerar en användares e-postadress, medan andra endast anger webbplatsens användarnamn.

Auktoriseringsprovider	Exponerar
Microsoft Entra ID	e-postadress
GitHub	användarnamn
Twitter	användarnamn

Använd följande steg för att skapa en inbjudan.

1. Gå till en Static Web Apps-resurs i Azure-portalen.
2. Under Inställningar väljer du Rollhantering.
3. Välj Bjud in.
4. Välj en auktoriseringsprovider i listan med alternativ.
5. Lägg till mottagarens användarnamn eller e-postadress i rutan Inbjuden information .
   • För GitHub och Twitter anger du användarnamnet. Ange mottagarens e-postadress för alla andra.
6. Välj domänen för din statiska webbplats i den nedrullningsbara menyn Domän .
   • Domänen som du väljer är den domän som visas i inbjudan. Om du har en anpassad domän som är associerad med din webbplats väljer du den anpassade domänen.
7. Lägg till en kommaavgränsad lista med rollnamn i rutan Roll .
8. Ange det maximala antalet timmar som du vill att inbjudan ska vara giltig.
   • Den maximala möjliga gränsen är 168 timmar, vilket är sju dagar.
9. Välj Generera.
10. Kopiera länken från rutan Bjud in länk .
11. Skicka inbjudan via e-post till den användare som du beviljar åtkomst till.

När användaren väljer länken i inbjudan uppmanas de att logga in med sitt motsvarande konto. När användaren har loggat in associeras den med de valda rollerna.

Varning

Kontrollera att routningsreglerna inte är i konflikt med dina valda autentiseringsprovidrar. Om du blockerar en provider med en routningsregel kan användarna inte acceptera inbjudningar.

Uppdatera rolltilldelningar

1. Gå till en Static Web Apps-resurs i Azure-portalen.
2. Under Inställningar väljer du Rollhantering.
3. Välj användaren i listan.
4. Redigera listan över roller i rutan Roll .
5. Välj Uppdatera.

Ta bort användare

1. Gå till en Static Web Apps-resurs i Azure-portalen.
2. Under Inställningar väljer du Rollhantering.
3. Leta upp användaren i listan.
4. Markera kryssrutan på användarens rad.
5. Välj Ta bort.

Tänk på följande när du tar bort en användare:

• Om du tar bort en användare ogiltigförklaras deras behörigheter.
• Det kan ta några minuter att sprida världen över.
• Om användaren läggs till i appen igen ändras denuserId.

Funktion (förhandsversion)

I stället för att använda det inbyggda inbjudningssystemet kan du använda en serverlös funktion för att programmatiskt tilldela roller till användare när de loggar in.

Om du vill tilldela anpassade roller i en funktion kan du definiera en API-funktion som anropas automatiskt efter varje gång en användare autentiserar med en identitetsprovider. Funktionen skickas användarens information från providern. Den måste returnera en lista över anpassade roller som har tilldelats användaren.

Exempel på användning av den här funktionen är:

• Fråga en databas för att avgöra vilka roller en användare ska tilldelas
• Anropa Microsoft Graph API för att fastställa en användares roller baserat på deras Active Directory-gruppmedlemskap
• Fastställa en användares roller baserat på anspråk som returneras av identitetsprovidern

Kommentar

Möjligheten att tilldela roller via en funktion är endast tillgänglig när anpassad autentisering har konfigurerats.

När den här funktionen är aktiverad ignoreras alla roller som tilldelats via det inbyggda inbjudningssystemet.

Konfigurera en funktion för att tilldela roller

Om du vill konfigurera Static Web Apps att använda en API-funktion som rolltilldelningsfunktion lägger du till en rolesSource egenskap i auth avsnittet i appens konfigurationsfil. Värdet för rolesSource egenskapen är sökvägen till API-funktionen.

{
  "auth": {
    "rolesSource": "/api/GetRoles",
    "identityProviders": {
      // ...
    }
  }
}

Kommentar

När rolltilldelningsfunktionen har konfigurerats kan den inte längre nås av externa HTTP-begäranden.

Skapa en funktion för att tilldela roller

När du har definierat rolesSource egenskapen i appens konfiguration lägger du till en API-funktion i din statiska webbapp på den angivna sökvägen. Du kan använda en hanterad funktionsapp eller ta med en egen funktionsapp.

Varje gång en användare autentiserar med en identitetsprovider anropar POST-metoden den angivna funktionen. Funktionen skickar ett JSON-objekt i begärandetexten som innehåller användarens information från providern. För vissa identitetsprovidrar innehåller användarinformationen även en accessToken som funktionen kan använda för att göra API-anrop med hjälp av användarens identitet.

Se följande exempelnyttolast från Microsoft Entra-ID:

{
  "identityProvider": "aad",
  "userId": "72137ad3-ae00-42b5-8d54-aacb38576d76",
  "userDetails": "ellen@contoso.com",
  "claims": [
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
          "val": "ellen@contoso.com"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname",
          "val": "Contoso"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname",
          "val": "Ellen"
      },
      {
          "typ": "name",
          "val": "Ellen Contoso"
      },
      {
          "typ": "http://schemas.microsoft.com/identity/claims/objectidentifier",
          "val": "7da753ff-1c8e-4b5e-affe-d89e5a57fe2f"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier",
          "val": "72137ad3-ae00-42b5-8d54-aacb38576d76"
      },
      {
          "typ": "http://schemas.microsoft.com/identity/claims/tenantid",
          "val": "3856f5f5-4bae-464a-9044-b72dc2dcde26"
      },
      {
          "typ": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
          "val": "ellen@contoso.com"
      },
      {
          "typ": "ver",
          "val": "1.0"
      }
  ],
  "accessToken": "eyJ0eXAiOiJKV..."
}

Funktionen kan använda användarens information för att avgöra vilka roller som ska tilldelas användaren. Det måste returnera ett HTTP 200-svar med en JSON-brödtext som innehåller en lista med anpassade rollnamn som användaren ska tilldelas.

Om du till exempel vill tilldela användaren till rollerna Reader och Contributor returnerar du följande svar:

{
  "roles": [
    "Reader",
    "Contributor"
  ]
}

Om du inte vill tilldela användaren några andra roller returnerar du en tom roles matris.

Mer information finns i Självstudie: Tilldela anpassade roller med en funktion och Microsoft Graph.

Nästa steg

Ange användarroller programmatiskt