Konfigurace ověřování v ukázkové jednostránkové aplikaci pomocí Azure AD B2C

Tento článek používá ukázkovou jednostránkovou aplikaci (SPA) v JavaScriptu, která ukazuje, jak přidat ověřování Azure Active Directory B2C (Azure AD B2C) do vašich spa.

Přehled

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

Tok přihlášení

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

1. Uživatelé přejdou do webové aplikace a vyberou Přihlásit se.
2. Aplikace zahájí žádost o ověření a přesměruje uživatele na Azure AD B2C.
3. Uživatelé se zaregistrují nebo se přihlásí a resetují heslo. Případně se můžou přihlásit pomocí účtu sociální sítě.
4. Po přihlášení uživatelů vrátí Azure AD B2C do aplikace autorizační kód.
5. Jednostránková aplikace ověří token ID, načte deklarace identity a umožní uživatelům volat chráněné prostředky a rozhraní API.

Přehled registrace aplikací

Pokud chcete aplikaci povolit přihlášení pomocí Azure AD B2C a volání webového rozhraní API, zaregistrujte dvě aplikace v adresáři Azure AD B2C.

• Registrace webové aplikace umožňuje aplikaci přihlásit se pomocí Azure AD B2C. Během registrace zadáte identifikátor URI přesměrování. Identifikátor URI pro přesměrování je koncový bod, na který jsou uživatelé přesměrováni Azure AD B2C po dokončení ověření pomocí Azure AD B2C. Proces registrace aplikace vygeneruje ID aplikace, označované také jako ID klienta, které jedinečně identifikuje vaši aplikaci.

• Registrace webového rozhraní API umožňuje vaší aplikaci volat zabezpečené webové rozhraní API. Registrace zahrnuje obory webového rozhraní API. Obory poskytují způsob, jak spravovat oprávnění k chráněným prostředkům, jako je vaše webové rozhraní API. Udělíte webové aplikaci oprávnění k rozsahům webového rozhraní API. Když se požádá o přístupový token, vaše aplikace určí požadovaná oprávnění v parametru scope požadavku.

Architektura aplikace a registrace jsou znázorněny v následujícím diagramu:

Volání webového rozhraní API

Po dokončení ověřování uživatelé interagují s aplikací, která vyvolá chráněné webové rozhraní API. Webové rozhraní API používá ověřování nosný token . 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:

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

Požadavky

Počítač se systémem:

• Visual Studio Code nebo jiný editor kódu.
• modul runtimeNode.js

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í do koncového 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 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. Opakováním kroků vytvořte následující tři samostatné toky uživatelů:

• Kombinovaný tok přihlášení a registrace uživatele, například susi. Tento tok uživatele také podporuje prostředí Zapomenuté heslo .
• Tok uživatele pro úpravu profilu, například edit_profile.
• Tok uživatele pro resetování hesla , například reset_password.

Azure AD B2C před název B2C_1_ toku uživatele. Například se změní na susiB2C_1_susi.

Krok 2: Registrace spa a rozhraní API

V tomto kroku vytvoříte registraci aplikace SPA a webového rozhraní API a určíte rozsahy webového rozhraní API.

Krok 2.1: Registrace aplikace webového rozhraní API

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

1. Přihlaste se k webu Azure Portal.

2. 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á .

3. Na | nastavení portálu Na stránce Adresáře a předplatná vyhledejte svůj adresář Azure AD B2C v seznamu Název adresáře a pak vyberte Přepnout.

4. V Azure Portal vyhledejte a vyberte Azure AD B2C.

5. Vyberte Registrace aplikací a pak vyberte Nová registrace.

6. Do pole Název zadejte název aplikace (například my-api1). U identifikátoru URI pro přesměrování a Podporované typy účtů ponechte výchozí hodnoty.

7. Vyberte Zaregistrovat.

8. Po dokončení registrace aplikace vyberte Přehled.

9. Poznamenejte si hodnotu ID aplikace (klienta) pro pozdější použití při konfiguraci webové aplikace.

   

Krok 2.2: Konfigurace oborů

1. Výběrem aplikace my-api1 , kterou jste vytvořili (ID aplikace: 2), otevřete její stránku Přehled .

2. V části Spravovat vyberte Zveřejnit rozhraní API.

3. 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ž webová aplikace požaduje přístupový token pro webové rozhraní API, měla by tento identifikátor URI přidat jako předponu pro každý obor, který pro rozhraní API definujete.

4. V části Obory definované tímto rozhraním API vyberte Přidat obor.

