Konfigurace ověřování v ukázkové jednostrákové aplikaci Angular pomocí Azure Active Directory B2C

Důležité

Od 1. května 2025 už nebude Azure AD B2C k dispozici k nákupu pro nové zákazníky. Další informace najdete v našich nejčastějších dotazech.

Tento článek používá ukázkovou jednostránkovou aplikaci Angular (SPA) k ilustraci přidání ověřování Azure Active Directory B2C (Azure AD B2C) do aplikací Angular.

Přehled

OpenID Connect (OIDC) je ověřovací protokol založený na OAuth 2.0, který můžete použít k bezpečnému přihlášení uživatele do aplikace. Tato ukázka Angular používá MSAL Angular a prohlížeč MSAL. MSAL je knihovna poskytovaná Microsoftem, která zjednodušuje přidávání podpory ověřování a autorizace do angular SPA.

Tok přihlášení zahrnuje následující kroky:

Uživatel aplikaci otevře a vybere Přihlásit se.
Aplikace spustí žádost o ověření a přesměruje uživatele do Azure AD B2C.
Uživatel se zaregistruje nebo přihlásí a resetuje heslo nebo se přihlásí pomocí účtu sociální sítě.
Po úspěšném přihlášení vrátí Azure AD B2C autorizační kód do aplikace. Aplikace provede následující akce:
1. Vymění autorizační kód tokenu ID, přístupového tokenu a obnovovacího tokenu.
2. Čte nároky identity tokenu.
3. Uloží přístupový token a obnovovací token do mezipaměti v paměti pro pozdější použití. Přístupový token umožňuje uživateli volat chráněné prostředky, jako je webové rozhraní API. Obnovovací token se používá k získání nového přístupového tokenu.

Registrace aplikace

Pro umožnění přihlášení vaší aplikace pomocí Azure AD B2C a volání webového rozhraní API musíte zaregistrovat dvě aplikace ve vašem prostředí Azure AD B2C:

Registrace jednostrákové aplikace (Angular) umožňuje vaší aplikaci přihlásit se pomocí Azure AD B2C. Během registrace aplikace zadáte identifikátor URI přesměrování. Identifikátor URI pro přesměrování je koncový bod, na který je uživatel přesměrován po ověření prostřednictvím Azure AD B2C. Proces registrace aplikace vygeneruje ID aplikace označované také jako ID klienta, které jednoznačně identifikuje vaši aplikaci. Tento článek používá ukázkové ID aplikace: 1.
Registrace webového rozhraní API umožňuje vaší aplikaci volat chráněné webové rozhraní API. Registrace zveřejňuje oprávnění webového rozhraní API (obory). Proces registrace aplikace vygeneruje ID aplikace, které jednoznačně identifikuje vaše webové rozhraní API. Tento článek používá ukázkové ID aplikace: 2. Udělte aplikaci (ID aplikace: 1) oprávnění k oborům webového rozhraní API (ID aplikace: 2).

Následující diagram popisuje registrace aplikací a architekturu aplikace.

Diagram, který popisuje jednostrákovou aplikaci s webovými A P I, registracemi a tokeny

Volání webového rozhraní API

Po dokončení ověřování uživatelé komunikují s aplikací, která vyvolá chráněné webové rozhraní API. Webové rozhraní API používá ověřování prostřednictvím nosného tokenu. Nosný token je přístupový token, který aplikace získala z Azure AD B2C. Aplikace předá token v autorizační hlavičce požadavku HTTPS.

Authorization: Bearer <access token>

Pokud obor přístupového tokenu neodpovídá oborům webového rozhraní API, knihovna ověřování získá nový přístupový token se správnými obory.

Proces odhlášení

Tok odhlášení zahrnuje následující kroky:

Z aplikace se uživatelé odhlásí.
Aplikace vymaže objekty relace a knihovna ověřování vymaže mezipaměť tokenů.
Aplikace přenese uživatele do koncového bodu pro odhlášení z Azure AD B2C, aby ukončila relaci Azure AD B2C.
Uživatelé se přesměrují zpět do aplikace.

