Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (97)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (111)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (480)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (21)WPF  (122)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (51)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (227)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (23)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (60)UI  (131)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (215)What's new  (140)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Authentication Support in Syncfusion Blazor Template Studio: A Complete Guide

Authentication Support in Syncfusion Blazor Template Studio: A Complete Guide

Authentication is the process of determining a user’s identity and verifying whether the user has access to a resource. You can define the view access of your web application by enabling authentication support.

Our Syncfusion Blazor Template Studio provides authentication support for creating secure Blazor apps. It supports various authentication types, namely, individual accounts, Microsoft identity platform, and Windows.

In this article, we will learn how to use the different authentication types supported in the Syncfusion Blazor Template Studio to secure your Blazor application.

Prerequisites

Install the Syncfusion Blazor Template Studio extension

The Syncfusion Blazor Template Studio is available as an extension in the Visual Studio Marketplace. Also, you can directly install it from Visual Studio 2019 by navigating to Extensions > Manage Extensions > Online and searching for the Syncfusion Blazor Template Studio.

Note: Refer to Syncfusion VS Extensions Now on the Visual Studio Marketplace! blog to learn more about the extensions and how to install them.

Creating Syncfusion Blazor App with Authentication using Blazor Template Studio

Follow these steps to create a Syncfusion Blazor application through Visual Studio 2019.

  1. To create a Syncfusion Blazor project, use either of the following options:
    Option 1
    Choose Extension -> Syncfusion -> Essential Studio for Blazor -> Create New Syncfusion Project from the Visual Studio menu as shown in the following screenshot.
    Choose Extension , Syncfusion, Essential Studio for Blazor, Create New Syncfusion Project… from the Visual Studio menuOption 2
    Select File -> New -> Project. The Create a new project dialog will open. Choose the templates provided by Syncfusion for Blazor by filtering the project type as Syncfusion, or by using Syncfusion as the keyword in the search text box.
    Create a new project dialog
  2. Now, select the Syncfusion Blazor Template Studio option and click Next.
    Select the Syncfusion Blazor Template Studio
  3. Then, the Syncfusion Blazor Template Studio wizard for configuring the app will appear. In the Project Type tab, choose one of the Syncfusion Blazor project types:
    • Syncfusion Blazor Server App
    • Syncfusion Blazor WebAssembly App

    Choose Syncfusion Blazor Server AppThe Syncfusion Blazor Web Assembly App project type provides options for ASP.NET Core hostedProgressive Web Application, or both.Choose Syncfusion Blazor WebAssembly App

    Note: The Progressive Web Application option will be available only if .NET Core version 3.1.200 or higher is installed.

  4.  Click either Next or the Controls tab. The Syncfusion Blazor components will be listed. Choose the components required for your application.
    Choose the required Syncfusion Blazor Components from the list
  5. Click either Next or the Features tab. The features available in the selected controls will be listed. Choose the features you want.
  6. Click either Next or the Configuration tab, and the Configuration section will load. Choose the required .NET 5.0 or ASP.NET Core 3.1 version, theme, HTTPS configuration, authentication type (none, individual accounts, Microsoft identity platform, or Windows), and Blazor Web Assembly project types (ASP.NET Core hosted and progressive web application).

    Note: The ASP.NET Core hosted and progressive web application options are visible only for the Blazor Web Assembly App project type. The Windows authentication type is supported only in the Blazor server application projects.

    Refer to the following screenshot.

    Select the Authentication Type

  7. Now, click Create and the Syncfusion Blazor application will be created.
    Created Syncfusion Blazor Server App
  8. If you installed the trial setup or the NuGet packages from nuget.org, you should register the Syncfusion license key in your project. Since the Essential Studio 2018 Volume 2 (16.2.0.41) release, Syncfusion has provided a licensing system. Refer to the How to generate Syncfusion license key documentation and the What’s New in 2018 Volume 2: Licensing blog for complete details.

Authentication configuration

We need to register the created application in the Google Platform API console for individual accounts authentication, and in Azure Active Directory for the Microsoft identity platform authentication.

From the Google Platform API Console registration, we can get the client ID for individual accounts. From the Azure Active Directory registration, we can get the tenant ID and project client ID for the Microsoft identity platform.

Only after we configure these ID values with the created applications will the project run properly with authentication support.

Individual account authentication

Server, ASP.NET Core hosted with web, and ASP.NET Core hosted with progressive web applications

The individual account authentication type projects in the Blazor Template Studio, allow the users to register in the application itself. This does not require any authentication configuration changes in the application.