5. 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 oprávnění ke čtení k rozhraní API úloh.
   3. Pokud chcete Správa popis souhlasu, zadejte Povolit přístup pro čtení k rozhraní API úloh.

6. Vyberte Přidat obor.

7. Vyberte Přidat obor a pak přidejte obor, který definuje přístup pro zápis do rozhraní API:

   1. Jako Název oboru zadejte tasks.write.
   2. Pro Správa zobrazovaný název souhlasu zadejte oprávnění k zápisu do rozhraní API úloh.
   3. Pokud chcete Správa popis souhlasu, zadejte Povolit přístup k zápisu do rozhraní API úloh.

8. Vyberte Přidat obor.

Krok 2.3: Registrace SPA

Pokud chcete vytvořit registraci SPA, postupujte následovně:

1. Přihlaste se k webu Azure Portal.
2. 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á .
3. Na | nastavení portálu Na stránce Adresáře a předplatná vyhledejte svůj adresář Azure AD B2C v seznamu Název adresáře a pak vyberte Přepnout.
4. Vyhledejte a vyberte Azure AD B2C.
5. Vyberte Registrace aplikací a pak vyberte Nová registrace.
6. Zadejte Název aplikace (například Moje aplikace).
7. V části Podporované typy účtů vyberte Účty v libovolném zprostředkovateli identity nebo organizačním adresáři (pro ověřování uživatelů s toky uživatelů).
8. V části Identifikátor URI přesměrování vyberte Jednostránková aplikace (SPA) a do pole ADRESA URL zadejte http://localhost:6420.
9. V části Oprávnění zaškrtněte políčko Udělit souhlas správce s přístupová oprávnění openid a offline přístupová oprávnění.
10. Vyberte Zaregistrovat.

Poznamenejte si ID aplikace (klienta) pro pozdější použití při konfiguraci webové aplikace.

Krok 2.4: Povolení implicitního toku udělení

Pokud vaše aplikace SPA používá MSAL.js 1.3 nebo starší a implicitní tok udělení nebo nakonfigurujete https://jwt.ms/ aplikaci pro testování toku uživatele nebo vlastní zásady, musíte v registraci aplikace povolit implicitní tok udělení:

1. V nabídce vlevo v části Spravovat vyberte Ověřování.

2. V části Implicitní udělení a hybridní toky zaškrtněte políčka Přístupové tokeny (používané pro implicitní toky) i tokeny ID (používané pro implicitní a hybridní toky).

3. Vyberte Uložit.

Pokud vaše aplikace používá MSAL.js 2.0 nebo novější, nepovolujte implicitní udělení toku, protože MSAL.js 2.0+ podporuje tok autorizačního kódu s PKCE. Aplikace SPA v tomto článku používá tok PKCE, takže nemusíte povolit implicitní tok udělení.

Krok 2.5: Udělení oprávnění

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

1. Vyberte Registrace aplikací a pak vyberte aplikaci, kterou jste vytvořili (ID aplikace: 1).

2. V části Spravovat vyberte Oprávnění rozhraní API.

3. V části Nakonfigurovaná oprávnění vyberte Přidat oprávnění.

4. Vyberte kartu Moje rozhraní API .

5. Vyberte rozhraní API (ID aplikace: 2), ke kterému má mít webová aplikace udělený přístup. Zadejte například my-api1.

6. V části Oprávnění rozbalte úkoly a vyberte obory, které jste definovali dříve (například tasks.read a tasks.write).

7. Vyberte Přidat oprávnění.

8. Vyberte Udělit souhlas správce pro < název >vašeho tenanta.

9. Vyberte Ano.

10. Vyberte Aktualizovat a pak ověřte, že se v části Stav pro oba obory zobrazuje Hodnota udělená.

11. V seznamu Nakonfigurovaná oprávnění vyberte obor a zkopírujte úplný název oboru.

    

Krok 3: Získání ukázkového kódu SPA

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

Pokud chcete získat ukázkový kód SPA, můžete udělat jednu z těchto věcí:

• Stáhněte si soubor ZIP.

• Naklonujte ukázku z GitHubu spuštěním následujícího příkazu:

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

Krok 3.1: Aktualizace ukázky SPA

Teď, když jste získali ukázku SPA, aktualizujte kód pomocí hodnot Azure AD B2C a webového rozhraní API. V ukázkové složce ve App složce otevřete soubory JavaScriptu uvedené v následující tabulce a aktualizujte je odpovídajícími hodnotami.

