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!

Exempel 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 skapas 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ä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 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ä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 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. 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 ett webbprogram

Om du vill göra det möjligt för ditt program att logga in med Azure AD B2C registrerar du din app i katalogen Azure AD B2C. 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 slutpunkten 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 appen 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. Om du har åtkomst till flera klienter väljer du ikonen Inställningar på den översta menyn för att växla till din Azure AD B2C-klient från menyn Kataloger + prenumerationer.

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

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

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

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

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

  8. Under Autentisering går du till Implicit beviljande och hybridflöden och markerar kryssrutan ID-token (används för implicita flöden och hybridflöden).

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

  10. Välj 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-OpenID Anslut-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 Webbappprogrammets (klient)-ID 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 lyckad autentisering visas visningsnamnet 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. Ärendet måste matcha fallet med URL-sökvägen för ditt program som körs.

Nästa steg