Požadavky

Než budete postupovat podle pokynů v tomto článku, ujistěte se, že je váš počítač spuštěný:

Visual Studio Code nebo jakýkoli jiný editor kódu
Node.js runtime a npm.
Úhlové CLI.

Krok 1: Konfigurace toku uživatele

Když se uživatelé pokusí přihlásit k vaší aplikaci, aplikace prostřednictvím toku uživatele spustí žádost o ověření ke koncovému bodu autorizace. Tok uživatele definuje a řídí uživatelské prostředí. Jakmile uživatelé dokončí tok uživatele, Azure AD B2C vygeneruje token a pak přesměruje uživatele zpět do vaší aplikace.

Pokud jste to ještě neudělali, vytvořte uživatelský tok nebo vlastní pravidlo. Opakujte kroky pro vytvoření tří samostatných toků uživatelů následujícím způsobem:

Kombinovaný tok přihlášení a registrace uživatele, například susi. Tento tok uživatele podporuje také proces zapomenutého hesla.
Upravování profilu uživatelského procesu, například edit_profile.
Tok resetování hesla uživatele, například reset_password.

Azure AD B2C přidává na začátek B2C_1_ k názvu uživatelského toku. Například susi se stane B2C_1_susi.

Krok 2: Registrace angular SPA a rozhraní API

V tomto kroku vytvoříte registrace pro Angular SPA a aplikaci webového rozhraní API. Zadáte také rozsahy webového rozhraní API.

2.1 Registrace aplikace webového rozhraní API

Pokud chcete vytvořit registraci aplikace webového rozhraní API (ID aplikace: 2), postupujte takto:

Přihlaste se do Azure Portalu.
Ujistěte se, že používáte adresář, který obsahuje vašeho tenanta Azure AD B2C. Na panelu nástrojů portálu vyberte ikonu Adresáře a předplatná .
Na stránce Nastavení portálu | Adresáře a předplatná vyhledejte svůj adresář Azure AD B2C v seznamu názvů adresářů a pak vyberte Přepnout.
Na webu Azure Portal vyhledejte a vyberte Azure AD B2C.
Vyberte Registrace aplikacía pak vyberte Nová registrace.
Jako Název zadejte název aplikace (například my-api1). Ponechte výchozí hodnoty pro identifikátor URI přesměrování a podporované typy účtů.
Vyberte Zaregistrovat.
Po dokončení registrace aplikace vyberte Přehled.
Poznamenejte si hodnotu ID aplikace (klienta) pro pozdější použití při konfiguraci webové aplikace.

2.2 Konfigurace oborů

Výběrem aplikace my-api1, kterou jste vytvořili (ID aplikace: 2), otevřete její stránku Přehled.
V části Spravovatvyberte Zpřístupnit rozhraní API.
Vedle URI ID aplikace vyberte odkaz Nastavit. Nahraďte výchozí hodnotu (GUID) jedinečným názvem (například tasks-api) a pak vyberte Uložit.

Když vaše webová aplikace požádá o přístupový token pro webové rozhraní API, měl by tento identifikátor URI přidat jako předponu pro každý obor, který definujete pro rozhraní API.
V části Obory definované tímto rozhraním APIvyberte Přidat obor.
Chcete-li vytvořit obor, který definuje přístup pro čtení k rozhraní API:
1. Jako název oboru zadejte tasks.read.
2. Jako zobrazovaný název souhlasu správce zadejte přístup pro čtení k rozhraní API pro úlohy.
3. Jako popis souhlasu správce zadejte Umožňuje přístup pro čtení k rozhraní API pro úlohy.
Vyberte Přidat rozsah.
Vyberte Přidat obor a pak přidejte obor, který definuje přístup k zápisu do rozhraní API:
1. Jako název oboru zadejte tasks.write.
2. Jako zobrazovaný název souhlasu správce zadejte přístup pro zápis k rozhraní API úloh.
3. Jako popis souhlasu správce zadejte umožňuje zápis do rozhraní API pro úlohy.
Vyberte Přidat rozsah.

