Konfigurera autentisering i ett angular-enkelsidigt exempelprogram med hjälp av Azure Active Directory B2C

Artikel
01/11/2024

Den här artikeln använder ett angular-exempelprogram (SPA) för att illustrera hur du lägger till Azure Active Directory B2C-autentisering (Azure AD B2C) i dina Angular-appar.

Översikt

OpenID Connect (OIDC) är ett autentiseringsprotokoll som bygger på OAuth 2.0 och som gör att du kan logga in en användare i ett program på ett säkert sätt. Det här Angular-exemplet använder MSAL Angular och MSAL Browser. MSAL är ett Microsoft-tillhandahållet bibliotek som förenklar tillägg av stöd för autentisering och auktorisering till Angular-SPA:er.

Inloggningsflödet omfattar följande steg:

Användaren öppnar appen och väljer Logga in.
Appen startar en autentiseringsbegäran och omdirigerar användaren till Azure AD B2C.
Användaren registrerar sig eller loggar in och återställer lösenordet eller loggar in med ett socialt konto.
Vid lyckad inloggning returnerar Azure AD B2C en auktoriseringskod till appen. Appen vidtar följande åtgärder:
1. Byter auktoriseringskoden mot en ID-token, åtkomsttoken och uppdateringstoken.
2. Läser ID-tokenanspråken.
3. Lagrar åtkomsttoken och uppdateringstoken i en minnesintern cache för senare användning. Med åtkomsttoken kan användaren anropa skyddade resurser, till exempel ett webb-API. Uppdateringstoken används för att hämta en ny åtkomsttoken.

Appregistrering

Om du vill att din app ska kunna logga in med Azure AD B2C och anropa ett webb-API måste du registrera två program i din Azure AD B2C-klientorganisation:

Med ensidesregistreringen (Angular) kan din app logga in med Azure AD B2C. Under appregistreringen anger du omdirigerings-URI:n. Omdirigerings-URI:n är den slutpunkt som användaren omdirigeras till när de har autentiserats med Azure AD B2C. Appregistreringsprocessen genererar ett program-ID, även kallat klient-ID, som unikt identifierar din app. I den här artikeln används exempelapp-ID : 1.
Med registreringen av webb-API :et kan din app anropa ett skyddat webb-API. Registreringen exponerar webb-API-behörigheter (omfång). Appregistreringsprocessen genererar ett program-ID som unikt identifierar ditt webb-API. I den här artikeln används exempelapp-ID : 2. Ge din app (app-ID: 1) behörighet till webb-API-omfången (app-ID: 2).

I följande diagram beskrivs appregistreringarna och apparkitekturen.

Diagram that describes a single-page application with web A P I, 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.

Utloggningsflöde

Utloggningsflödet omfattar följande steg:

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

Förutsättningar

Innan du följer procedurerna i den här artikeln kontrollerar du att datorn körs:

Visual Studio Code eller någon annan kodredigerare.
Node.js-körning och npm.
Angular CLI.

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 ditt Angular SPA och API

I det här steget skapar du registreringarna för Angular SPA och webb-API-appen. Du anger även omfången för webb-API:et.

2.1 Registrera webb-API-programmet

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

Logga in på Azure-portalen.
Kontrollera att du använder katalogen som innehåller din Azure AD B2C-klientorganisation. Välj ikonen Kataloger + prenumerationer i portalens verktygsfält.
I portalinställningarna | Sidan Kataloger + prenumerationer, leta upp din Azure AD B2C-katalog i listan Katalognamn och välj sedan Växla.
I Azure-portalen söker du efter och väljer Azure AD B2C.
Välj Appregistreringar och välj sedan Ny registrering.
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.
Välj Registrera.
När appregistreringen är klar väljer du Översikt.
Registrera program-ID-värdet (klient) för senare användning när du konfigurerar webbprogrammet.

2.2 Konfigurera omfång

Välj det my-api1-program som du skapade (app-ID: 2) för att öppna sidan Översikt .
Under Hantera väljer du Exponera ett API.
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.
Under Omfång som definieras av det här API:et väljer du Lägg till ett omfång.
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.
Välj Lägg till definitionsområde.
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.
Välj Lägg till definitionsområde.

