Megosztás a következőn keresztül:


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.

Diagram that describes a single-page application with web A P I, registrations, and tokens.

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:

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.

    Screenshot that demonstrates how to get a web A P I application I D.

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. Screenshot that shows how to get the Angular application I D.

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.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

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.

    Screenshot that shows the Angular sample app with the login link.

  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.

    Screenshot that shows the Angular sample app with the user profile, and the call to the to-do list.

  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.

    Screenshot that shows the Angular sample app's call to the to-do list.

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