Open Closed

Configure Authentication & Authorization for Blazor Server Application #6025


User avatar
0
pvala created
  • ABP Framework version: v7.3.2
  • UI Type: Angular & Blazor Server UI
  • Database System: EF Core (MySQL)
  • Tiered (for MVC) or Auth Server Separated (for Angular): Auth Server Separated
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

I have an application template with EF Core MySQL and Angular. I want the Forms module to be included in my project, but since ABP is not providing UI for Forms in Angular as of now, I want to keep one separate microservice (with Blazor Server) for the Forms module. For that I have created a new microservice in my solution. And there I had the HttpApi.Host project, where Swagger UI is already configured. Here, I integrated the Forms module as a project, and I added the required Razor pages in the HttpApi.Host project of the service along with the required configuration.

But, now I am not sure how exactly I have to configure the authentication and authorization for the Forms Razor pages. Even though I am able to access the pages on the UI, but I can't perform anything because the user is unauthenticated. I have implemented the usual "oidc" authentication, which is as of now working, but authorization is something I'm not sure how to configure. I have granted all the forms permissions to the admin user through Angular UI, but it still says unauthorized. Can you help me with that?

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

39 Answer(s)
  • User Avatar
    0
    pvala created

    Any updates on the ticket please?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    I don't know the details of your project.

    Can you please use the suite to create a new project to reproduce the problem and share it with me? I will check it asap. my email is shiwei.liang@volosoft.com

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    Sent you the project.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Ok, you want to use the FormsService.HttpApi.Host as an app.

    You should add the account module to the project.

    You can refer to the public web project to configure the FormsService.HttpApi.Host

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    Can you tell me which exact module I need to add?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    You can refer to the public web project to configure the FormsService.HttpApi.Host

    And to start the login process, you need a login link.

    <a href="~/Account/Login">Login<a/>

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I'm trying to add typeof(AbpAccountPublicHttpApiClientModule) which belongs to the package "Volo.Abp.Account", but I am not able to find that package.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi

    There is no Volo.Abp.Account package.

    You should add the account module to the project.

    Sorry, I made a mistake. you don't need it.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    What I have done now is, I have downloaded the forms module as a project. Here we have an IdentityServer project which acts as Auth Server. Now what I want is that I will run only the HttpApi.Host project and Web.Host project and the Auth Server should run from my already existing project which is in different solution, but I am getting internal server error. Is there any configuration I need to do to use an external Auth Server?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    You need to configre the OIDC:

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I have already configure in the Module file of the Host project but still the same error

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    This is where I am getting the internal server error.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Could you share the error logs?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I have sent you the projects via email

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    I made an example and shared it with you via email. please check it.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I have created an entire new microservice template solution with BlazorServer as UI Framework. And there I added a new microservice named 'forms', and inside that service, I added the forms module as a project using abp suite. But here the problem is, I am not able to see the razor pages of the forms module. Only a folder named 'modules' is created where all the backed is configured and that's working as well. But I am not able to see the pages for UI. How can I get the pages to show the forms on the Blazor app?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    You should add the Volo.Forms.Web project to the BlazorServer app.

    • Add the FormsWebModule Module dependencies.
    • Add the @volo/forms to the package.json and use the abp install-lis to restore the npm packages.
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I don't have Volo.Forms.Web project

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Sorry, I mean the Volo.Forms.Web Nuget package.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    There is no such package as Volo.Forms.Web

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    Installed it manually using CLI.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I have done the configuration that you suggested and the forms module is showing on the Blazor UI, but I am getting error when clicking on the forms menu.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    Even when I try to run the swagger UI for the formsservice that I created for Forms modules, I am not able to Authorize the API, because it says the redirct_uri is not allowed for this client. I have added the URL of the service in the Web Swagger client as well, am I missing any configuration? .

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    You can check the database and try to clear the Redis cache.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    pvala created

    I am able to authorize now but the while fetching data using Swagger UI, I am getting this error

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.