The latest preview for .NET Core 3 (preview-6) has introduced the functionality to add authentication and authorization in a server-side Blazor application. In this article, we will learn how to implement authentication and authorization using Facebook in a server-side Blazor application. You can refer to my previous article Understanding Server-side Blazor to get in-depth knowledge on server-side Blazor.
The source code has been updated to .NET Core 3.2 Preview-1. Get the source code from GitHub.
To create a server-side Blazor app, open Visual Studio 2019 and follow the steps mentioned below:
Create
.Create
button to create the application.These steps are shown in the GIF image below.
Before running the application, we need to apply migrations to our app. Navigate to Tools >> NuGet Package Manager >> Package Manager Console. It will open the Package Manager Console. Put in Update-Database
command and hit enter. This will update the database using Entity Framework Code First Migrations.
Right-click on the project in solution explorer and select properties. Select Debug from left side menu then scroll to the bottom of the page. Note the SSL enabled URL. In this case, the URL is https://localhost:44396/
. We need this URL to configure the Facebook app which we will be doing in our next section. Refer to the image below.
We need to create a Facebook app and configure Facebook Login for it. We will then use the App ID and App Secret of this Facebook app to implement Facebook authentication in our Blazor app. Navigate to https://developers.facebook.com/apps/ and sign in using your Facebook account. Follow the steps mentioned below.
/signin-facebook
appended to it. For this tutorial, the URL will be https://localhost:44396/signin-facebook
. Click on “Save Changes” button.Refer to the GIF below for a better understanding.
Important Note
The trademark or brand element of Facebook is not allowed to be used as the Display Name of your Facebook App. Therefore, words such as FB, Face, Book, Insta, etc. cannot be used as Display Name.
To configure the ASP.NET Core middleware for Facebook authentication we need to install the nuget package in our application. The version of this nuget package must match the version of .NET Core 3 which we are using in our project.
Open https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.Facebook/. Select the version of .NET Core 3 from the “Version History”. Copy the command from the “package manager” tab. Run this command in the NuGet package manager console of our application.
For this application, we are using .NET Core 3.0.0-preview6.19307.2
. Therefore, we will run the following command in the package manager console of our application.
Install-Package Microsoft.AspNetCore.Authentication.Facebook -Version 3.0.0-preview6.19307.2
Refer to the image below:
We need to store the App ID
and App Secret
field values in our application. We will use Secret Manager tool for this purpose. The Secret Manager tool is a project tool that is used to store secrets such as password, API Key, etc. for a .NET Core project during the development process. Secret Manager tool allows us to associate app secrets with a specific project. It also allow us to share them across multiple projects.
Open our web application once again and Right-click the project in Solution Explorer. Select Manage User Secrets from the context menu. A secrets.json
file will open. Put the following code in it.
{ "Authentication:Facebook:AppId": "Your Facebook AppId", "Authentication:Facebook:AppSecret": "Your Facebook AppSecret" }
Now open Startup.cs
file and put the following code into ConfigureServices
method.
services.AddAuthentication().AddFacebook(facebookOptions => { facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"]; facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"]; facebookOptions.Events = new OAuthEvents() { OnRemoteFailure = loginFailureHandler => { var authProperties = facebookOptions.StateDataFormat.Unprotect(loginFailureHandler.Request.Query["state"]); loginFailureHandler.Response.Redirect("/Identity/Account/Login"); loginFailureHandler.HandleResponse(); return Task.FromResult(0); } }; });
This code will read the AppId
and AppSecret
from the secrets.json
file. The AddFacebook()
method is an extension method and it is used to configure the Facebook Authentication options for our application. We are also handling the event of OnRemoteFailur
e in this code section. Hence, if the user denies access to his Facebook account, then he will be redirected back to the Login page of our Blazor application.
Blazor has added a new built-in component called AuthorizeView
. This component is used to display different content based on the authentication state of the application. This component will display the child component only when the user is authorized. The AuthorizeView
component is configured in \Shared\LoginDisplay.razor
file.
To implement authorization to a specific page, we need to use the [Authorize]
attribute. Blazor has introduced a new directive @attribute
, which is used to include the [Authorize]
attribute for a page. In this application, we will apply [Authorize]
to the FetchData
component. This will prohibit unauthorized access to this component. Open FetchData.razor
page and add the following lines at the top of the page.
@using Microsoft.AspNetCore.Authorization @attribute [Authorize]
Launch the application. Navigate to Fetch Data component by clicking on the “Fetch data” link on the menu on the left. You will see a “Not authorized” message displayed on the screen. Click “Log In” on the menu at the top. In the next page click on the “Facebook” button to login with Facebook. On the next page, you will be asked to provide the login credentials of your Facebook account. Fill the details and click Log In. Upon successful login, you will be able to access the Fetch Data component. If you do not want to login then click on “Not now”. It will redirect you back to the Login page of Blazor app.
Refer to the GIF below for a better understanding.
Once you are logged in successfully into our Blazor app using Facebook, you will be also logged in to https://www.facebook.com/
. This will create a set of browser cookie for https://www.facebook.com/
. Therefore, the Blazor app will not ask the Facebook credentials when you try to login again. If you log out from Facebook then you have to enter credentials while logging into Blazor app.
We learned how to implement Facebook authentication and authorization in a server-side Blazor application. We have created and configured a Facebook app to implement Facebook authentication. To implement authorization for a specific component in Blazor, we have used the [Authorize]
attribute. We have used Microsoft.AspNetCore.Authentication.Facebook
nuget package to configure the middleware for Facebook authentication.
Please get the source code from GitHub and play around to get a better understanding.
Get my book Blazor Quick Start Guide to learn more about Blazor.
Preparing for interviews !!! Read my article on C# Coding Questions For Technical Interviews
Introduction Blazor is a .NET web framework that allows us to create client-side applications using…
Introduction In this article, we are going to create a sudoku solver with the help…
Introduction In this article, we will learn how to implement Azure serverless with Blazor web…
Introduction Angular is an open-source framework that allows us to create applications for multiple platforms…
Introduction In this article, we will create an optical character recognition (OCR) application using Angular…
Introduction In this article, we will create an optical character recognition (OCR) application using Blazor…
View Comments
Hi Ankit,
thank you for your great work.
Could you also provide a server-side Authentication And Authorization sample using a custom user db and NOT using entity Framework but dapper or the like. This could unhide a lot of things going on in the background and give a great help to people not using EF and having to use a legacy user db which cannot be changed.
regards
Uwe
Since Blazor is based on ASP.NET Core, hence all the authentication mechanism of .NET core is applicable to Blazor also. You can take a reference from my previous article (https://ankitsharmablogs.com/cookie-authentication-with-asp-net-core-2-0/) where i have implemented cookie authentication and authorization using ADO.NET. You can create a similar application using any other ORM also. The underlying logic will not change.
Thanks for this article
It's nice that you keep on writing articles about Blazor.
Thank you for writing this. I was searching for something similar and my search was going futile but at last, I found this. With proper execution, I will surely turn this into a success.
Thank you for this article, it really helps a developer.
I'm a Blazor server developer.
Thanks for reading my article. I am glad my work is helpful for you.