2.3 Registrace aplikace Angular

Pokud chcete vytvořit registraci aplikace Angular, postupujte takto:

Přihlaste se do Azure Portalu.
Pokud máte přístup k více tenantům, vyberte ikonu Nastavení v horní nabídce a přepněte se do svého tenanta Azure AD B2C z nabídky Adresáře + předplatná.
Na webu Azure Portal vyhledejte a vyberte Azure AD B2C.
Vyberte Registrace aplikacía pak vyberte Nová registrace.
Jako Název zadejte název aplikace. Zadejte například MyApp.
V části Podporované typy účtůvyberte Účty v určitém poskytovateli identity nebo organizačním adresáři (pro ověřování uživatelů s uživatelskými procesy).
V části Identifikátor URI přesměrování vyberte jednostránková aplikace (SPA), a pak zadejte http://localhost:4200 do pole adresa URL.
V části Oprávnění zaškrtněte políčko Udělit správní souhlas s oprávněními openid a offline přístupu.
Vyberte Zaregistrovat.
Poznamenejte si hodnotu ID aplikace (klienta) pro použití v pozdějším kroku při konfiguraci webové aplikace.

2.5 Udělení oprávnění

Pokud chcete aplikaci udělit oprávnění (ID aplikace: 1), postupujte takto:

Vyberte Registrace aplikací a pak vyberte aplikaci, kterou jste vytvořili (ID aplikace: 1).
V části Spravovat vyberte oprávnění rozhraní API.
V části Nakonfigurovaná oprávnění vyberte Přidat oprávnění.
Vyberte kartu Moje rozhraní API.
Vyberte rozhraní API (ID aplikace: 2), ke kterému má mít webová aplikace udělený přístup. Zadejte například my-api1.
V části Oprávnění rozbalte úkoly a vyberte obory, které jste definovali dříve (například tasks.read a tasks.write).
Vyberte Přidat oprávnění.
Vyberte Udělit souhlas správce pro <název vašeho tenanta>.
Vyberte Ano.
Vyberte Aktualizovat a potom ověřte, že se pod Status pro oba obory zobrazuje Uděleno pro ....
V seznamu Nakonfigurovaná oprávnění vyberte obor a zkopírujte celý název oboru.

Krok 3: Získání vzorového kódu Angular

Tato ukázka ukazuje, jak může jednostránka Angular používat Azure AD B2C k registraci a přihlašování uživatelů. Aplikace pak získá přístupový token a zavolá chráněné webové rozhraní API.

Stáhněte si soubor .zip ukázky nebo naklonujte ukázku z úložiště GitHub pomocí následujícího příkazu:

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

3.1 Nastavte ukázku Angular

Teď, když jste získali ukázku SPA, aktualizujte kód hodnotami Azure AD B2C a webového rozhraní API. V ukázkové složce ve složce src/app otevřete soubor auth-config.ts . Aktualizujte klíče odpovídajícími hodnotami:

Oddíl	Klíč	Hodnota
B2C zásady	jména	Tok uživatele nebo vlastní zásady, které jste vytvořili v kroku 1.
B2C zásady	úřady	Nahraďte `your-tenant-name` názvem svého tenanta Azure AD B2C. Například použijte `contoso.onmicrosoft.com`. Pak nahraďte název zásady tokem uživatele nebo vlastní zásadou, kterou jste vytvořili v kroku 1. Například: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`.
B2C zásady	doména autority	Název vašeho tenanta Azure AD B2C Například: `contoso.onmicrosoft.com`.
Konfigurace	ID klienta	ID aplikace Angular z kroku 2.3.
chráněné zdroje	koncový bod	Adresa URL webového rozhraní API: `http://localhost:5000/api/todolist`.
chráněné zdroje	oblasti / rozsahy	Obory webového rozhraní API, které jste vytvořili v kroku 2.2. Například: `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`.

Výsledný kód src,app/auth-config.ts by měl vypadat podobně jako v následující ukázce:

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

Krok 4: Získání ukázkového kódu webového rozhraní API

