Xperience by Kentico – Configureer Authenticatie

By Danny Paul van Iersel, 07-05-2024

Afgesloten pagina’s

Toen we door de gebruikersinterface van Kentico gingen, kwamen we het eigenschappengedeelte van een pagina tegen.

Onder “Beveiliging” staat de optie “Require authentication”. Met de informatie “Alleen geverifieerde leden hebben toegang tot dit item.”

 Als nieuwsgierige ontwikkelaars moeten we deze functie natuurlijk uitproberen. Door het vakje aan te vinken en te proberen toegang te krijgen tot de pagina.

Er zijn enkele implementaties die we moeten doen om het geheel te laten werken. De positieve kant van dit alles is dat we deze pagina al niet meer kunnen openen:

Inloggen met externe authenticatie (ook wel sociale login genoemd)

Voor authenticatie kunnen we allerlei bibliotheken gebruiken die OAuth-logins kunnen gebruiken.

De meeste sociale platforms bieden een optie om uw applicatie te registreren en uw applicatie hun gebruikers te laten gebruiken om toegang te krijgen tot uw systeem.

Enkele van de meest gebruikte implementaties zijn:

• Google
  • Gebruikt: “AspNetCore.Authentication.Google”
• Facebook
  • Gebruikt: “AspNetCore.Authentication.Facebook”
• X (voorheen bekend als Twitter en sommige code gebruikt het nog steeds als Twitter)
  • Gebruikt: “AspNetCore.Authentication.Twitter”
• Microsoft
  • Gebruikt: “AspNetCore.Authentication.MicrosoftAccount”
• Azure B2C
  • Gebruikt: “AspNetCore.Authentication.OpenIdConnect”
• WeChat
  • Nog niet getest: mogelijke oplossing kan hier gevonden worden “https://github.com/myvas/AspNetCore.Authentication.WeixinAuth”

Voor ons voorbeeld hebben we een koppeling met Microsoft Active Directory.

Wij gebruiken de package “Microsoft.AspNetCore.Authentication.MicrosoftAccount”. Voor meer informatie over deze package en de afhankelijkheden kunt u de NuGet package bekijken: https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.MicrosoftAccount/8.0.4

Te beginnen met registratie van uw applicatie bij de Externe Provider

Ga in uw Azure-abonnement naar uw Microsoft Entra ID (voorheen Azure Active Directory).

Voeg bij “App registrations” een nieuwe registratie toe, zodat uw applicatie deze active directory kan gebruiken.

Vul het formulier in door de Naam, Ondersteunde accounttypen en Redirect URI op te geven:

Druk vervolgens op de registreerknop onderaan het scherm.

Zorg ervoor dat u in het gedeelte Authenticatie van uw app het Access Token en ID Token inschakelt:

Maak onder “Certificates & Secrets” een nieuw Client Secret aan. Zorg ervoor dat u, zodra u de Secret heeft aangemaakt, uw secret waarde op een veilige plaats bewaart.

“Client Secrets waarden kunnen niet worden bekeken, behalve onmiddellijk na het maken ervan. Zorg ervoor dat u de secret opslaat wanneer u het maakt voordat u de pagina verlaat.”

U kunt de stappen lezen vanaf de officiële website van Microsoft op: (hier vindt u ook de implementatie van andere providers)

https://learn.microsoft.com/en-us/aspnet/core/security/authentication/social/microsoft-logins?view=aspnetcore-8.0

Registreer authenticatie in uw applicatie

Binnen de “Program.cs” van uw applicatie:

Moeten we de identiteit configureren.

Vervolgens moeten we onze Authenticator-middleware toevoegen.

Belangrijke opmerking: onderstaande code geeft alleen aan waar de locatie van uw sleutel geplaatst moet worden. Het wordt ten zeerste aangeraden ervoor te zorgen dat de secrets op een veilige plaats worden bewaard. Zie aanbevelingen van Kentico:
https://docs.kentico.com/developers-and-admins/development/registration-and-authentication/external-authentication#securely-store-application-secrets

Een goede manier om deze informatie op te slaan is door Azure Key Vault te gebruiken: https://learn.microsoft.com/en-us/aspnet/core/security/key-vault-configuration?view=aspnetcore-8.0#secret-storage-in-the-production-environment-with-azure-key-vault

Als u meer authenticatieproviders wilt gebruiken, kunt u deze eenvoudig toevoegen. Zorg ervoor dat u de juiste NuGet packages toevoegt “Microsoft.AspNetCore.Authentication.*”

We zijn begonnen met een schone oplossing, maar één ding mag u niet vergeten: de routes correct configureren.

Maak en gebruik een Account-component

We hebben een accountcomponent gemaakt. Een pagina waar al onze inlogmogelijkheden getoond worden en de afhandeling van onze authenticatieverzoeken geconfigureerd wordt.

Voor demo-doeleinden hebben we de login als een aparte pagina bewaard. We kunnen hier ook een component van maken en deze op andere pagina's hergebruiken.

Maak een nieuw inhoudstype: Account.

Maak een nieuwe weergave met de volgende code:

De uitvoer toont alle mogelijke providers die we hebben geconfigureerd. Uw gebruikers kunnen vervolgens selecteren met welke provider ze willen inloggen.

Zodra we op 1 van de knoppen klikken, worden we doorgestuurd naar de inlogpagina van die provider.

De gebruiker vult vervolgens zijn accountgegevens in en logt in.

Het leidt ons terug naar onze site waar we onze gebruikersaanmelding afhandelen.

In onze “AccountContoller.cs”:

(De volledige code van de accountcontroller is te vinden op de Kentico-website: https://docs.kentico.com/developers-and-admins/development/registration-and-authentication/external-authentication#implement-the-authentication-flow)

We hebben onze Post-methode om door te sturen naar de authenticatieprovider:

En onze callback wanneer we terugkeren naar onze website om de gebruikersinformatie te synchroniseren:

We hebben 1 extra codewijziging doorgevoerd, want als we nog niet ingelogd zijn en naar een afgesloten pagina navigeren, krijgen we de toegang geweigerd. Onze URL “https://UW.Domain/Account/AccessDenied”.

We hebben een nieuwe AccessDenied pagina gemaakt in Kentico en doorverwezen naar deze pagina, zodat we vervolgens de inhoud en stijl kunnen geven die we willen.

Conclusie

Zodra de authenticatieproviders zijn geconfigureerd en uw accountcontroller is ingesteld, is het eenvoudig om providers toe te voegen of te verwijderen.

Iedere Provider heeft zijn eigen manier van aanmelden voor uw applicatie, maar over het algemeen hanteren zij dezelfde principes.

Wilt u uw eigen website starten en een portaal voor uw gebruikers instellen? Bij Blastic helpen we u graag verder om uw portaal correct te configureren.