How to modify asp.net Identity UI for asp.net core WebAPI with angular

Question

I started learning .net core a few days ago and as a start, I created a .netcore project with an inbuilt angular 8 templates.

It has a couple of pages built in angular, like counter and fetches data, etc, but all the Identity-related pages (login, registration, etc) are coming as a plain HTML from the backend. So "my main Concern is making some UI changes in that page".

I found out that the identity has been added to the class library and hence not visible in the backend code. and In order to make changes to it, I will need to first add it to the code by regenerating it through scaffolding. this will override the previous library code and can be modified as per requirement.

So I selected add new scaffolded item --> identity. and selected "override all files" in first attempt and "account\login" and "account\register" only in the second attempt, and applicationdbcontext for dbcontext. but unfortunately neither worked for me.

When I try to build the code I get this error

Error   CS0246  The type or namespace name 'IWebHostEnvironment' could not be found (are you missing a using directive or an assembly reference?)   

C:\Users\MyUserName\source\repos\MyProjectName\obj\Debug\netcoreapp3.0\Razor\Pages\Shared\_Layout.cshtml.g.cs   448

I don't really know what.g.cs extension is, there is no import statement on that page and some weird code that I have never seen before. the page itself also doe's not shown any error/red marking.

I basically want to achieve two things here,

1) using .net core app completely as an API, I want to build UI for all the login related stuff in angular itself rather than getting as an HTML from the back-end.

2) adding a few more fields in the user login form. and since it is code first approach then ultimately making changes in users DBSet (which I don't know how to do in this case).

I have not added any code sample as it is a kind of straight forward problem/question. to reproduce the issue just create a project in .net core 3.0 and take an angular 8 templates. now try to make any UI related change on login or register page.

Answer 1

It's annoying that this piece which isn't necessary in the layout for a default project lives there.
Try to drop that import and that default app with scaffolded UI will work OK.

My intention was to add some styles for the Login page which is a bit boring.

What have I done?
+ created an ASP.NET Core web application with Angular and Authentication (Individual User Accounts) template (from Visual Studio 2019).
+ Add New Scaffolded Item -> Identity
+ Followed the steps from ScaffoldingReadme.txt file (some steps have already snippets in the correct place and does not require any additions)
+ Remove the line @inject IWebHostEnvironment Environment and Microsoft.AspNetCore.Hosting from the _Layout.cshtml page;
+ READY to see the RESULT:)

Answer 2

just check the guide from https://devblogs.microsoft.com/aspnet/aspnetcore-2-1-identity-ui/ and it also applies to new core 3 angular 8 Template project which have also Angular authentication support.

one thing that is a little different was the public async Task OnPostAsync() method on Areas.Identity.Pages.Account.Manage.Index.cshtml.cs file which is for supporting updating the name of the user in its profile.

So comparing your scaffolded template with below sample may help which uses UpdateAsync instead of previous simple single SetPhoneNumberAsync call.

if (Input.PhoneNumber != phoneNumber || Input.Name != user.FullName)
{
    user.FullName = Input.Name;
    user.PhoneNumber = Input.PhoneNumber;

    var updateProfileResult = await _userManager.UpdateAsync(user);
    if (!updateProfileResult.Succeeded)
    {
        throw new InvalidOperationException($"Unexpected error ocurred updating the profile for user with ID '{user.Id}'");
    }
}