I created a Blazor Application with Authentication (Individual User Accounts). Everything works fine as it is, but I want to customize the - let's say - login page. Also, the auto-generated layout annoys me. So I scaffolded the login using Add -> New Scaffolded Item -> Identity -> Selected Login and OK. For the Layout File I chose _Host.cshtml, the one that the rest of my Blazor application uses as well. If I now select "login" in my webpage, I get this Error:
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'BlazorIdentityTest.Areas.Identity.Pages.Account.LoginModel', but this ViewDataDictionary instance requires a model item of type 'BlazorIdentityTest.Pages.Pages__Host'.
So my question is: How do I get around this error? Is it even possible to use this Layout file with the Identity system? If not, is there another way to use the Blazor layout instead of the default from the Identity System?
I'm using the .Net Core 3.1.100 SDK.
Related
When I create an ASP.NET Core web app project, it by default has the logged in user in the top right corner of the page. Problem is that when I make an ASP.NET Core empty project, the user object is not available?
My question is how do I add the user object to a empty template?
In case it is relevant, I need this to get the current logged in Windows user, I don't need any user management, just need to identify who is logged in.
.Net Core 6, MVC, and your basic authentication with Identity set up (which is RazorPages only), but I want my Home/Index.cshtml page to "host" the Identity/Account/Login page, preferably without having to resort to an iFrame.
Everything I've seen so far is simply how to build the Login page, but nothing on how to put the page somewhere besides its default location.
How do I put the Login form/page on my MVC Home/Index.cshtml page?
How do I put the Login form/page on my MVC Home/Index.cshtml page
Login page is a razor page not a partial view, so you cannot use <partial> to add Login page in the Index view. You can put your code for login in the Index.cshtml, but you may need change a lot, like building the Login page.
If you add below code in the _layout, so that you can login at any view you want.
<partial name="_LoginPartial" />
result:
I have a solution based on the Visual Studio template that is successfully using IdentityServer4.
What think I understand is:
The IS4 integration implements endpoints at /authentication/{action}, e.g. authentication/login
IS4 routes that request to host/Identity/Account/Login.cshtml. I have scaffolded identity so I can see that .cshtml file in my project.
The code-behind Login.cshtml.cs takes care of speaking with SignInManager, etc.
In the client project the "LoginDisplay.razor" component redirects to /authentication/login when I click the login button. I presume that this is where step 1 above is invoked, which redirects to the location in step 2.
Fine. Now, I want to customise the whole login UI.
From instructions at: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-5.0 I can see that:
I can configure authentication paths to be anything I want. For example:
builder.Services.AddApiAuthorization(options => {
options.AuthenticationPaths.LogInPath = "security/login";
})
So, I have created a razor component to handle security/login:
#page "/security/{action}"
#using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="#Action">
<LoggingIn>
This is the new login page
</LoggingIn>
</RemoteAuthenticatorView>
#code{
[Parameter] public string Action { get; set; }
}
My expectation was that after clicking "Login", I would be routed to the above and presented with a page that just said:
"This is the new login page"
and thought that from there, I would:
Customise the UI within the <LoggingIn> fragment.
Make a call to an API that would then replicate the logic in the scaffolded login.cshtml file that actually logs the user in.
That line of code from the login.cshtml.cs file looks like this:
var result = await _signInManager.PasswordSignInAsync(
Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
However, it seems that the razor component I created for /security/login is simply a 'transient' message that appears before being routed to the scaffolded login.csthml file.
So, to me, it seems that I am unable to actually change the physical page used to collect the user's credentials. I am only able to change the transient screen that appears before the originally scaffolded login page is shown.
Does this mean that if I want a customised UI for logging in I need to directly edit the scaffolded page as opposed to creating a whole new UI in the WebAssembly project that calls an APIController that I create to take care of using SignInManager?
It would actually be a lot less work to do that than to take the approach of creating a Client-side UI that calls an API that I create, etc. so, with hindsight, editing the scaffolded cshtml file is probably the best way to go. But am still confused as to what value is really being brought by being able to configure options.AuthenticationPaths.LogInPath.
I am using IdentityServer template is4aspid, which comes with asp.net identity, I would like to add a register page to it. I don't want to do it on my main MVC app as I don't want it to have access to the users DB, and hence the identityServer already has that reference, I thought it would be better to just add the registration step to it.
I copied the Register.cshtml page from another asp.net webapplication, where I scafolded the identity, but when I click on register, nothing happens, not sure what is happening
.
As you can see in the picture above, after clicking on the Register link, the url changes to the one supposed to provide the registration form, but the page remains the same of the login form.
I added the following line to _Layout.cshtml
When I create a web project using "ASP.NET Core Web Application" / "Web Application" (non-MVC) / "Individual User Accounts"... I get the sample project with Register and Login buttons that show their respective pages when I click on them. HOWEVER... the very weird thing is if I search for "Create a new account" which is on the register page it's not found... and more... there is no AccountController in the Identity area or anywhere... so 1) the pages aren't anywhere in my solution folder and 2) how in the world are these pages showing up?!? I've tried on two different computers now. (using Core 2.1)
As an example this link works:
<a asp-area="Identity" asp-page="/Account/Login">Login</a>
and takes me to:
https://localhost:44300/Identity/Account/Login
and yet my folder structure (both in the solution and on disk) looks like this:
ASP.NET Core 2.1 with Identity automatically includes the "Default UI". It's a Razor Pages class library that's referenced via AddDefaultIdentity in Startup, which under the hood literally calls AddDefaultUI.
If you want the actual files in your project, you need to scaffold them in. Right click your project in the solution explorer and choose Add > New Scaffolded Item... Then, click the Identity listing on the left, and then the Add button. A new window will pop allowing you to select the pages you want included, your context, etc. Configure it how you like and go.
It's also worth noting, that as long as you use AddDefaultIdentity, the default UI is still included, which means you don't actually need all the scaffolded files if you want any of them. They'll essentially function as overrides. Anything specifically included in your project will be used, while anything that's missing will be pulled from the default UI.
This also means that if you want to do something like use standard controller actions and views instead of Razor Pages, the default UI will still be active, and take precedence. You have to use AddIdentity or AddIdentityCore instead of AddDefaultIdentity if you want the default UI off completely.
ASP.NET Core 2.1 introduced Razor UI in class libraries. Identity with it's UI is in nuget package.
The nice thing about this is you can now package UI with your libraries and then expose the UI for overriding.
This post describes how to override the UI. Essentially, you add the pages you want to override to your project to /Areas/Identity/Pages.... the easiest way currently is to run the scaffolder for identity and a visual walkthrough.