Sdílet prostřednictvím

Povolení ověřování ve vlastní aplikaci React pomocí Azure Active Directory B2C

  • Článek

Tento článek ukazuje, jak přidat ověřování Azure Active Directory B2C (Azure AD B2C) do vlastní jednostránkové aplikace React (SPA). Zjistěte, jak integrovat aplikaci React s knihovnou msAL pro ověřování React .

Tento článek obsahuje související článek s názvem Konfigurace ověřování v ukázkové jednostrákové aplikaci React. Nahraďte ukázkovou aplikaci React vlastní aplikací React. Po dokončení kroků v tomto článku vaše aplikace přijme přihlášení prostřednictvím Azure AD B2C.

Požadavky

Projděte si požadavky a kroky integrace v části Konfigurace ověřování v ukázkovém článku o jednostrákové aplikaci React.

Krok 1: Vytvoření projektu aplikace React

Můžete použít existující aplikaci React nebo vytvořit novou aplikaci React. Pokud chcete vytvořit nový projekt, spusťte v příkazovém prostředí následující příkazy:

npx create-react-app my-app
cd my-app

Krok 2: Instalace závislostí

Pokud chcete do své aplikace nainstalovat knihovny MSAL Browser a MSAL React , spusťte v příkazovém prostředí následující příkaz:

npm i @azure/msal-browser  @azure/msal-react

Nainstalujte react-router-dom verze 5.*. Balíček react-router-dom obsahuje vazby pro použití react routeru ve webových aplikacích. V příkazovém prostředí spusťte následující příkaz:

npm i react-router-dom@5.3.3

Nainstalujte Bootstrap pro React (volitelné, pro uživatelské rozhraní):

npm i bootstrap react-bootstrap

Krok 3: Přidání komponent ověřování

Vzorový kód se skládá z následujících komponent. Přidejte tyto komponenty z ukázkové aplikace React do vlastní aplikace:

  • public/index.html- Proces sdružování používá tento soubor jako šablonu a vloží komponenty Reactu do elementu<div id="root">. Pokud ho otevřete přímo v prohlížeči, zobrazí se prázdná stránka.

  • src/authConfig.js – Konfigurační soubor, který obsahuje informace o zprostředkovateli identity Azure AD B2C a službě webového rozhraní API. Aplikace React používá tyto informace k vytvoření vztahu důvěryhodnosti s Azure AD B2C, přihlášením a odhlášením uživatele, získáním tokenů a ověřením tokenů.

  • src/index.js – vstupní bod JavaScriptu do vaší aplikace. Tento soubor JavaScriptu:

    • App Připojí jako kořenovou komponentu k prvku stránky <div id="root"> public/index.html.
    • Inicializuje knihovnu MSAL PublicClientApplication s konfigurací definovanou v souboru authConfig.js . Aplikace MSAL React by měla být vytvořena mimo strom komponent, aby se zabránilo jeho opětovnému vytvoření při opětovném vykreslení.
    • Po vytvoření instance knihovny MSAL kód JavaScriptu předá msalInstance součásti aplikace jako props. Například, <App instance={msalInstance} />.

  • src/App.jsx – definuje komponenty aplikace a stránek :

    • Komponenta Aplikace je komponenta nejvyšší úrovně vaší aplikace. Zabalí všechno mezi MsalProvider komponentami. Všechny komponenty pod msalProvider mají přístup k instanci PublicClientApplication prostřednictvím kontextu a všech háků a komponent poskytovaných MSAL React. Komponenta App připojí PageLayout a její podřízený prvek Pages.

    • Komponenta Pages registruje a zruší registraci zpětných volání událostí MSAL. Události se používají ke zpracování chyb MSAL. Definuje také logiku směrování aplikace.

    Důležité

    Pokud je App.jsnázev souboru součásti aplikace , změňte ho na App.jsx.

  • src/pages/Hello.jsx – předveďte, jak volat chráněný prostředek s nosným tokenem OAuth2.

    • Používá háček useMsal , který vrací instanci PublicClientApplication.
    • S instancí PublicClientApplication získá přístupový token pro volání rozhraní REST API.
    • Vyvolá funkci callApiWithToken, která načte data z rozhraní REST API a vykreslí výsledek pomocí komponenty DataDisplay.

  • src/components/NavigationBar.jsx – horní navigační panel aplikace s tlačítky pro přihlášení, odhlášení, úpravu profilu a volání tlačítek pro resetování rozhraní REST API.

    • Používá ověřené a neověřenéTemplate , které vykreslují pouze podřízené objekty, pokud je uživatel ověřený nebo neověřený.
    • Zpracujte přihlášení a odhlaste se pomocí událostí přesměrování a automaticky otevírané okno.

  • src/components/PageLayout.jsx

    • Společné rozložení, které poskytuje uživateli konzistentní prostředí při přechodu ze stránky na stránku. Rozložení zahrnuje běžné prvky uživatelského rozhraní, jako jsou záhlaví aplikace, komponenta NavigationBar , zápatí a jeho podřízené komponenty.
    • Používá authenticatedTemplate, která vykreslí podřízené položky pouze v případě, že je uživatel ověřený.

  • src/components/DataDisplay.jsx – vykreslí data vrácená z volání rozhraní REST API.

  • src/styles/App.css a src/styles/index.css – soubory stylů CSS pro aplikaci.

  • src/fetch.js – Načte požadavky HTTP do rozhraní REST API.

Krok 4: Konfigurace aplikace React

Po přidání komponent ověřování nakonfigurujte aplikaci React pomocí nastavení Azure AD B2C. Nastavení zprostředkovatele identity Azure AD B2C se konfiguruje v souboru authConfig.js .

Pokyny najdete v tématu Konfigurace aplikace React.

Krok 5: Spuštění aplikace React

  1. V editoru Visual Studio Code otevřete nový terminál a 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 3000...

  2. Pokud chcete volat rozhraní REST API, postupujte podle pokynů ke spuštění webového rozhraní API.

  3. V prohlížeči přejděte k http://localhost:3000 zobrazení aplikace.

Další kroky