Hitelesítés konfigurálása egy egyoldalas Angular-mintaalkalmazásban az Azure Active Directory B2C használatával

Fontos

2025. május 1-jére az Azure AD B2C már nem lesz elérhető az új ügyfelek számára. További információ a GYIK-ben.

Ez a cikk egy egyoldalas Angular-mintaalkalmazást (SPA) használ az Azure Active Directory B2C (Azure AD B2C) hitelesítés hozzáadásához az Angular-alkalmazásokhoz.

Áttekintés

Az OpenID Connect (OIDC) az OAuth 2.0-ra épülő hitelesítési protokoll, amellyel egy felhasználó biztonságosan bejelentkezhet egy alkalmazásba. Ez az Angular-minta az MSAL Angulart és az MSAL Böngészőt használja. Az MSAL egy Microsoft által biztosított kódtár, amely leegyszerűsíti a hitelesítési és engedélyezési támogatás hozzáadását az Angular SPA-khoz.

Bejelentkezési folyamat

A bejelentkezési folyamat a következő lépéseket foglalja magában:

1. A felhasználó megnyitja az alkalmazást, és kiválasztja a Bejelentkezés lehetőséget.
2. Az alkalmazás elindít egy hitelesítési kérelmet, és átirányítja a felhasználót az Azure AD B2C-be.
3. A felhasználó regisztrál vagy bejelentkezik , és alaphelyzetbe állítja a jelszót, vagy bejelentkezik egy közösségi fiókkal.
4. Sikeres bejelentkezés esetén az Azure AD B2C egy engedélyezési kódot ad vissza az alkalmazásnak. Az alkalmazás a következő műveleteket hajtja végre:
   1. Kicseréli az azonosító jogkivonat engedélyezési kódját, a hozzáférési jogkivonatot és a frissítési jogkivonatot.
   2. Beolvassa az azonosító jogkivonat jogcímeit.
   3. A hozzáférési jogkivonatot és a frissítési jogkivonatot egy memóriabeli gyorsítótárban tárolja későbbi használatra. A hozzáférési jogkivonat lehetővé teszi, hogy a felhasználó védett erőforrásokat, például webes API-t hívjon meg. A frissítési jogkivonat egy új hozzáférési jogkivonat beszerzésére szolgál.

Alkalmazásregisztráció

Ahhoz, hogy az alkalmazás bejelentkezhessen az Azure AD B2C-vel, és meghívjon egy webes API-t, két alkalmazást kell regisztrálnia az Azure AD B2C-bérlőben:

• Az egyoldalas alkalmazás (Angular) regisztrációjával az alkalmazás bejelentkezhet az Azure AD B2C-vel. Az alkalmazásregisztráció során meg kell adnia az átirányítási URI-t. Az átirányítási URI az a végpont, amelyre a rendszer átirányítja a felhasználót az Azure AD B2C-vel való hitelesítés után. Az alkalmazásregisztrációs folyamat létrehoz egy alkalmazásazonosítót, más néven ügyfél-azonosítót, amely egyedileg azonosítja az alkalmazást. Ez a cikk az 1. példaalkalmazás-azonosítót használja.

• A webes API-regisztrációval az alkalmazás meghívhat egy védett webes API-t. A regisztráció elérhetővé teszi a webes API-engedélyeket (hatóköröket). Az alkalmazásregisztrációs folyamat létrehoz egy alkalmazásazonosítót, amely egyedileg azonosítja a webes API-t. Ez a cikk a 2. példaalkalmazás-azonosítót használja. Adjon engedélyt az alkalmazásnak (alkalmazásazonosító: 1) a webes API-hatókörökhöz (alkalmazásazonosító: 2).

Az alábbi ábra az alkalmazásregisztrációkat és az alkalmazásarchitektúrát ismerteti.

Webes API meghívása

A hitelesítés befejezése után a felhasználók kapcsolatba lépnek az alkalmazással, amely egy védett webes API-t hív meg. A webes API hozzáférési token hitelesítést használ. A bearer token az az alkalmazás által az Azure AD B2C-ből beszerzett hozzáférési token. Az alkalmazás átadja a tokent a HTTPS-kérés hitelesítési fejlécében.

Authorization: Bearer <access token>

Ha a hozzáférési jogkivonat hatóköre nem egyezik a webes API hatóköreivel, a hitelesítési kódtár egy új hozzáférési jogkivonatot szerez be a megfelelő hatókörökkel.

Kijelentkezés folyamata

A kijelentkezés folyamata a következő lépésekből áll:

1. Az alkalmazásból a felhasználók kijelentkeznek.
2. Az alkalmazás törli saját munkamenet-objektumait, és a hitelesítési könyvtár törli a jogkivonat-gyorsítótárát.
3. Az alkalmazás az Azure AD B2C bejelentkezési végpontra viszi a felhasználókat az Azure AD B2C-munkamenet leállításához.
4. A rendszer visszairányítja a felhasználókat az alkalmazásba.