Soubor	Klíč	Hodnota
authConfig.js	clientId	ID SPA z kroku 2.3.
policies.js	názvy	Toky uživatele nebo vlastní zásady, které jste vytvořili v kroku 1.
policies.js	Orgány	Vaše Azure AD toky uživatelů B2C nebo autority vlastních zásad, jako https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>je . Nahraďte your-sign-in-sign-up-policy tokem uživatele nebo vlastní zásadou, kterou jste vytvořili v kroku 1.
policies.js	authorityDomain	Vaše Azure AD doména autority B2C, například <your-tenant-name>.b2clogin.com.
apiConfig.js	b2cScopes	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"]).
apiConfig.js	webApi	Adresa URL webového rozhraní API, http://localhost:5000/hello.

Výsledný kód by měl vypadat podobně jako v následujícím příkladu:

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

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 tenantem Azure AD B2C.

Pokud chcete získat ukázkový kód webového rozhraní API, udělejte jednu z těchto věcí:

• Stáhněte si *.zip archiv.

• Spuštěním následujícího příkazu naklonujte ukázkový projekt webového rozhraní API z GitHubu:

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

• Můžete také přejít přímo na projekt Azure-Samples/active-directory-b2c-javascript-nodejs-webapi na GitHubu.

Krok 4.1: Aktualizace webového rozhraní API

1. Otevřete soubor config.json v editoru kódu.

2. Upravte hodnoty proměnných pomocí registrace aplikace, kterou jste vytvořili dříve. A aktualizujte policyName tok uživatele, který jste vytvořili v rámci požadavků (například b2c_1_susi).

   "credentials": {
       "tenantName": "<your-tenant-name>",
       "clientID": "<your-webapi-application-ID>"
   },
   "policies": {
       "policyName": "b2c_1_susi"
   },
   "resource": {
       "scope": ["tasks.read"] 
   },
   

Krok 4.2: Povolení CORS

Pokud chcete jednostránkové aplikaci povolit volání Node.js webového rozhraní API, musíte ve webovém rozhraní API povolit sdílení prostředků mezi zdroji (CORS). V produkční aplikaci dávejte pozor na to, která doména žádost vytváří. V tomto příkladu povolte požadavky z libovolné domény.

K povolení CORS použijte následující middleware. V ukázce kódu webového rozhraní API Node.js, kterou jste stáhli, už byl přidán do souboruindex.js .

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

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

Teď jste připraveni otestovat přístup k rozhraní API s vymezeným oborem jednostránkové aplikace. Na místním počítači spusťte Node.js webové rozhraní API i ukázkovou jednostránkovou aplikaci JavaScriptu. Pak se přihlaste k jednostránkové aplikaci a výběrem tlačítka Volat rozhraní API zahájíte požadavek na chráněné rozhraní API.

Spuštění webového rozhraní API Node.js

1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázku webového rozhraní API Node.js. Příklad:

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

2. Spusťte následující příkazy:

   npm install && npm update
   node index.js
   

   V okně konzoly se zobrazí číslo portu, na kterém je aplikace hostovaná.

   Listening on port 5000...
   

Spuštění jednostránkové aplikace

1. Otevřete další okno konzoly a přejděte do adresáře, který obsahuje ukázku JavaScript SPA. Příklad:

   cd ms-identity-b2c-javascript-spa
   

2. 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 6420...
   

3. Pokud chcete aplikaci zobrazit, přejděte v prohlížeči na http://localhost:6420 adresu .

   

4. Dokončete registraci nebo přihlášení. Po úspěšném přihlášení by se měla zobrazit zpráva Uživatel <, vaše uživatelské jméno> se přihlásilo.

5. Vyberte tlačítko Volat rozhraní API . Spa odešle přístupový token v požadavku chráněnému webovému rozhraní API, které vrátí zobrazované jméno přihlášeného uživatele:

   

Nasazení aplikace

V produkční aplikaci je identifikátor URI přesměrování registrace aplikace obvykle veřejně přístupný koncový bod, ve kterém je vaše aplikace spuštěná, například https://contoso.com/signin-oidc.

Identifikátory URI přesměrování můžete ve svých registrovaných aplikacích kdykoli přidat a upravit. Na 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í velká a malá písmena. Jeho velikost se musí shodovat s případem cesty url vaší spuštěné aplikace.

Další kroky

Další informace o konceptech probíraných v tomto článku:

• Přečtěte si další informace o ukázce kódu.
• Povolte ověřování ve vlastním spa.
• Nakonfigurujte možnosti ověřování ve spa.
• Povolte ověřování ve vlastním webovém rozhraní API.