React a Entra ID: Jak na enterprise zabezpečení

2026-03-16

Úvod

Zabezpečení aplikací je oprávněně strašákem pro mnoho vývojářů. Když ale pracujete v Microsoft ekosystému, máte k dispozici Microsoft Entra ID (dříve Azure Active Directory). V rámci nedávného experimentu jsem se rozhodl prozkoumat možnosti propojení Reactu a Microsoft Entra ID pro zabezpečení. V tomto článku vám ukážu výsledek své práce.

Proč vlastně Entra ID?

Když vyvíjíte aplikaci ve firemním prostředí, začnete narážet na požadavky na zabezpečení, které vaše databáze nevyřeší. Typicky jde například o:

  • Jednotné přihlašování (SSO): Uživatelé se mohou přihlašovat pomocí svých firemních účtů, což zvyšuje pohodlí a bezpečnost.
  • Multifaktorové ověřování (MFA): Podpora MFA je dostupná již v základní verzi Entra ID, která je zadarmo.
  • Standardy: Entra ID běží na ověřených standardech jako OAuth 2.0 a OpenID Connect.
  • Správa: IT oddělení spravuje vše z jednoho místa.

Implementace: MSAL

Pro propojení Reactu a Entra ID je potřeba použít knihovnu MSAL (Microsoft Authentication Library), konkrétně NPM balíček @azure/msal-react. MSAL je oficiální knihovna od Microsoftu, která zjednodušuje práci při autentizaci a autorizaci. Celý postup začíná registrací aplikace v Azure portálu, kde získáte potřebné údaje. Konkrétně Client ID a Tenant ID. Tyto údaje pak použijete pro konfiguraci MSAL v Reactu. App Registration v Microsoft Entra ID

export const msalConfig = {
  auth: {
    clientId: import.meta.env.VITE_CLIENT_ID,
    authority: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}`,
  }
};

Samotná implementace je poměrně přímočará. Stačí obalit vaši aplikaci do MsalProvider a použít useMsal hook pro přístup k potřebným funkcím. Pro přihlášení můžete použít například metodu loginRedirect, která otevře přihlašovací okno.

<MsalProvider instance={msalInstance}>
    <App />
</MsalProvider>

Největší výzva: Redirect URI

I když se zdá vše jednoduché, narazil jsem na jedinou velkou výzvu: Redirect URIs. Jde o adresu, na kterou bude uživatel přesměrován po úspěšném přihlášení. V Azure portálu musíte tuto adresu správně nastavit, jinak se vám bude zobrazovat chyba "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application". Pro vývoj lokálně můžete použít například http://localhost:3000 a pro produkci pak adresu vašeho nasazeného webu. Problémem u mě byl chybný protokol, kdy jsem použil http místo https, což způsobovalo neustálé chyby při přihlašování. Po správném nastavení Redirect URI se vše rozběhlo bez problémů.

Závěr

Tento experiment mi potvrdil, že propojení vlastního kódu s enterprise prostředím nemusí být složité. Aplikace je okamžitě připravená na nasazení ve velkých firmách a já jako vývojář se nemusím starat o správu hesel. Jako Power Platform vývojář vidím v tomto přístupu potenciál pro tvorbu hybridních řešení, která kombinuje flexibilitu Reactu s robustností a zabezpečením Entra ID. Pokud pracujete ve firemním prostředí, určitě doporučuji tento přístup vyzkoušet.

← Zpět na seznam článků