Introduction 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 to get in-depth knowledge on server-side Blazor. Understanding Server-side Blazor Prerequisites Install the latest .NET Core 3.0 Preview SDK from . here Install the latest preview of Visual Studio 2019 from . here Install ASP.NET Core Blazor Language Services extension from . here Source Code Get the source code from . GitHub Create Server Side Blazor Application To create a server-side Blazor app, open Visual Studio 2019 and follow the steps mentioned below: Click on “Create a new project”.Select “ASP.NET Core Web Application” from available project types. Click on Next.A new “Configure your new project” screen will open. Put the name of the project as BlazorFbAuth and click Create. In the next screen, select “.NET Core” and “ASP.NET Core 3.0” from dropdowns on the top left.Select “Blazor (server-side)” from the list of available templates. Click on Change Authentication button, a “Change Authentication” dialog box will open. Select “Individual User Account” and click OK. Click on 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 the command and hit enter. This will update the database using Entity Framework Code First Migrations. Update-Database 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 . We need this URL to configure the Facebook app which we will be doing in our next section. Refer to the image below. https://localhost:44396/ Creating a Facebook App 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 and sign in using your Facebook account. Follow the steps mentioned below. https://developers.facebook.com/apps/ Click on the “Create App” button under the “My Apps” menu on the top. It will open a “Create a New App ID” dialog box. Put in the “Display Name” and “Contact Email”. The default email will be your Facebook email id. However, you can change it and put any email of your choice. Click on “Create App ID” to create the app. Refer to the image below. Navigate to the app dashboard by clicking on the “Dashboard” link on the navigation menu on the left. Under the “Add a Product” section, select the “Facebook Login” product and click on “Set Up” button. A QuickStart wizard will be launched asking you to select a platform for the app. Skip this wizard and click on Facebook Login > Settings from the navigation menu on the left. You will be navigated to the Client OAuth Settings page. In the Valid OAuth redirect URIs field enter the base URL of your application with /signin-facebook appended to it. For this tutorial, the URL will be . Click on “Save Changes” button. https://localhost:44396/signin-facebook Now click on Settings > Basic on the navigation menu. You will see the App ID and App Secret values. Make a note of these values as we need them to configure Facebook authentication in our Blazor app. Refer to the GIF below for a better understanding. 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. Installing Facebook authentication middleware NuGet package 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 . 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. https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.Facebook/ For this application, we are using . Therefore, we will run the following command in the package manager console of our application. .NET Core 3.0.0-preview6.19307.2 Install-Package Microsoft.AspNetCore.Authentication.Facebook -Version -preview6 3.0 .0 .19307 .2 Refer to the image below: Configure the server-side Blazor app to use Facebook authentication 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 file will open. Put the following code in it. secrets.json { : , : } "Authentication:Facebook:AppId" "Your Facebook AppId" "Authentication:Facebook:AppSecret" "Your Facebook AppSecret" Now open file and put the following code into method. Startup.cs ConfigureServices services. =>
{
  facebookOptions.AppId = Configuration[ ] facebookOptions.AppSecret = Configuration[ ] facebookOptions.Events = new OAuthEvents()
  {
    OnRemoteFailure = loginFailureHandler =>
    {
      var authProperties = facebookOptions.StateDataFormat.Unprotect(loginFailureHandler.Request.Query[ ]) loginFailureHandler.Response.Redirect( ) loginFailureHandler.HandleResponse() return Task.FromResult( ) }
  } }) AddAuthentication().AddFacebook(facebookOptions "Authentication:Facebook:AppId" ; "Authentication:Facebook:AppSecret" ; "state" ; "/Identity/Account/Login" ; ; 0 ; ; ; This code will read the AppId and AppSecret from the file. The 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 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. secrets.json AddFacebook() OnRemoteFailure Adding authorization to Blazor pages Blazor has added a new built-in component called . 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 component is configured in file. AuthorizeView AuthorizeView \Shared\LoginDisplay.razor To implement authorization to a specific page, we need to use the attribute. Blazor has introduced a new directive @attribute, which is used to include the attribute for a page. In this application, we will apply to the FetchData component. This will prohibit unauthorized access to this component. Open page and add the following lines at the top of the page. [Authorize] [Authorize] [Authorize] FetchData.razor Microsoft.AspNetCore.Authorization [Authorize] @using @attribute Execution Demo 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. Conclusion 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 nuget package to configure the middleware for Facebook authentication. Microsoft.AspNetCore.Authentication.Facebook Please get the source code from and play around to get a better understanding. GitHub Get my book to learn more about Blazor. Blazor Quick Start Guide See Also Google Authentication And Authorization In Server-Side Blazor App BlazorGrid – A Reusable Grid Component For Blazor Publishing A Blazor Component To Nuget Gallery Deploying A Blazor Application On Azure Hosting A Blazor Application on Firebase Blazor CRUD Using Google Cloud Firestore Single Page Application Using Server-Side Blazor

Facebook

Fetch

Google

Microsoft

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Implement Facebook Authentication And Authorization In Server-Side Blazor App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

C# 8.0 Indices and Ranges

5 Tips to Improve Your Productivity in C# 8.0

C# 8.0 Nullable Reference Types Are Here

How to Code a Blog With ASP.NET Core and C#

Learn how to Implement Ninject in ASP.NET MVC in just 2 minutes

C# 8.0 Indices and Ranges

5 Tips to Improve Your Productivity in C# 8.0

C# 8.0 Nullable Reference Types Are Here

How to Code a Blog With ASP.NET Core and C#

Learn how to Implement Ninject in ASP.NET MVC in just 2 minutes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps