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

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

OpenID Connect (OIDC) is an authentication protocol built on OAuth 2.0 that you can use to securely sign in a user to an application. 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 tulajdonosi jogkivonat-hitelesítést használ. A tulajdonosi jogkivonat az az alkalmazás által az Azure AD B2C-ből beszerzett hozzáférési jogkivonat. Az alkalmazás átadja a jogkivonatot a HTTPS-kérés engedélyezé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 a munkamenet-objektumokat, a hitelesítési tár pedig 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örnyezet és npm.
• Angular 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és és felhasználói folyamat regisztrálása , például susi. Ez a felhasználói folyamat az Elfelejtett jelszó funkciót is támogatja.
• Profilszerkesztési felhasználói folyamat, például edit_profile.
• Új jelszó kérése felhasználói folyamat, például reset_password.

Az Azure AD B2C előre fel van függve B2C_1_ a felhasználói folyamat nevére. Például a susi következő lesz B2C_1_susi: .

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 az 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 a Alkalmazásregisztrációk, majd az Új regisztráció lehető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és területen válassza az API-k felfedése lehetőséget.

3. Az alkalmazásazonosító URI-ja mellett válassza a Hivatkozás beállítása lehetőséget. 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ált hatókörök alatt válassza a Hatókör hozzáadása lehetőséget.

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 nevet.
   2. Ha Rendszergazda hozzájárulás megjelenítendő nevét, írja be a Feladatok API olvasási hozzáférését.
   3. A Rendszergazda hozzájárulás leírásához írja be A feladatok API olvasási hozzáférésének engedélyezése című cikket.

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 a tasks.write nevet.
   2. Ha Rendszergazda hozzájárulás megjelenítendő nevét szeretné megadni, írja be a Feladatok API írási hozzáférését.
   3. A Rendszergazda hozzájárulás leírásához írja be a Tevékenység API írási hozzáférését.

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 az Azure Portalra.
2. Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz 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 a Alkalmazásregisztrációk, majd az Új regisztráció lehetőséget.
5. A Név mezőbe írja be az alkalmazás nevét. Írja be például a MyAppot.
6. A Támogatott fióktípusok területen válassza a Fiókok lehetőséget bármely identitásszolgáltatóban vagy szervezeti címtárban (a felhasználók felhasználói folyamatokkal való 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. Írja be például a my-api1 nevet.

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. Jelölje be az Engedélyek hozzáadása lehetőséget.

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

9. Válassza az Igen lehetőséget.

10. Válassza a Frissítés lehetőséget, majd ellenőrizze, hogy a megadott for ... jelenik-e meg mindkét hatókör állapotában .

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

    

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 az auth-config.ts fájlt. Frissítse a kulcsokat a megfelelő értékekkel:

Section	Key	Érték
b2cPolicies	Nevek	Az 1. lépésben létrehozott felhasználói folyamat vagy egyéni szabályzat.
b2cPolicies	Hatóságok	Cserélje le your-tenant-name az Azure AD B2C-bérlő nevét. Használja például a következőt 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. For example: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2cPolicies	authorityDomain	Az Azure AD B2C-bérlő neve. For example: contoso.onmicrosoft.com.
Konfiguráció	clientId	Az Angular-alkalmazás azonosítója a 2.3. lépésből.
protectedResources	endpoint	A webes API URL-címe: http://localhost:5000/api/todolist.
protectedResources	hatókörök	A 2.2. lépésben létrehozott webes API-hatókörök. For example: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

Az eredményül 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 ezen információk alapján ellenőrzi a webalkalmazás által tulajdonosi jogkivonatként áthaladó hozzáférési jogkivonatot. Frissítse az alkalmazásbeállítások alábbi tulajdonságait:

Section	Key	Érték
hitelesítő adatok	tenantName	Az Azure AD B2C-bérlő nevének első része. For example: contoso.
hitelesítő adatok	clientID	A web API-alkalmazás azonosítója a 2.1. lépésből. A korábbi ábrán ez az alkalmazás a következő alkalmazásazonosítóval: 2.
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 jogkivonatot: 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. Cserélje le <your-tenant-ID> az Azure AD B2C-bérlőazonosítóját.
policies	policyName	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	scope	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-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
} 

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. Run the following commands:

   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. Run the following commands:

   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 http://localhost:4200 a böngészőben az alkalmazást.

4. Válassza Bejelentkezés lehető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.

Következő lépések

• 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