Előfeltételek

A cikkben ismertetett eljárások követése előtt győződjön meg arról, hogy a számítógép fut:

• Visual Studio Code vagy bármely más kódszerkesztő.
• Node.js futtatókörnyezetet és az npm-et.
• Szögletes CLI.

1. lépés: A felhasználói folyamat konfigurálása

Amikor a felhasználók megpróbálnak bejelentkezni az alkalmazásba, az alkalmazás elindít egy hitelesítési kérést az engedélyezési végponthoz egy felhasználói folyamaton keresztül. A felhasználói folyamat határozza meg és szabályozza a felhasználói élményt. Miután a felhasználók befejezték a felhasználói folyamatot, az Azure AD B2C létrehoz egy jogkivonatot, majd visszairányítja a felhasználókat az alkalmazásba.

Ha még nem tette meg, hozzon létre egy felhasználói folyamatot vagy egy egyéni szabályzatot. Ismételje meg a lépéseket három különálló felhasználói folyamat létrehozásához az alábbiak szerint:

• Kombinált bejelentkezési és regisztrációs felhasználói folyamat, például susi. Ez a felhasználói folyamat az Elfelejtett jelszó funkciót is támogatja.
• Egy profilszerkesztési felhasználói folyamat, mint például .
• Egy jelszó visszaállítása felhasználói folyamat, például reset_password.

Az Azure AD B2C előfűzi a B2C_1_ a felhasználói folyamat neve elé. susi például B2C_1_susilesz.

2. lépés: Az Angular SPA és API regisztrálása

Ebben a lépésben létrehozza az Angular SPA és a webes API-alkalmazás regisztrációit. Megadhatja a webes API hatóköreit is.

2.1 A webes API-alkalmazás regisztrálása

A webes API-alkalmazásregisztráció létrehozásához (alkalmazásazonosító: 2) kövesse az alábbi lépéseket:

1. Jelentkezzen be a Azure portalra.

2. Győződjön meg arról, hogy az Azure AD B2C-bérlőt tartalmazó könyvtárat használja. Válassza a Címtárak + előfizetések ikont a portál eszköztárán.

3. A Portál beállításai | Címtárak + előfizetések lap, keresse meg az Azure AD B2C-címtárat a címtárnévlistában, majd válassza a Váltás lehetőséget.

4. Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.

5. Válassza Alkalmazásregisztrációklehetőséget, majd válassza Új regisztrációslehetőséget.

6. A Név mezőbe írja be az alkalmazás nevét (például my-api1). Hagyja meg az átirányítási URI és a támogatott fióktípusok alapértelmezett értékeit.

7. Válassza a Regisztrálás lehetőséget.

8. Az alkalmazásregisztráció befejezése után válassza az Áttekintés lehetőséget.

9. Jegyezze fel az alkalmazás (ügyfél) azonosítóját a webalkalmazás konfigurálásakor későbbi használatra.

   

2.2 Hatókörök konfigurálása

1. Válassza ki a létrehozott my-api1 alkalmazást (alkalmazásazonosító: 2) az Áttekintés lap megnyitásához.

2. A Kezelésalatt válassza a API közzétételelehetőséget.

3. Az alkalmazásazonosító URI-ja mellett válassza a Beállítás hivatkozást. Cserélje le az alapértelmezett értéket (GUID) egy egyedi névre (például tasks-api), majd válassza a Mentés lehetőséget.

   Amikor a webalkalmazás hozzáférési jogkivonatot kér a webes API-hoz, ezt az URI-t kell hozzáadnia az API-hoz definiált hatókörök előtagjaként.

4. Az API-által definiálthatókörök alatt kattintson a Hatókör hozzáadásagombra.

5. Az API olvasási hozzáférését meghatározó hatókör létrehozása:

   1. A hatókör neveként adja meg a tasks.read értéket.
   2. A „Rendszergazdai hozzájárulás megjelenítendő neve” mezőbe írja be a „Feladatok API olvasási hozzáférés” kifejezést.
   3. A rendszergazdai hozzájárulás leírásához írja be, hogy Engedélyezi a feladatok API olvasási hozzáférést.

6. Válassza a Hatókör hozzáadása lehetőséget.

7. Válassza a Hatókör hozzáadása lehetőséget, majd adjon hozzá egy, az API írási hozzáférését meghatározó hatókört:

   1. A Hatókör neve mezőbe írja be: tasks.write.
   2. Az „Adminisztrátori hozzájárulás megjelenítendő neve” mezőbe írja be, hogy „Feladatok API-hoz írási hozzáférés”.
   3. A rendszergazdai hozzájárulás leírásához írja be, hogy Lehetővé teszi az írási hozzáférést a feladatkezelő API-hoz.