2.3 Registrera Angular-appen

Följ dessa steg för att skapa Angular-appregistreringen:

Logga in på Azure-portalen.
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.
I Azure-portalen söker du efter och väljer Azure AD B2C.
Välj Appregistreringar och välj sedan Ny registrering.
Som Namn anger du ett namn för programmet. Ange till exempel MyApp.
Under Kontotyper som stöds, välj Konton i valfri identitetsleverantör eller organisationskatalog (för autentisering av användare med användarflöden).
Under Omdirigerings-URI väljer du Enkelsidigt program (SPA) och anger http://localhost:4200 sedan i rutan URL.
Under Behörigheter väljer du kryssrutan Bevilja administratörsmedgivande till openid- och offlineåtkomstbehörigheter .
Välj Registrera.
Registrera värdet program-ID (klient) för användning i ett senare steg när du konfigurerar webbprogrammet.

2.5 Bevilja behörigheter

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

Välj Appregistreringar och välj sedan den app som du skapade (app-ID: 1).
Under Hantera väljer du API-behörigheter.
Under Konfigurerade behörigheter väljer du Lägg till en behörighet.
Välj fliken Mina API:er .
Välj det API (app-ID: 2) som webbprogrammet ska beviljas åtkomst till. Ange till exempel my-api1.
Under Behörighet expanderar du aktiviteter och väljer sedan de omfång som du definierade tidigare (till exempel tasks.read och tasks.write).
Välj Lägg till behörigheter.
Välj Bevilja administratörsmedgivande för< ditt klientnamn>.
Välj Ja.
Välj Uppdatera och kontrollera sedan att Beviljad för ... visas under Status för båda omfången.
I listan Konfigurerade behörigheter väljer du ditt omfång och kopierar sedan det fullständiga omfångsnamnet.

Steg 3: Hämta Angular-exempelkoden

Det här exemplet visar hur ett enkelsidigt Angular-program kan använda Azure AD B2C för registrering och inloggning av användare. Sedan hämtar appen en åtkomsttoken och anropar ett skyddat webb-API.

Ladda ned en ZIP-fil i exemplet eller klona exemplet från GitHub-lagringsplatsen med hjälp av följande kommando:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Konfigurera Angular-exemplet

Nu när du har hämtat SPA-exemplet uppdaterar du koden med dina Azure AD B2C- och webb-API-värden. Öppna filen auth-config.ts under mappen src/app i exempelmappen. Uppdatera nycklarna med motsvarande värden:

Avsnitt	Tangent	Värde
b2cPolicies	Namn	Användarflödet eller den anpassade princip som du skapade i steg 1.
b2cPolicies	Myndigheterna	Ersätt `your-tenant-name` med ditt Azure AD B2C-klientnamn. Använd till exempel `contoso.onmicrosoft.com`. Ersätt sedan principnamnet med användarflödet eller den anpassade princip som du skapade i steg 1. Exempel: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`.
b2cPolicies	authorityDomain	Ditt Azure AD B2C-klientnamn. Exempel: `contoso.onmicrosoft.com`.
Konfiguration	clientId	Angular-program-ID:t från steg 2.3.
protectedResources	slutpunkt	URL:en för webb-API:et: `http://localhost:5000/api/todolist`.
protectedResources	scopes	Webb-API:ets omfång som du skapade i steg 2.2. Exempel: `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`.

Din resulterande src/app/auth-config.ts-kod bör se ut ungefär som i följande exempel:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

Steg 4: Hämta exempelkoden för webb-API:et

Nu när webb-API:et har registrerats och du har definierat dess omfång konfigurerar du webb-API-koden så att den fungerar med din Azure AD B2C-klientorganisation.

Ladda ned ett *.zip-arkiv eller klona webb-API-exempelprojektet från GitHub. Du kan också bläddra direkt till projektet Azure-Samples/active-directory-b2c-javascript-nodejs-webapi på GitHub med hjälp av följande kommando:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1 Konfigurera webb-API:et

