Konfigurera autentisering i en exempelwebbapp som anropar ett webb-API med hjälp av Azure AD B2C

  • Artikel

Den här artikeln använder ett exempel ASP.NET webbprogram som anropar ett webb-API för att illustrera hur du lägger till Azure Active Directory B2C-autentisering (Azure AD B2C) i dina webbprogram.

Viktigt!

Exemplet ASP.NET webbapp som refereras i den här artikeln används för att anropa ett webb-API med en ägartoken. En webbapp som inte anropar ett webb-API finns i Konfigurera autentisering i ett exempelwebbprogram med hjälp av Azure AD B2C.

Översikt

OpenID Anslut (OIDC) är ett autentiseringsprotokoll som bygger på OAuth 2.0. Du kan använda OIDC för att på ett säkert sätt logga in en användare i ett program. Det här webbappexemplet använder Microsoft Identity Web. Microsoft Identity Web är en uppsättning ASP.NET Core-bibliotek som förenklar tillägg av stöd för autentisering och auktorisering i webbappar som kan anropa ett säkert webb-API.

Inloggningsflödet omfattar följande steg:

  1. Användare går till webbappen och väljer Logga in.

  2. Appen initierar en autentiseringsbegäran och omdirigerar användare till Azure AD B2C.

  3. Användare registrerar sig eller loggar in och återställer lösenordet. Alternativt kan de logga in med ett socialt konto.

  4. När användarna har loggat in returnerar Azure AD B2C en auktoriseringskod till appen.

  5. Appen gör sedan följande:

    a. Auktoriseringskoden byts ut mot en ID-token, åtkomsttoken och uppdateringstoken.
    b. Den läser ID-tokenanspråken och bevarar en cookie för programauktorisering.
    c. Den lagrar uppdateringstoken i en minnesintern cache för senare användning.

Översikt över appregistrering

Om du vill att din app ska kunna logga in med Azure AD B2C och anropa ett webb-API registrerar du två program i Azure AD B2C-katalogen.

  • Med registrering av webbprogram kan din app logga in med Azure AD B2C. Under registreringen anger du omdirigerings-URI:n. Omdirigerings-URI:n är slutpunkten som användarna omdirigeras till av Azure AD B2C när autentiseringen med Azure AD B2C har slutförts. Appregistreringsprocessen genererar ett program-ID, även kallat klient-ID, som unikt identifierar din app. Du kan också skapa en klienthemlighet som din app använder för att på ett säkert sätt hämta token.

  • Med registreringen av webb-API :et kan din app anropa ett säkert webb-API. Registreringen innehåller webb-API-omfång. Omfången ger ett sätt att hantera behörigheter till skyddade resurser, till exempel ditt webb-API. Du beviljar webbprogrambehörigheter till webb-API-omfången. När en åtkomsttoken begärs anger appen önskade behörigheter i omfångsparametern för begäran.

Apparkitekturen och registreringarna illustreras i följande diagram:

Diagram of a web app with web API call registrations and tokens.

Anrop till ett webb-API

När autentiseringen har slutförts interagerar användarna med appen, som anropar ett skyddat webb-API. Webb-API:et använder ägartokenautentisering . Ägartoken är den åtkomsttoken som appen fick från Azure AD B2C. Appen skickar token i auktoriseringshuvudet för HTTPS-begäran.

Authorization: Bearer <access token>

Om åtkomsttokens omfång inte matchar webb-API:ets omfång hämtar autentiseringsbiblioteket en ny åtkomsttoken med rätt omfång.

Logga ut

Utloggningsflödet omfattar följande steg:

  1. Från appen loggar användarna ut.
  2. Appen rensar sina sessionsobjekt och autentiseringsbiblioteket rensar sin tokencache.
  3. Appen tar användare till azure AD B2C-utloggningsslutpunkten för att avsluta Azure AD B2C-sessionen.
  4. Användarna omdirigeras tillbaka till appen.

