Xperience by Kentico – Configure Authentication

By Danny Paul van Iersel, 07-05-2024

Restricting pages

When going through the UI of Kentico we came across the properties section of a page.

Under “Security” there is the option “Require authentication”. With the information “Only authenticated members can access this item.”

As curious Developers we need to try this feature out. By checking the box and trying to access the page.

There are some implementations we need to do to make it all work. The upside is that we can no longer access this page:

Login with External Authentication (aka Social login)

For authentication we can use all sorts of libraries that can use OAuth logins.

Most of the Social platforms provide an option to register your application and have your application use their users to access your system.

Some of the most used implementations are:

• Google
  • Using: “AspNetCore.Authentication.Google”
• Facebook
  • Using: “AspNetCore.Authentication.Facebook”
• X (before known as Twitter and some code still use it as Twitter)
  • Using: “AspNetCore.Authentication.Twitter”
• Microsoft
  • Using: “AspNetCore.Authentication.MicrosoftAccount”
• Azure B2C
  • Using: “AspNetCore.Authentication.OpenIdConnect”
• WeChat
  • Not tested: possible to check out “https://github.com/myvas/AspNetCore.Authentication.WeixinAuth”

For our example we have a connection with Microsoft Active Directory.

We use the “Microsoft.AspNetCore.Authentication.MicrosoftAccount” package. To find out more about the package and dependencies you can look at the NuGet package: https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.MicrosoftAccount/8.0.4

Starting with registration of your application at the External Provider

In your Azure Subscription go to your Microsoft Entra ID (previous Azure Active Directory).

At the “App registrations” add a new registration to enable your application to use this active directory.

Fill in the form by providing the Name, Supported account types and Redirect URI:

Then press the register button at the bottom of the screen.

At the Authentication section of your app make sure you enable the Access Token and ID Token:

On the “Certificates & Secrets” create a new Client Secret. Make sure once you have created this Secret to store your Secret value on a safe place.

“Client secret values cannot be viewed, except for immediately after creation. Be sure to save the secret when created before leaving the page.”

You can read the steps from the official website of Microsoft at: (here you will also find the implementation of other providers)

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

Register authentication in your application

Inside the “Program.cs” of your application:

We need to configure the Identity.

Next, we need to add our Authenticator middleware.

Important note: below code only shows where the location of your key needs to be placed. It is strongly advised that you make sure the secrets are stored in a safe place. See recommendations from Kentico:
https://docs.kentico.com/developers-and-admins/development/registration-and-authentication/external-authentication#securely-store-application-secrets

A good way to store this info would be to use Azure Key vault: 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

If you want to use more authentication providers, you can easily add them. Just make sure you add the correct NuGet package for “Microsoft.AspNetCore.Authentication.*”

We have started from a clean solution but one thing you must not forget is to have the routes configured correctly.

Create and use an Account component

We created an Account component. A page where all our login options are displayed, and the handling of our authentication requests will be configured.

For demo purposes we have kept the login as a separate page. We could also make this a component and reuse it on other pages.

Create a new Content Type: Account.

Create a new View with the following code:

The output will show all the possible providers we have configured. Your users can then select which provider they want to use to login.

Once we click on 1 of the buttons we are redirected to the login page of that provider.

The user then fills in their account information and login.

It redirects us back to our site where we will handle our user sign in.

In our “AccountContoller.cs”:

(The full code of the account controller can be found on the Kentico website: https://docs.kentico.com/developers-and-admins/development/registration-and-authentication/external-authentication#implement-the-authentication-flow)

We have our Post method to redirect to the authentication provider:

And our Callback when we get back to our website to sync the user info:

We made 1 additional code change for when we are not yet logged in and navigate to a restricted page, we get an access denied. Our URL “https://YOUR.Domain/Account/AccessDenied”.

We created a new AccessDenied page in Kentico and redirect to this page that we can then give the content and styling that we want.

Conclusion

Once the Authentication Providers have been configured and your Account controller is setup, it is easy to maintain, add or remove providers.

Every Provider has their own way of registrations for your application, but in general they use the same principles.

Do you want to start your own website and have a restricted area for your users? At Blastic we are happy to help you out and get your Portal configured correctly.