Can anybody give me a helping push to get my hosted Blazor application (Client, Server and Shared) to request a login immediately, before the application is initially shown. I want the experience that a user must log in before accessing the application at all.
My starting point is the Blazor Webassembly (hosted) template with Api Authorization (Individual User Accounts)
Using the Authorize attribute on either server-side actions or a client-side Razor page will not initiate the authentication flow before the specific action/page with the Authorize attribute is being requested by the user. How would I go about having the authorization flow kicked off as the first thing, before the application is even displayed for the first time?
I am sure this is possible and even trivial for somebody more savvy than me. Can anybody give me a shove in the right direction, please?
I created a control RedirectToLogin.razor
#inject NavigationManager Navigation
#code {
protected override void OnInitialized()
{
String thisPage = Navigation.Uri.Replace(Navigation.BaseUri, "~/");
Navigation.NavigateTo($"Identity/Account/Login?returnUrl={thisPage}");
base.OnInitialized();
}
}
And then inserted it into the mainlayout.razor
<div class="container-fluid">
<AuthorizeView>
<Authorized>
<NavigationLogger />
<ContextMenuMouseClick>
<MenuTopBar />
<NavMenu />
<SubPageContainer>
#Body
</SubPageContainer>
</ContextMenuMouseClick>
</Authorized>
<NotAuthorized>
<RedirectToLogin />
</NotAuthorized>
</AuthorizeView>
</div>
So when the layout is loaded and it is in the NotAuthorized state it will redirect to the login page and after authorising will return to the page it was trying to access.
Hope this helps.
The Blazor Client is bootstrapped from a static index.html in the wwwroot. In the Server project this is mapped to an Endpoint in the Startup.cs, basically a catch-all to all endpoints not taken by your Razor Pages or Controllers:
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToFile("index.html");
});
For your scenario:
Create a new layout in Server, say _LayoutBlazor.cshtml
Re-create the contents of the index.html from the Client. Note that the _framework files from the Client are copied to the Server wwwroot upon build:
:
<app>Loading...</app>
<script src="#Href("~/_framework/blazor.webassembly.js")"></script>
Create a new Razor page and put the "Authorize" tag on it and use the _LayoutBlazor.
Remove the endpoints.MapFallbackToFile("index.html"); from Startup.cs
Mark Gould has created a proof of concept here: RazorBlazor
Related
I need to build an ASP.NET Core hosted Blazor Webassembly app (.NET 6) where all of the app functionality is hidden behind a login wall but I'm not sure how best to achieve this. For authentication/authorisation I'm using ASP.NET Identity and IdentityServer.
So far I've created a new Razor component called Login.razor which simply contains a link that triggers the built in authentication process:
Log in
This component has the #page directive "/" so it's the first 'page' the user lands on when they go to the app.
This works fine, but once the user has then successfully logged in they are redirected to the return URL as part of the .NET Identity process, which in this case is a now useless login page.
I don't want to just replace the return URL in the Identity pages and redirect the user to another specific page because I think the return URL will be really useful in situations where the user has been sent a link to a specific page. For example, if I try and navigate to a protected resource like mywebsite.com/fetchdata without logging in first, it triggers whatever authentication magic Blazor comes shipped with, gets the user to log in and then redirects them to /fetchdata once they've successfully done so. I want to keep that functionality.
What do I need to do to get the server to redirect to another page (e.g. "/index") if the user has come from the Login.razor component? Or am I just approaching all of this in completely the wrong way? Any advice much appreciated.
Create a new component called RedirectToLogin and add this code:
#inject NavigationManager Navigation
#code {
protected override void OnInitialized()
{
Navigation.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
}
}
Then change your App.razor to be like this:
<CascadingAuthenticationState>
<Router AppAssembly="#typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="#routeData" DefaultLayout="#typeof(MainLayout)">
<NotAuthorized>
#if (context.User.Identity?.IsAuthenticated != true)
{
<RedirectToLogin />
}
else
{
<p role="alert">You are not authorized to access this resource.</p>
}
</NotAuthorized>
</AuthorizeRouteView>
<FocusOnNavigate RouteData="#routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="#typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
Now when an unauthenticated user tries to access a protected page he will be automatically redirected to authentication/login?returnUrl=....
Documentation
I have created an ASP.NET Core 5 MVC project and I tried to add an identity area to my project to handle all authentication and authorization tasks in it. I also registered the area in Startup.cs and I am able to route to register action using /identity/action/register.
But on the Register page when I want to change the target controller in identity area using code below:
<form asp-area="Identity" asp-controller="Account" asp-action="Register"
asp-route-returnurl="#ViewData["ReturnUrl"]" method="post"
class="form-horizontal" role="form">
then what I get in my rendered HTML is this:
<form method="post" class="form-horizontal" role="form"
action="/Account/Register?area=Identity" novalidate="novalidate">
The form doesn't target the identity area.
I've been looking for a solution all day, but none of what I found on the Web has worked for me.
Thanks
As far as I know, the form tag helper will check the route endpoints rule is exists or not when it rendered as html.
If you set the wrong endpoint routing, it couldn't render the right url as you excepted.
I suggest you could try to follow below steps to check if your application route and area folder structure is right.
1.You should make sure your area folder structure like this:
Project name
Areas
Identity
Controllers
HomeController.cs
ManageController.cs
Views
Home
Index.cshtml
Manage
Index.cshtml
About.cshtml
2.You should make sure you have add the right area route in the app.UseEndpoints method.
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "areas",
pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"
);
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
In addition to Brando Zhang's answer please also make sure that you specify area attribute to your area controllers like below
[Area("Identity")]
public class AccountController : Controller
{
//Your code here
}
I used Identity as UI to generate my login page,
My index.cshtml looks like this:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
#inject SignInManager<IdentityUser> SignInManager
#if (SignInManager.IsSignedIn(User)) {
... my html ...
}
When the user is not logged in this shows a Login button on the top right that redirects to the login page, I see the button has
<a class="nav-link text-dark" href="/VoyDashIdentity/Account/Login">Login</a>
I want the index page to show the login page (or embedd it) if the user is not logged in without the need to click the login button, I tried:
#if (SignInManager.IsSignedIn(User)) {
... my html ...
} else {
Response.Redirect("VoyDash/Identity/Account/Login");
}
But this does not properly redirect to the area, all relative links (ie to bootstrap.css stop working correctly.
What is the best way to achieve this ?
By default , it will redirect user to the new login page after scaffolding .But you can always change the path using :
services.PostConfigure<CookieAuthenticationOptions>(IdentityConstants.ApplicationScheme,
opt => {
//configure your other properties
opt.LoginPath = "/Login";
});
Make sure above config is under AddDefaultIdentity , otherwise AddDefaultIdentity will override the configuration .
When we created our server-side blazor app (ASP.NET Core Web App) initially we did not enable authentication. We would like to enable windows authentication now.
I created a test web app with windows authentication and tried adding missing bits into our existing web app. Below are the changes that I made:
Modified app.razor to include cascadingauthenticationstate
<Router AppAssembly="#typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="#routeData" DefaultLayout="#typeof(MainLayout)" />
</Found>
<NotFound>
<CascadingAuthenticationState>
<LayoutView Layout="#typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</CascadingAuthenticationState>
</NotFound>
</Router>
Added missing imports in _imports.razor
#using Microsoft.AspNetCore.Authorization
#using Microsoft.AspNetCore.Components.Authorization
Tried fetching current windows identity using below code block in a razor component:
#code {
[CascadingParameter]
private Task<AuthenticationState> authenticationStateTask { get; set; }
private async Task LogUsername()
{
var authState = await authenticationStateTask;
var user = authState.User;
if (user.Identity.IsAuthenticated)
{
Console.WriteLine($"{user.Identity.Name} is authenticated.");
}
else
{
Console.WriteLine("The user is NOT authenticated.");
}
}
}
When I run the web app locally in Visual Studio 2019 preview, I am always ending up with an empty identity name. And, IsAuthenticated is always false.
However, if I run the test web app locally, it gets the correct identity name.
Does anyone know what I am missing in my existing web app?
Thanks!
Apparently, I missed checking the box for windows authentication under Project Properties > Debug tab.
I have a Blazor Server project that has two possible debug start profiles
The web project itself XX.SD starts in the browser but the launch profile does not have an option for Windows Authentication.
The IIS Express lauch profile however does have this option in the Properties page.
Just Enable windows Authentication button : Project=>properties => Debug => web server settings
I access the HttpContext in a Blazor server-side view to manually log out. I added this line to Startup.cs: services.AddHttpContextAccessor(); and inject it in the view with #inject IHttpContextAccessor HttpContextAccessor.
I've got a log out button which tries to execute this code:
await HttpContextAccessor.HttpContext.SignOutAsync("Cookies");
but I get the following error message:
System.InvalidOperationException: 'Headers are read-only, response has already started.'
How can I prevent this error?
If you scaffolded Identity and overridden the old "LogOut.cshtml" from when you created the project via template, the Logout button won't logout. Assume you've used the default IdentityUser model. I ran into this issue and just wanted to add this if anyone else had this problem as well. I'm using Blazor Server with .Net 5.0.3's template. You can remove the Logout.cshtml.cs after as well.
Replace this \Areas\Identity\Pages\Account\LogOut.cshtml
#page
#model LogoutModel
#{
ViewData["Title"] = "Log out";
}
<header>
<h1>#ViewData["Title"]</h1>
#{
if (User.Identity.IsAuthenticated)
{
<form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Page("/", new { area = "" })" method="post">
<button type="submit" class="nav-link btn btn-link text-dark">Click here to Logout</button>
</form>
}
else
{
<p>You have successfully logged out of the application.</p>
}
}
</header>
Replace with
#page
#using Microsoft.AspNetCore.Identity
#attribute [IgnoreAntiforgeryToken]
#inject SignInManager<IdentityUser> SignInManager
#functions {
public async Task<IActionResult> OnPost()
{
if (SignInManager.IsSignedIn(User))
{
await SignInManager.SignOutAsync();
}
return Redirect("~/");
}
}
This tripped me up too, but you need the logout functionality to be on a Razor Page (not a Blazor component). Create a Logout page and put your logout code in the OnGetAsync() method.
Your logout button can then link to the logout page.
http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/4316/A-Demonstration-of-Simple-Server-side-Blazor-Cookie-Authentication.aspx - this is a helpful example
Don't use IHttpContextAccessor.
I guess that you're using ASP.NET Core Blazor authentication and authorization new system. If not, then start with it right now. Live is too short to be wasted over other things. This is the best product created so far for Blazor's authentication and authorization, and it is based on the Identity UI (This is not Blazor, of course). Additionally, there are a couple of Components which enable controlling the flow of authentication and authorization in your application, such as displaying a "Log in" button and a "Log out" button in your layout, interchangeably altering depending on your authentication state, etc.
Please, go to this page and start learning this excellent system, and then come here for specific issues you face:
https://learn.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.0&tabs=visual-studio
Hope this helps...