8. Válassza a Hatókör hozzáadása lehetőséget.

2.3 Az Angular-alkalmazás regisztrálása

Kövesse az alábbi lépéseket az Angular-alkalmazásregisztráció létrehozásához:

1. Jelentkezzen be a Azure portalra.
2. Ha több bérlőhöz is hozzáférése van, a felső menüben a Beállítások ikont választva váltson az Azure AD B2C-bérlőre a Címtárak + előfizetések menüből.
3. Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
4. Válassza Alkalmazásregisztrációklehetőséget, majd válassza Új regisztrációslehetőséget.
5. A Név mezőbe írja be az alkalmazás nevét. Például írja be a MyAppot.
6. A Támogatott fióktípusokterületen válassza a -fiókokat bármely identitásszolgáltatóban vagy szervezeti könyvtárban (felhasználói folyamatokkal rendelkező felhasználók hitelesítéséhez).
7. Az Átirányítási URI területen válassza az Egyoldalas alkalmazás (SPA) lehetőséget, majd írja be http://localhost:4200 az URL-címet.
8. Az Engedélyek csoportban jelölje be a Rendszergazdai hozzájárulás megadása az openid és offline hozzáférési engedélyekhez jelölőnégyzetet.
9. Válassza a Regisztrálás lehetőséget.
10. Jegyezze fel az alkalmazás (ügyfél) azonosítójának értékét a webalkalmazás konfigurálásakor egy későbbi lépésben.

2.5 Engedélyek megadása

Az alkalmazás (alkalmazásazonosító: 1) engedélyének megadásához kövesse az alábbi lépéseket:

1. Válassza Alkalmazásregisztrációk, majd válassza ki a létrehozott alkalmazást (alkalmazásazonosító: 1).

2. A Kezelés területen válassza ki az API-engedélyeket.

3. A Konfigurált engedélyek csoportban válassza az Engedély hozzáadása lehetőséget.

4. Válassza a Saját API-k lapot.

5. Válassza ki azt az API-t (alkalmazásazonosító: 2), amelyhez a webalkalmazásnak hozzáférést kell biztosítani. Például írja be, hogy my-api1.

6. Az Engedély területen bontsa ki a tevékenységeket, majd válassza ki a korábban definiált hatóköröket (például tasks.read és tasks.write).

7. Válassza a(z) Engedélyek hozzáadásalehetőséget.

8. Válassza a <bérlője nevének> rendszergazdai hozzájárulás megadása lehetőséget.

9. Válassza Igenlehetőséget.

10. Válassza a Frissítés lehetőséget, majd ellenőrizze, hogy a Megadva ...-nak megjelenik-e Állapot alatt mindkét hatókör esetén.

11. A Konfigurált engedélyek listájában válassza ki a hatókört, majd másolja a hatókör teljes nevét.

    

3. lépés: Az Angular-mintakód lekérése

Ez a minta bemutatja, hogy egy Angular egyoldalas alkalmazás hogyan használhatja az Azure AD B2C-t a felhasználói regisztrációhoz és a bejelentkezéshez. Ezután az alkalmazás beszerez egy hozzáférési jogkivonatot, és meghív egy védett webes API-t.

Töltse le a minta .zip fájlját , vagy klónozza a mintát a GitHub-adattárból az alábbi paranccsal:

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

3.1 Az Angular-minta konfigurálása

Most, hogy beszerezte az SPA-mintát, frissítse a kódot az Azure AD B2C-vel és a webes API-értékekkel. A mintamappában, az src/app mappa alatt nyissa meg a auth-config.ts fájlt. Frissítse a kulcsokat a megfelelő értékekkel:

Szakasz	Kulcs	Érték
b2c szabályzatok	Nevek	Az 1. lépésben létrehozott felhasználói folyamat vagy egyéni szabályzat.
b2c szabályzatok	Hatóságok	Cserélje le your-tenant-name az Azure AD B2C bérlő nevét. Használja például a contoso.onmicrosoft.com. Ezután cserélje le a szabályzat nevét az 1. lépésben létrehozott felhasználói folyamatra vagy egyéni szabályzatra. Például: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2c szabályzatok	hatósági tartomány	Az Azure AD B2C-bérlő neve. Például: contoso.onmicrosoft.com.
Konfiguráció	clientId	Az Angular-alkalmazás azonosítója a 2.3. lépésből.
védett erőforrások	végpont	A web API URL-je: http://localhost:5000/api/todolist.
védett erőforrások	Hatáskörök	A 2.2. lépésben létrehozott webes API-hatókörök. Például: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

Az eredményként kapott src/app/auth-config.ts kódnak az alábbi mintához hasonlóan kell kinéznie:

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"],
  },
}

4. lépés: A webes API mintakódjának lekérése

