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

Článek
01/11/2024

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. Přečte deklarace identity tokenu ID.
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

Pokud chcete aplikaci povolit přihlášení pomocí Azure AD B2C a volat webové rozhraní API, musíte ve svém tenantovi Azure AD B2C zaregistrovat dvě aplikace:

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 přesměrování je koncový bod, na který se uživatel přesměruje po ověření pomocí 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 that describes a single-page application with web A P I, registrations, and tokens.

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í nosné tokeny . 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.

Tok 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řesáhne 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.

Předpoklady

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.
Angular CLI.

Krok 1: Konfigurace toku uživatele

Když se uživatelé pokusí přihlásit k aplikaci, aplikace spustí žádost o ověření do koncového bodu autorizace prostřednictvím toku uživatele. 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 tok uživatele nebo vlastní zásadu. 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é zapomenuté heslo .
Profil upravuje tok uživatele, například edit_profile.
Tok uživatele resetování hesla, například reset_password.

Předzálohuje B2C_1_ Azure AD B2C na název toku uživatele. Například z 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 k portálu Azure.
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á .
V nastavení portálu | Adresářů a stránka předplatných , vyhledejte 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). U identifikátoru URI přesměrování a podporovaných typů účtů ponechte výchozí hodnoty.
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 Spravovat vyberte Zveřejnit rozhraní API.
Vedle identifikátoru 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 API vyberte Přidat obor.
Vytvoření oboru, který definuje přístup pro čtení k rozhraní API:
1. Jako název oboru zadejte tasks.read.
2. Pro Správa zobrazovaný název souhlasu zadejte přístup pro čtení k rozhraní API pro úlohy.
3. Jako popis souhlasu Správa zadejte Možnost 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. Pro Správa zobrazovaný název souhlasu zadejte přístup k zápisu do rozhraní API pro úlohy.
3. Jako popis souhlasu Správa zadejte Povolení přístupu k zápisu 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 k portálu Azure.
Pokud máte přístup k více tenantům, v horní nabídce vyberte ikonu Nastavení a v nabídce Adresáře a předplatná přepněte do svého tenanta Azure AD B2C.
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 sekci Podporované typy účtů vyberte Účty u libovolného zprostředkovatele identity nebo organizačního adresáře (pro ověřování uživatelů pomocí toků uživatelů).
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 souhlas správce s otevřenými a offline přístupy.
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ělení souhlasu správce pro <název> vašeho tenanta.
Vyberte Ano.
Vyberte Aktualizovat a potom ověřte, že se pro oba obory zobrazuje hodnota 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 Konfigurace ukázky 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	Key	Hodnota
b2cPolicies	názvy	Tok uživatele nebo vlastní zásady, které jste vytvořili v kroku 1.
b2cPolicies	Orgány	Nahraďte `your-tenant-name` názvem 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>`.
b2cPolicies	authorityDomain	Název vašeho tenanta Azure AD B2C Například: `contoso.onmicrosoft.com`.
Konfigurace	clientId	ID aplikace Angular z kroku 2.3.
protectedResources	endpoint	Adresa URL webového rozhraní API: `http://localhost:5000/api/todolist`.
protectedResources	obory	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 archiv *.zip 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	Key	Hodnota
přihlašovací údaje	tenantName	První část názvu tenanta Azure AD B2C Například: `contoso`.
přihlašovací údaje	Clientid	ID aplikace webového rozhraní API z kroku 2.1. V předchozím diagramu se jedná o aplikaci s ID aplikace: 2.
přihlašovací údaje	issuer	(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>` ID tenanta Azure AD B2C.
Zásady	policyName	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í.
resource	rozsah	Rozsahy registrace vaší aplikace webového rozhraní API z kroku 2.5.

Konečný konfigurační soubor by měl vypadat jako následující 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
}

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. Pří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. Pří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 v http://localhost:4200 prohlížeči a zobrazte aplikaci.
Vyberte volbu Přihlásit se.
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 identifikátor URI přesměrování pro registraci aplikace obvykle veřejně přístupný koncový bod, ve kterém je vaše aplikace spuštěná, 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.

Sdílet prostřednictvím