Teď, když je webové rozhraní API zaregistrované a definovali jste jeho obory, nakonfigurujte kód webového rozhraní API tak, aby fungoval s vaším tenantem Azure AD B2C.

Stáhněte si *.zip archiv nebo naklonujte ukázkový projekt webového rozhraní API z GitHubu. Pomocí následujícího příkazu můžete také přejít přímo na projekt Azure-Samples/active-directory-b2c-javascript-nodejs-webapi na GitHubu:

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

4.1 Konfigurace webového rozhraní API

V ukázkové složce otevřete soubor config.json . Tento soubor obsahuje informace o vašem zprostředkovateli identity Azure AD B2C. Aplikace webového rozhraní API tyto informace používá k ověření přístupového tokenu, který webová aplikace předává jako nosný token. Aktualizujte následující vlastnosti nastavení aplikace:

Oddíl	Klíč	Hodnota
pověření	názevNájemce	První část názvu tenanta Azure AD B2C Například: `contoso`.
pověření	Klientský ID	ID aplikace webového rozhraní API z kroku 2.1. V předchozím diagramu se jedná o aplikaci s ID aplikace: 2.
pověření	emitent	(Volitelné) Hodnota deklarace identity vystavitele `iss` tokenu. Azure AD B2C ve výchozím nastavení vrátí token v následujícím formátu: `https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/`. Nahraďte `<your-tenant-name>` první částí názvu tenanta Azure AD B2C. Nahraďte `<your-tenant-ID>` svým ID Azure AD B2C tenanta.
politiky	název politiky	Tok uživatele nebo vlastní zásady, které jste vytvořili v kroku 1. Pokud vaše aplikace používá více toků uživatelů nebo vlastních zásad, zadejte pouze jednu. Použijte například tok uživatele pro registraci nebo přihlášení.
zdroj	rozsah	Rozsahy registrace vaší aplikace pro webové API rozhraní z kroku 2.5.

Konečný konfigurační soubor by měl vypadat jako následující JSON:

{
    "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
}

Krok 5: Spuštění angular SPA a webového rozhraní API

Teď jste připraveni otestovat přístup k rozhraní API s vymezeným oborem Angular. V tomto kroku spusťte webové rozhraní API i ukázkovou aplikaci Angular na místním počítači. Pak se přihlaste k aplikaci Angular a výběrem tlačítka TodoList spusťte požadavek na chráněné rozhraní API.

Spuštění webového rozhraní API

Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázku webového rozhraní API. Například:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Spusťte následující příkazy:
```
npm install && npm update
node index.js
```
V okně konzoly se zobrazí číslo portu, kde je aplikace hostovaná:
```
Listening on port 5000...
```

Spuštění aplikace Angular

Otevřete další okno konzoly a přejděte do adresáře, který obsahuje ukázku Angular. Například:
```
cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
```
Spusťte následující příkazy:
```
npm install && npm update
npm start
```
V okně konzoly se zobrazí číslo portu, kde je aplikace hostovaná:
```
Listening on port 4200...
```
Přejděte na http://localhost:4200 ve vašem prohlížeči, abyste zobrazili aplikaci.
Vyberte přihlášení.
Dokončete proces registrace nebo přihlášení.
Po úspěšném přihlášení by se měl zobrazit váš profil. V nabídce vyberte TodoList.
Pokud chcete do seznamu přidat nové položky, vyberte Přidat nebo pomocí ikon odstraňte nebo upravte položky.

Nasazení aplikace

V produkční aplikaci je URI pro registraci aplikace obvykle veřejně přístupný koncový bod, na kterém vaše aplikace běží, například https://contoso.com.

Identifikátory URI pro přesměrování můžete v registrovaných aplikacích kdykoli přidávat a upravovat. Pro identifikátory URI přesměrování platí následující omezení:

Adresa URL odpovědi musí začínat schématem https.
V adrese URL odpovědi se rozlišují malá a velká písmena. Jeho případ se musí shodovat s případem cesty URL spuštěné aplikace.

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-04-03