Förutsättningar

En dator som kör antingen:

Steg 1: Konfigurera användarflödet

När användare försöker logga in på din app startar appen en autentiseringsbegäran till auktoriseringsslutpunkten via ett användarflöde. Användarflödet definierar och styr användarupplevelsen. När användarna har slutfört användarflödet genererar Azure AD B2C en token och omdirigerar sedan användarna tillbaka till ditt program.

Om du inte redan har gjort det skapar du ett användarflöde eller en anpassad princip. Upprepa stegen för att skapa tre separata användarflöden på följande sätt:

  • Ett kombinerat användarflöde för inloggning och registrering , till exempel susi. Det här användarflödet stöder även funktionen För att glömma ditt lösenord .
  • Ett användarflöde för profilredigering , till exempel edit_profile.
  • Ett användarflöde för lösenordsåterställning , till exempel reset_password.

Azure AD B2C förbereder användarflödesnamnet B2C_1_ . Till exempel kommer susi att bli B2C_1_susi.

Steg 2: Registrera webbprogram

I det här steget skapar du webbappen och programregistreringen för webb-API:et och anger omfången för webb-API:et.

Steg 2.1: Registrera webb-API-appen

Så här skapar du appregistreringen för webb-API:et (app-ID: 2):

  1. Logga in på Azure-portalen.

  2. Kontrollera att du använder katalogen som innehåller din Azure AD B2C-klientorganisation. Välj ikonen Kataloger + prenumerationer i portalens verktygsfält.

  3. I portalinställningarna | Sidan Kataloger + prenumerationer, leta upp din Azure AD B2C-katalog i listan Katalognamn och välj sedan Växla.

  4. I Azure-portalen söker du efter och väljer Azure AD B2C.

  5. Välj Appregistreringar och välj sedan Ny registrering.

  6. Som Namn anger du ett namn för programmet (till exempel my-api1). Lämna standardvärdena för omdirigerings-URI och kontotyper som stöds.

  7. Välj Registrera.

  8. När appregistreringen är klar väljer du Översikt.

  9. Registrera program-ID-värdet (klient) för senare användning när du konfigurerar webbprogrammet.

    Screenshot that demonstrates how to get a web A P I application I D.

Steg 2.2: Konfigurera webb-API-appomfattningar

  1. Välj det my-api1-program som du skapade (app-ID: 2) för att öppna sidan Översikt .

  2. Under Hantera väljer du Exponera ett API.

  3. Bredvid Program-ID-URI väljer du länken Ange. Ersätt standardvärdet (GUID) med ett unikt namn (till exempel tasks-api) och välj sedan Spara.

    När ditt webbprogram begär en åtkomsttoken för webb-API:et bör den lägga till den här URI:n som prefix för varje omfång som du definierar för API:et.

  4. Under Omfång som definieras av det här API:et väljer du Lägg till ett omfång.

  5. Så här skapar du ett omfång som definierar läsåtkomst till API:et:

    1. Ange tasks.read som Omfångsnamn.
    2. För Visningsnamn för administratörsmedgivande anger du Läs åtkomst till uppgifters API.
    3. För Beskrivning av administratörsmedgivande anger du Tillåt läsåtkomst till aktivitets-API:et.

  6. Välj Lägg till definitionsområde.

  7. Välj Lägg till ett omfång och lägg sedan till ett omfång som definierar skrivåtkomst till API:et:

    1. Ange tasks.write som Omfångsnamn.
    2. För Visningsnamn för administratörsmedgivande anger du Skrivåtkomst till aktivitets-API.
    3. För Beskrivning av administratörsmedgivande anger du Tillåt skrivåtkomst till aktivitets-API:et.

  8. Välj Lägg till definitionsområde.

Steg 2.3: Registrera webbappen