Web and progressive web applications

  1. First, open Google Cloud Platform API console credentials page.
  2. In the Credentials section, click the Create Credentials tab. Then, select the OAuth client ID option from the list.
    Refer to the following screenshots.
    Select Create Credentials tabSelect the OAuth Client ID
  3. Next, select the Application type as Web application in the client ID creation section.
    Select the Application type as Web application
  4. Now, type your publish URL link as the authorized URI and your login URL as the redirected URI.
    Enter your publish URL link as Authorized URI and login URL as Redirected URI
  5. Click Save. The OAuth client ID will be created. Copy that credential.
    Copy your created OAuth client id
  6. Then, add that client ID, and the redirect URI in the appsettings.json file of your project.
    Add the Client Id, and Redirect Uri in the appsettings.json file
  7. Finally, change the build configuration binding to google in the Program.cs file.
    Change the build configuration bind as Google from Local in the Program.cs file.

Microsoft identity platform authentication

Server application

  1. Open the Azure Active Directory App Registration page.
  2. Then, click the New registration tab on the App Registration page.
    Click the New registration tab
  3. Now, provide a name for your application and set the Supported account type as single tenant.
    Give name for the application and select the supported type as single tenant
  4. Next, select the Web platform from the dropdown, type your application’s redirect URI, and then click Register.
    Select the platform as Web and give your application’s Redirect URI and click Register
  5. Now, the app will be registered. Navigate to the Authentication page (in the left pane) and select the ID tokens checkbox.
    Select the Id tokens check box
  6. Get the application client ID and directory tenant ID from the overview page (in the left pane).
    Get the Application client ID, and Directory tenant ID from the overview page.
  7. Then, configure the application client ID, directory tenant ID, and domain in your project’s appsettings.json file.
    Configure the client tenant id, application id, and domain in your project’s appsettings.json file

Web application and progressive web application

  1. Follow steps 1 through 4 in the server application section.
  2. In the authentication section, migrate the application’s URI by clicking the arrow (highlighted in the following image).
    Migrate the API by clicking the arrowThen, the Migrate URIs dialog will open. There, select the Redirect URIs checkbox.
    Migrate URI dialog
  3. In the Authentication section, select the Access tokens and ID tokens checkboxes.
    Select the Access tokens and Id tokens check boxes
  4. Next, get the application client ID and directory tenant ID from the Overview page (in the left pane).
    Get the Application client ID, and Directory tenant ID from the overview page
  5. Now, configure the directory (user) tenant ID and application (project) client ID in your project’s appsettings.json file.
    Configure the client tenant ID and application ID in your project’s appsettings.json file.

ASP.NET Core hosted web and ASP.NET Core hosted with progressive web applications

Client project registration and configuration

For the client project registration and configuration, follow the same steps listed in the web and progressive web applications section.

Server project registration and configuration

  1. Follow steps 1 through 3 in the Web and progressive web application section.
  2. Now, add a scope API in the Expose an API page.
    Add a scope API in the Expose an API page
  3. Then, provide the scope name, admin consent display name, and admin consent description and click Add scope. Now, the scope API will be created. Copy those scope API values.
    Add a Scope dialog
  4. Next, get the application client ID and directory tenant ID from the Overview page (in the left pane).
    Get the Application client ID, and Directory tenant ID from the overview page.
  5. Now, configure those client tenant ID, application ID, and domain values in your project’s appsettings.json file.
    Configure the client tenant id, application id, and domain in your project’s appsettings.json file
  6. Finally, configure the scope API in the client project program.cs file (highlighted place in the following image).
    Configure the scope API in the client project program.cs file

Windows authentication

As mentioned earlier, the Windows authentication type is applicable for the server application only. You don’t need to make any authentication configuration changes for this type as it retrieves the username from the logged-in Windows machine.

Run the application

Run the application. The selected Syncfusion Blazor components will be present in the app, and you can select a component to see the component’s output.

Run the application

Register and log into the application

Individual authentication

Server, ASP.NET Core hosted web, and ASP.NET Core hosted with progressive web applications

  1. First, click the Register tab in your application.Click the Register tab
  2. Then, register the application with your email address and create a password for it.Register your application with Email address and password
  3. Now, confirm the registration by clicking Click here to confirm your account.
    Confirm the registration by clicking Click here to confirm your account
  4. Finally, submit your registered email address and password to log in to the application.
    Submit your registered email address and password to login the application

Web and progressive web applications

We have already registered the web and progressive web applications. So just log in to the application using your Gmail account.

Login to the application using your Gmail account

Microsoft identity platform

Server, web, progressive, ASP.NET Core hosted web, and ASP.NET Core hosted with progressive web applications

  1. Log in to your application using your Microsoft account.
  2. Then, click Accept to permit access to the app through the Microsoft Identity domain.
    Click Accept

Windows Authentication

The Windows Authentication automatically retrieves the username from the Windows machine since there is no register and login process involved.

Conclusion

Thanks for reading! In this blog, we have learned how to create a Blazor project with the various authentication types supported in our Syncfusion Blazor Template Studio. This will help you create impressive web applications in less time.

Now it’s your turn to try out our Syncfusion Blazor Template Studio to create secure web applications with authentication. Follow the steps provided in this blog and leave your feedback in the comments section!

If you have any questions, you can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top