Architectuur van micro-frontends met Module Federation · Les

Authenticatie en autorisatie

Implementeer robuuste mechanismen voor authenticatie en autorisatie in verschillende Micro Frontends.

Les 1 van 411 stappen

Authenticatie en autorisatie is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.

Authenticatie en autorisatie in MFE's

Welkom bij Authenticatie en autorisatie in Micro Frontends! Het beveiligen van gefedereerde applicaties brengt unieke uitdagingen met zich mee in vergelijking met monolithische apps.

We hebben robuuste manieren nodig om gebruikersidentiteiten te verifiëren (authenticatie) en te bepalen waartoe zij toegang hebben (autorisatie) in onafhankelijk ontwikkelde en geïmplementeerde Micro Frontends.

De behoefte aan centrale authenticatie

In een Micro Frontend-architectuur werken gebruikers met meerdere afzonderlijke applicaties. Als elke MFE authenticatie onafhankelijk zou afhandelen, zouden gebruikers meerdere keren om inloggegevens worden gevraagd.

Dit leidt tot een slechte gebruikerservaring en complex sessiebeheer. Een mechanisme voor centrale authenticatie is cruciaal voor naadloze navigatie.

Identiteitsproviders (IdP)

Een veelgebruikte oplossing is het gebruik van een Identity Provider (IdP). Dit is een service die identiteitsgegevens van gebruikers aanmaakt, bijhoudt en beheert, en hen authenticeert.

Voorbeelden: Auth0, Okta, Keycloak of een aangepaste OAuth 2.0/OpenID Connect-server.
De IdP handelt het inlogproces af en verstrekt na succesvolle authenticatie beveiligingstokens, zoals JWT's.

Overzicht van de authenticatiestroom

Hier volgt een vereenvoudigde stroom voor centrale authenticatie:

De gebruiker probeert toegang te krijgen tot een MFE.
Als de gebruiker niet is geauthenticeerd, wordt deze doorgestuurd naar de centrale inlogpagina van de IdP.
De gebruiker logt in bij de IdP.
De IdP stuurt de gebruiker terug naar de MFE met een beveiligingstoken.
De MFE slaat dit token op, bijvoorbeeld in een HTTP-only-cookie of lokale opslag.

Alle volgende verzoeken vanuit elke MFE gebruiken dit token.

De authenticatiestatus delen

Zodra een gebruiker is geauthenticeerd, moeten de sessie of het token beschikbaar zijn voor alle Micro Frontends. Veelgebruikte strategieën voor het delen van de status zijn:

HTTP-only-cookies: Veilig en automatisch meegestuurd met verzoeken.
Webopslag (localStorage/sessionStorage): Toegankelijk in domeinen met dezelfde oorsprong.
Gedeelde bibliotheken/context: Een gedeelde utility die het tokenbeheer omvat en vaak via Module Federation beschikbaar wordt gesteld.

Elke methode heeft voor- en nadelen op het gebied van beveiliging en implementatiegemak.

Autorisatie uitgelegd

Terwijl authenticatie verifieert wie je bent, bepaalt autorisatie wat je mag doen.

Na authenticatie bevat het beveiligingstoken vaak gebruikersrollen of machtigingen.
Elke Micro Frontend is vervolgens verantwoordelijk voor het controleren van deze machtigingen voordat toegang tot specifieke functies of gegevens wordt verleend.

Op rollen gebaseerde toegangscontrole (RBAC)

Op rollen gebaseerde toegangscontrole (RBAC) is een populaire autorisatiestrategie. Gebruikers krijgen rollen toegewezen, zoals 'admin', 'editor' of 'viewer', en elke rol heeft specifieke machtigingen.

Micro Frontends vergelijken eenvoudigweg de rollen van de gebruiker met de vereiste rollen voor een bepaalde actie of component.

Authenticatiecontroles implementeren

Elke Micro Frontend of de backend-API ervan kan autorisatiecontroles uitvoeren. Dit omvat vaak:

Het decoderen van het beveiligingstoken om gebruikersrollen en -machtigingen te extraheren.
Deze vergelijken met de vereiste machtigingen voor een specifieke actie of een specifiek UI-element.

Hier volgt een eenvoudig JavaScript-voorbeeld:

function hasPermission(userRoles, requiredRole) {
  if (!userRoles || !requiredRole) return false;
  return userRoles.includes(requiredRole);
}

// Imagine user roles are parsed from a JWT
const currentUserRoles = ["user", "editor"]; 

// Check if user can 'edit_post'
const canEdit = hasPermission(currentUserRoles, "editor");

// Check if user can 'delete_user'
const canDelete = hasPermission(currentUserRoles, "admin");

console.log("Can edit post?", canEdit);
console.log("Can delete user?", canDelete);

Beste werkwijzen voor beveiliging

Het beveiligen van je gefedereerde applicaties vereist waakzaamheid:

HTTPS: Gebruik altijd HTTPS voor alle communicatie.
Opslag van tokens: Sla gevoelige tokens veilig op, bijvoorbeeld in HTTP-only cookies in plaats van localStorage.
CORS: Configureer beleid voor Cross-Origin Resource Sharing correct.
Invoer valideren: Valideer gebruikersinvoer altijd aan zowel de client- als de serverzijde.
Regelmatige audits: Voer beveiligingsaudits uit en houd afhankelijkheden up-to-date.

De autorisatiestroom ordenen

Sleep de stappen naar de juiste volgorde voor de initiële authenticatiestroom van een gebruiker in een gefedereerde applicatie met een Identity Provider (IdP).

Beantwoord dit in de interactieve les

Samenvatting: veilige MFE's

We hebben de basisprincipes van authenticatie en autorisatie in Micro Frontends behandeld. De belangrijkste punten:

Gecentraliseerde authenticatie via een Identity Provider zorgt voor een soepele gebruikerservaring.
Beveiligingstokens, zoals JWT's, bevatten authenticatie- en autorisatiegegevens.
Strategieën zoals HTTP-only cookies of gedeelde bibliotheken helpen om de authenticatiestatus te delen.
Autorisatie, bijvoorbeeld RBAC, bepaalt wat gebruikers mogen doen op basis van de rollen en machtigingen in hun token.
Volg altijd de beste beveiligingspraktijken, zoals HTTPS en het veilig opslaan van tokens.

Vervolgens onderzoeken we beveiligingsrisico's tussen applicaties!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Authenticatie en autorisatie” gratis?

Ja — de volledige tekst van “Authenticatie en autorisatie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.

Wat leer ik in “Authenticatie en autorisatie”?

Implementeer robuuste mechanismen voor authenticatie en autorisatie in verschillende Micro Frontends. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?

Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Authenticatie en autorisatie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?

Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Architectuur van micro-frontends met Module Federation