Öppna filen config.json i exempelmappen. 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
autentiseringsuppgifter	tenantName	Den första delen av ditt Azure AD B2C-klientnamn. Exempel: `contoso`.
autentiseringsuppgifter	clientID	Webb-API-program-ID från steg 2.1. I det tidigare diagrammet är det programmet med app-ID: 2.
autentiseringsuppgifter	Emittenten	(Valfritt) Anspråksvärdet för token utfärdare `iss` . Azure AD B2C returnerar som standard token i följande format: `https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/`. Ersätt `<your-tenant-name>` med den första delen av ditt Azure AD B2C-klientnamn. Ersätt `<your-tenant-ID>` med ditt Azure AD B2C-klient-ID.
policies	policyName	Användarflödet eller den anpassade princip som du skapade i steg 1. Om ditt program använder flera användarflöden eller anpassade principer anger du bara en. Använd till exempel användarflödet för registrering eller inloggning.
resource	omfattning	Omfången för din registrering av webb-API-program från steg 2.5.

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

{
    "credentials": {
        "tenantName": "<your-tenant-namee>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
}

Steg 5: Kör Angular SPA och webb-API

Nu är du redo att testa angular-omfångsåtkomsten till API:et. I det här steget kör du både webb-API:et och angular-exempelprogrammet på den lokala datorn. Logga sedan in på Angular-programmet och välj knappen TodoList för att starta en begäran till det skyddade API:et.

Kör webb-API:et

Öppna ett konsolfönster och ändra till katalogen som innehåller webb-API-exemplet. Till exempel:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Kör följande kommandon:
```
npm install && npm update
node index.js
```
Konsolfönstret visar portnumret där programmet finns:
```
Listening on port 5000...
```

Kör Angular-programmet

Öppna ett annat konsolfönster och ändra till katalogen som innehåller Angular-exemplet. Till exempel:
```
cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
```
Kör följande kommandon:
```
npm install && npm update
npm start
```
Konsolfönstret visar portnumret för där programmet finns:
```
Listening on port 4200...
```
Gå till http://localhost:4200 i webbläsaren för att visa programmet.
Välj Logga in.
Slutför registreringen eller inloggningsprocessen.
När du har loggat in bör du se din profil. På menyn väljer du TodoList.
Välj Lägg till för att lägga till nya objekt i listan eller använd ikonerna för att ta bort eller redigera objekt.

Distribuera appen

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

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.

Dela via

Konfigurera autentisering i ett angular-enkelsidigt exempelprogram med hjälp av Azure Active Directory B2C

Översikt

Appregistrering

Anrop till ett webb-API

Utloggningsflöde

Förutsättningar

Steg 1: Konfigurera användarflödet

Steg 2: Registrera ditt Angular SPA och API

2.1 Registrera webb-API-programmet

2.2 Konfigurera omfång

2.3 Registrera Angular-appen

2.5 Bevilja behörigheter

Steg 3: Hämta Angular-exempelkoden

3.1 Konfigurera Angular-exemplet

Steg 4: Hämta exempelkoden för webb-API:et

4.1 Konfigurera webb-API:et

Steg 5: Kör Angular SPA och webb-API

Kör webb-API:et

Kör Angular-programmet

Distribuera appen

Nästa steg

Feedback

Ytterligare resurser

Dela via

Konfigurera autentisering i ett angular-enkelsidigt exempelprogram med hjälp av Azure Active Directory B2C

Översikt

Logga in flöde

Appregistrering

Anrop till ett webb-API

Utloggningsflöde

Förutsättningar

Steg 1: Konfigurera användarflödet

Steg 2: Registrera ditt Angular SPA och API

2.1 Registrera webb-API-programmet

2.2 Konfigurera omfång

2.3 Registrera Angular-appen

2.5 Bevilja behörigheter

Steg 3: Hämta Angular-exempelkoden

3.1 Konfigurera Angular-exemplet

Steg 4: Hämta exempelkoden för webb-API:et

4.1 Konfigurera webb-API:et

Steg 5: Kör Angular SPA och webb-API

Kör webb-API:et

Kör Angular-programmet

Distribuera appen

Nästa steg

Feedback

Ytterligare resurser