Konfigurera autentisering i en exempelwebbapp med hjälp av Azure AD B2C

Den här artikeln använder ett exempel ASP.NET webbprogram 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 kan inte användas för att anropa ett REST-API, eftersom det returnerar en ID-token och inte en åtkomsttoken. En webbapp som kan anropa ett REST API finns i Skydda ett webb-API som har skapats med ASP.NET Core 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 logga in användare på ett säkert sätt 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.

Inloggningsflödet omfattar följande steg:

  1. Användarna 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 ID-token till appen.
  5. Appen validerar ID-token, läser anspråken och returnerar en säker sida till användarna.

När ID-token har upphört att gälla eller appsessionen har ogiltigförklarats initierar appen en ny autentiseringsbegäran och omdirigerar användare till Azure AD B2C. Om Azure AD B2C SSO-sessionen är aktiv utfärdar Azure AD B2C en åtkomsttoken utan att uppmana användarna att logga in igen. Om Azure AD B2C-sessionen upphör att gälla eller blir ogiltig uppmanas användarna att logga in igen.

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ändarna 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 något av följande:

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.

Steg 2: Registrera en webbapp

Om du vill göra det möjligt för ditt program att logga in med Azure AD B2C registrerar du din app i Azure AD B2C-katalogen. När du registrerar din app upprättas en förtroenderelation mellan appen och Azure AD B2C.

Under appregistreringen anger du omdirigerings-URI:n. Omdirigerings-URI:n är den slutpunkt som användarna omdirigeras till av Azure AD B2C när de har autentiserats med Azure AD B2C. Appregistreringsprocessen genererar ett program-ID, även kallat klient-ID, som unikt identifierar din app. När din app har registrerats använder Azure AD B2C både program-ID:t och omdirigerings-URI:n för att skapa autentiseringsbegäranden.

Använd följande steg för att skapa webbappregistreringen:

  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 Portal söker du efter och väljer Azure AD B2C.

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

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

  7. Under Kontotyper som stöds väljer du Konton i valfri identitetsprovider eller organisationskatalog (för att autentisera användare med användarflöden).

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

  9. Under Behörigheter markerar du kryssrutan Bevilja administratörsmedgivande till openid- och offlineåtkomstbehörigheter .

  10. Välj Register (Registrera).

  11. Välj Översikt.

  12. 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 3: Hämta webbappexemplet

Ladda ned zip-filen eller 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 exempelwebbappen

I exempelmappen under mappen 1-WebApp-OIDC/1-5-B2C/ öppnar du projektet WebApp-OpenIDConnect-DotNet.csproj 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. Uppdatera följande egenskaper för appinställningar:

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 ID för webbappprogram (klient) från steg 2.
AzureAdB2C SignUpSignInPolicyId Användarflöden eller anpassad princip som du skapade i steg 1.

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>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Steg 5: Kör exempelwebbappen

  1. Skapa och kör projektet.

  2. Gå till https://localhost:44316.

  3. Välj Registrera dig/in.

    Screenshot of the sign in and sign up button on the project Welcome page.

  4. Slutför registreringen eller inloggningsprocessen.

Efter en lyckad autentisering visas ditt visningsnamn i navigeringsfältet. Om du vill visa de anspråk som Azure AD B2C-token returnerar till din app väljer du Anspråk.

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. Dess skiftläge måste matcha fallet med URL-sökvägen för ditt program som körs.

Nästa steg