Gör följande för att skapa webbappregistreringen:

  1. Välj Appregistreringar och välj sedan Ny registrering.

  2. Under Namn anger du ett namn för programmet (till exempel webapp1).

  3. Under Kontotyper som stöds, välj Konton i valfri identitetsleverantör eller organisationskatalog (för autentisering av användare med användarflöden).

  4. Under Omdirigerings-URI väljer du Webb och i rutan URL anger du https://localhost:5000/signin-oidcsedan .

  5. Under Behörigheter väljer du kryssrutan Bevilja administratörsmedgivande till openid- och offlineåtkomstbehörigheter .

  6. Välj Registrera.

  7. När appregistreringen är klar väljer du Översikt.

  8. Registrera program-ID :t (klient) för senare användning när du konfigurerar webbprogrammet.

    Screenshot of the web app Overview page for recording your web application ID.

Steg 2.4: Skapa en webbappsklienthemlighet

Skapa en klienthemlighet för det registrerade webbprogrammet. Webbprogrammet använder klienthemligheten för att bevisa sin identitet när den begär token.

  1. Under Hantera väljer du Certifikat och hemligheter.
  2. Välj Ny klienthemlighet.
  3. I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel clientsecret1).
  4. Under Upphör att gälla väljer du en varaktighet för vilken hemligheten är giltig och väljer sedan Lägg till.
  5. Registrera hemlighetens värde. Du använder det här värdet för konfiguration i ett senare steg.

Steg 2.5: Bevilja webbappen behörigheter för webb-API:et

Följ dessa steg för att ge din app (app-ID: 1) behörighet:

  1. Välj Appregistreringar och välj sedan den app som du skapade (app-ID: 1).

  2. Under Hantera väljer du API-behörigheter.

  3. Under Konfigurerade behörigheter väljer du Lägg till en behörighet.

  4. Välj fliken Mina API:er .

  5. Välj det API (app-ID: 2) som webbprogrammet ska beviljas åtkomst till. Ange till exempel my-api1.

  6. Under Behörighet expanderar du aktiviteter och väljer sedan de omfång som du definierade tidigare (till exempel tasks.read och tasks.write).

  7. Välj Lägg till behörigheter.

  8. Välj Bevilja administratörsmedgivande för< ditt klientnamn>.

  9. Välj Ja.

  10. Välj Uppdatera och kontrollera sedan att Beviljad för ... visas under Status för båda omfången.

  11. I listan Konfigurerade behörigheter väljer du ditt omfång och kopierar sedan det fullständiga omfångsnamnet.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Steg 3: Hämta webbappexemplet

Ladda ned zip-filen eller kör följande Bash-kommando för att klona exempelwebbprogrammet från GitHub.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Extrahera exempelfilen till en mapp där sökvägens totala längd är 260 eller färre tecken.

Steg 4: Konfigurera exempelwebb-API:et

Öppna projektet TodoListService.csproj i exempelmappen i mappen 4-WebApp-your-API/4-2-B2C/TodoListService med Visual Studio eller Visual Studio Code.

Öppna filen appsettings.json under projektrotmappen. Den här filen innehåller information om din Azure AD B2C-identitetsprovider. Webb-API-appen använder den här informationen för att verifiera den åtkomsttoken som webbappen skickar som en ägartoken. Uppdatera följande egenskaper för appinställningarna:

Avsnitt Tangent Värde
AzureAdB2C Instans Den första delen av ditt Azure AD B2C-klientnamn. Exempel: https://contoso.b2clogin.com
AzureAdB2C Domain Ditt fullständiga klientnamn för Din Azure AD B2C-klientorganisation. Exempel: contoso.onmicrosoft.com
AzureAdB2C ClientId Webb-API-program-ID från steg 2.1.
AzureAdB2C SignUpSignInPolicyId Användarflödena eller den anpassade princip som du skapade i steg 1.

Den slutliga konfigurationsfilen bör se ut som följande JSON-fil:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Steg 4.1: Ange behörighetsprincipen

Webb-API:et verifierar att användaren autentiserades med ägartoken och att ägartoken har de konfigurerade godkända omfången. Om ägartoken inte har något av dessa godkända omfång returnerar webb-API:et HTTP-statuskod 403 (förbjuden) och skriver till svarstexten ett meddelande som anger vilka omfång som förväntas i token.

Om du vill konfigurera de godkända omfången öppnar du Controller/TodoListController.cs klassen och anger omfångsnamnet utan den fullständiga URI:n.

[RequiredScope("tasks.read")]

Steg 4.2: Kör exempelwebb-API-appen

Om du vill tillåta att webbappen anropar webb-API-exemplet kör du webb-API:et genom att göra följande:

  1. Om du uppmanas att göra det återställer du beroenden.
  2. Skapa och kör projektet.
  3. När projektet har skapats startar Visual Studio eller Visual Studio Code webb-API:et i webbläsarna med följande adress: https://localhost:44332.

Steg 5: Konfigurera exempelwebbappen

I exempelmappen 4-WebApp-your-API/4-2-B2C/Client under mappen öppnar du projektet TodoListClient.csproj med Visual Studio eller Visual Studio Code.

Öppna filen under projektrotmappen appsettings.json . Den här filen innehåller information om din Azure AD B2C-identitetsprovider. Webbappen använder den här informationen för att upprätta en förtroenderelation med Azure AD B2C, logga in och ut användare, hämta token och verifiera dem. Uppdatera följande egenskaper för appinställningarna:

Avsnitt Tangent Värde
AzureAdB2C Instans Den första delen av ditt Azure AD B2C-klientnamn (till exempel https://contoso.b2clogin.com).
AzureAdB2C Domain Ditt fullständiga klientnamn för Din Azure AD B2C-klientorganisation (till exempel contoso.onmicrosoft.com).
AzureAdB2C ClientId Webbprogram-ID:t från steg 2.3.
AzureAdB2C ClientSecret Webbprogramhemligheten från steg 2.4.
AzureAdB2C SignUpSignInPolicyId Användarflöden eller anpassad princip som du skapade i steg 1.
TodoList TodoListScope Webb-API:et omfång som du skapade i steg 2.5.
TodoList TodoListBaseAddress Bas-URI:n för ditt webb-API (till exempel https://localhost:44332).

Den slutliga konfigurationsfilen bör se ut som följande JSON:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Steg 6: Kör exempelwebbappen

  1. Skapa och kör projektet.
  2. Bläddra till https://localhost:5000.
  3. Slutför registreringen eller inloggningsprocessen.

När autentiseringen är klar visas visningsnamnet i navigeringsfältet. Om du vill visa de anspråk som Azure AD B2C-token returnerar till din app väljer du TodoList.

Screenshot of the web app token claims.

Distribuera appen

I ett produktionsprogram är omdirigerings-URI:n för appregistrering vanligtvis en offentligt tillgänglig slutpunkt där appen körs, till exempel https://contoso.com/signin-oidc.

Du kan lägga till och ändra omdirigerings-URI:er i dina registrerade program när som helst. Följande begränsningar gäller för omdirigerings-URI:er:

  • Svars-URL:en måste börja med schemat https.
  • Svars-URL:en är skiftlägeskänslig. Ärendet måste matcha fallet med URL-sökvägen för ditt program som körs.

Tokencache för en webbapp

Webbappexemplet använder cache-serialisering i minnet. Den här implementeringen är bra i exempel. Det är också bra i produktionsprogram, förutsatt att du inte har något emot om tokencachen går förlorad när webbappen startas om.

För produktionsmiljön rekommenderar vi att du använder en distribuerad minnescachen. Till exempel Redis-cache, NCache eller en SQL Server-cache. Mer information om implementeringar av distribuerad minnescachen finns i Token cache serialisering.

Nästa steg