Most, hogy a webes API regisztrálva lett, és ön definiálta a hatóköreit, konfigurálja a webes API-kódot az Azure AD B2C-bérlővel való együttműködéshez.

Töltsön le egy *.zip archívumot, vagy klónozza a minta webes API-projektet a GitHubról. A GitHubon közvetlenül is tallózhat az Azure-Samples/active-directory-b2c-javascript-nodejs-webapi projekthez a következő paranccsal:

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

4.1 A webes API konfigurálása

A mintamappában nyissa meg a config.json fájlt. Ez a fájl az Azure AD B2C identitásszolgáltatójáról tartalmaz információkat. A web API alkalmazás ezt az információt használja a webalkalmazás által átadott hozzáférési jogkivonat érvényességének ellenőrzésére, amelyet bearer tokenként továbbítanak. Frissítse az alkalmazásbeállítások alábbi tulajdonságait:

Szakasz	Kulcs	Érték
hitelesítő adatok	bérlőNeve	Az Azure AD B2C-bérlő nevének első része. Például: contoso.
hitelesítő adatok	ügyfélazonosító	A 2.1 lépésben található web API alkalmazás azonosítója. A korábbi ábrán az alkalmazás a 2-es App ID-val.
hitelesítő adatok	kibocsátó	(Nem kötelező) A jogkivonat-kiállító iss jogcímértéke. Az Azure AD B2C alapértelmezés szerint a következő formátumban adja vissza a tokent: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Cserélje le <your-tenant-name> az Azure AD B2C-bérlő nevének első részére. Helyettesítse a <your-tenant-ID> az Azure AD B2C bérlőazonosítójával.
irányelvek	szabályzat neve	Az 1. lépésben létrehozott felhasználói folyamat vagy egyéni szabályzat. Ha az alkalmazás több felhasználói folyamatot vagy egyéni szabályzatot használ, csak egyet adjon meg. Használja például a regisztrációs vagy bejelentkezési felhasználói folyamatot.
erőforrás	kiterjedés	A web API-alkalmazásregisztráció hatókörei a 2.5. lépésből.

A végső konfigurációs fájlnak a következő JSON-fájlhoz hasonlóan kell kinéznie:

{
    "credentials": {
        "tenantName": "<your-tenant-name>",
        "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
} 

5. lépés: Az Angular SPA és a webes API futtatása

Most már tesztelheti az Angular hatókörű hozzáférését az API-hoz. Ebben a lépésben futtassa a webes API-t és a minta Angular-alkalmazást a helyi gépen. Ezután jelentkezzen be az Angular-alkalmazásba, és válassza a TodoList gombot a védett API-ra irányuló kérés indításához.

A webes API futtatása

1. Nyisson meg egy konzolablakot, és váltson a webes API-mintát tartalmazó könyvtárra. Például:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Futtassa az alábbi parancsot:

   npm install && npm update
   node index.js
   

   A konzolablakban megjelenik az alkalmazás helyének portszáma:

   Listening on port 5000...
   

Az Angular-alkalmazás futtatása

1. Nyisson meg egy másik konzolablakot, és váltson az Angular-mintát tartalmazó könyvtárra. Például:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. Futtassa az alábbi parancsot:

   npm install && npm update
   npm start
   

   A konzolablak megjeleníti az alkalmazás helyének portszámát:

   Listening on port 4200...
   

3. Nyissa meg a böngészőben a http://localhost:4200 hivatkozást az alkalmazás megtekintéséhez.

4. Válassza Bejelentkezésilehetőséget.

   

5. Fejezze be a regisztrációs vagy bejelentkezési folyamatot.

6. A sikeres bejelentkezés után meg kell jelennie a profiljának. A menüben válassza a TodoList lehetőséget.

   

7. A Hozzáadás gombra kattintva új elemeket vehet fel a listára, vagy az ikonok használatával törölheti vagy szerkesztheti az elemeket.

   

Az alkalmazás üzembe helyezése

Éles alkalmazásokban az alkalmazásregisztráció átirányítási URI-ja általában egy nyilvánosan elérhető végpont, ahol az alkalmazás fut, például https://contoso.com.

A regisztrált alkalmazásokban bármikor hozzáadhat és módosíthat átirányítási URI-kat. Az átirányítási URI-kra a következő korlátozások vonatkoznak:

• A válasz URL-címnek a sémával httpskell kezdődnie.
• A válasz URL-címe megkülönbözteti a kis- és nagybetűkre vonatkozó adatokat. Az esetnek meg kell egyeznie a futó alkalmazás URL-elérési útjának esetével.

Kapcsolódó tartalom

• További információ a kódmintáról
• Hitelesítés engedélyezése saját Angular-alkalmazásban
• Hitelesítési beállítások konfigurálása az Angular-alkalmazásban
• Hitelesítés engedélyezése a saját webes API-ban