Easily Create A Blazor Server App With Azure AD Authentication

 Prerequisites


Azure account and Visual Studio 2019.

Create a Blazor Server app in Visual Studio 2019


We can create a Blazor Server app in Visual Studio 2019 using Blazor Server template. You can click the “Change” link to change the authentication type.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
You must choose authentication type as ”Work or School Accounts”. Please choose the correct domain. I am using my office domain in this application. Please note that your Visual Studio profile must be integrated in the Azure portal.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
Click OK button and click the “Create” button from the previous dialog box.
 
That’s all. Your simple Blazor app with Azure AD authentication will be created in a few seconds.
 
You can see a new section “AzureAd” created in the appsettings.json file. In your Azure account, one new app registration will be created automatically.
 
Easily Create A Blazor Server App With Azure AD Authentication
You can see the app registration details in the Azure portal. Click Azure Active Directory blade and choose “App registrations” menu.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
You can see the newly created app registration under “Owned applications” tab. This is the same name of the Blazor project.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
You can click the app registration and click “Authentication” tab.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
You can see the Redirect URI same as your Blazor application settings.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
In the Blazor project, you can see a new component “LoginDisplay” added under “Shared” folder.
 
LoginDisplay.razor
  1. <AuthorizeView>  
  2.     <Authorized>  
  3.         Hello, @context.User.Identity.Name!  
  4.         <a href="AzureAD/Account/SignOut">Log out</a>  
  5.     </Authorized>  
  6.     <NotAuthorized>  
  7.         <a href="AzureAD/Account/SignIn">Log in</a>  
  8.     </NotAuthorized>  
  9. </AuthorizeView>  
We can notice that AzureAD has registered in “ConfigureServices” method inside the Startup class.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
We can run the application. It will ask your AD credentials. I login with my office Azure AD account.
  
After successful login, it will ask the permission for accessing the application (only one time per user)
 
Easily Create A Blazor Server App With Azure AD Authentication
After you accepted your permission, Blazor app will be loaded successfully.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
We can deploy this app to the Azure portal also.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
You will get the below error while accessing the web app after deployment. 
Easily Create A Blazor Server App With Azure AD Authentication
 
This is because you have set redirect URI in app registration as localhost. We can add one more redirect URI with web app address.
 
Easily Create A Blazor Server App With Azure AD Authentication
 
We can access the web app again. It will ask the AD credentials. After successful login, your web app will be loaded.
 
Easily Create A Blazor Server App With Azure AD Authentication
 

Conclusion


In this post, we have seen how to create a Blazor with Azure active directory authentication with simple steps. We have deployed same app to the Azure portal also.