Hi, thank you for the example. But I'm unable to run HttpApiHost, since there is no initial data. What additional steps are required after I run DbMigrator
project and created the database?
And one question: could it be that your example does work (I believe it does :)) and mine - not, because HttpApiHost has IdentityServer integrated in your example and are two separate hosts in our case?
When you log in on the angular client, the auth server will also log in to the current user. I think you can redirect directly without doing anything
This is the first thing I have tried to do. Probably it would work, if Angular Dashboard was located as an Angular app page. But as you know, it is a server-side-generated.
So, Angular resides on http://localhost:4200 and Hangfire Dashboard (since it's a server-side-built) resides on https://localhost:44328 (HttpApiHost, but could be another ApiHost).
So this simple approach did not work and i now know why: because if we navigate between Angular app pages - we send XmlHttpRequests to get authenticated data back and build markup based on that. We do that adding access_token
header everywhere. By this header IdentityServer is able to determine user identity.
If we do window.location
or just go by some link to reach our Dashboard - we cannot add headers. We only can:
HttpContext
identity (this is what we are discussing now and possibly it will work if Angular app is run via https too, need to check)Make sure your blazor and HttpApi at same domain and port. it should be work(I have update example code).
I've tried it and - no, it does not save cookies, falling into the same "if" each time... In my case, since I'm testing it on local PC, I set domain = "localhost", the Hangfire dashboard is opened as window.open('https://localhost:44328/hangfire')
from Angular app (not Blazor) residing at http://localhost:4200
- so ports cannot be the same (CORS between IdentityServer, HttpApiHost and Angular is set up, just in case and Angular app itself works properly). Probably the problem is that Angular app is working via http?
You can use middleware, like:
I've already tried to use my code in a middleware - it enters into "if", but in reality cookies not saved. Probably it is because of the mentioned reason, there are limitation, when it is allowed to save cookies to response. Maybe in addition to this approach I need to set up new ClientId / Api Resources (and all that 'rock-n-roll' in IdentityServer admin tab) for Hangfire dashboard?
Hi @maliming.
We found out that our project contains mix of commercial and free libraries. It has been fixed, but issues of using IPermissionStore
remained. I've generated ABP module project to reproduce the issue as you had asked me. Don't forget: that project is run separately and connected to IdentityServer which is run separately too and it is not a part of this project. So Abp.PermissionStoreTest.IdentityServer
project was unloaded and didn't take part in the testing.
I didn't manage to find source code of Volo.ABP.Authorization
NuGet package (version 3.3.2). Could you please tell me where it is located or share one with me via attachment?
Please check your e-mail for the project's source code + screenshots.
Looking forward for your reply.
Is it necessary to store tokens in Local Storage? Or in cookies? Isn't it possible to use headers only?
Hi,
thanks for the recommendation.
I now mixed two approaches: when user tries to access "/hangfire" for the first time - he sends access_token in the url, later on, when Hangfire dashboard tries to load the rest of files, access_token is saved to cookies in the same method (OnMessageReceived
) from Referer information and from this moment it is used. This way it works OK for Identity. But I am still not sure it makes sense to combine URL approach with Cookies approach or I'd better use solely Cookies from the very beginning? I made the Cookies http only, i.e. not accessible via js, and ssl.
So if you would suggest to switch to the sole Cookies approach:
I have tried to use the following code finally, but it does not work: the cookie IS NOT STORED, because as I was explained - cookies cannot be saved when doing AJAX requests. So how to save access token to cookie (and keep them in-sync with current user's access token) using backend code?
OnTokenValidated = context =>
{
if (context.SecurityToken is JwtSecurityToken accessToken && !context.HttpContext.Request.Cookies.ContainsKey(accessTokenCookieName))
{
context.HttpContext.Response.Cookies.Append(
accessTokenCookieName,
accessToken.RawData,
new CookieOptions
{
Domain = context.HttpContext.Request.Host.Host,
Path = "/",
HttpOnly = true,
SameSite = SameSiteMode.Strict,
Secure = true,
MaxAge = TimeSpan.FromMinutes(60),
IsEssential = true
});
}
return Task.CompletedTask;
},
OnAuthenticationFailed = context =>
{
context.HttpContext.Response.Cookies.Delete(accessTokenCookieName);
return Task.CompletedTask;
},
OnMessageReceived = context =>
{
if (context.HttpContext.Request.Path.StartsWithSegments("/hangfire"))
{
if (context.Request.Cookies.TryGetValue(accessTokenCookieName, out string accessToken))
{
context.Token = accessToken;
}
}
return Task.CompletedTask;
}
Hi. Thank you - we've estimated the efforts and decided to go on with Vue + Razor pages, as it is supposed to work now in extensions. I've moved Server + Client parts into Nuget packages and now plug-in client part (job manipulation) into our main ABP solution. Important question: are there some difficulties if we want dashboard user to be authenticated in the same way Angular app user is (since dashboard user needs to see only accessible tenants, etc.), i.e. using IdentityServer? Do we need to implement IDashboardAuthorizationFilter
? Because by default now we see all jobs being unauthorized. There are several suggestions outthere, we would like to use the simplest for the given case (and if the user is not authenticated - probably we need to redirect him to IdentityServer login form). I've tried the following - but it does not work of course, because obviously when I use location.href
from Angular app - whole user information is mising in HttpContext
:
public class HangfireAuthorizationFilter : IDashboardAuthorizationFilter
{
public bool Authorize([NotNull] DashboardContext context)
{
return context.GetHttpContext().User.Identity.IsAuthenticated;
}
}
How to pass current authenticated user's information when accessing Hangfire dashboard page from Angular app keeping in mind it's not possible to modify headers when using window.location.href
? It's only possible when making HTTP request...
Sorry, but I am still puzzled and missing the idea how to split server and client logic for Dashboard? Hangfire dashboard pages are based on Razor markup and Dashboard is extended using DashboardRoutes.Routes.AddRazorPage
. Since the base class - RazorPage
- contains some core functionality (like using a key feature, Dashboard context), I'm afraid I will lose it if switching to Angular page.
So, question #1 is: if I make the pages Angular-based instead - how am I supposed to inject them into existing hard-coded Dashboard layout? And question #2 is how am I supposed to interact with server-side extension code? In the given case, server-side part for Hangfire is based on IDashboardDispatcher
, which mainly uses Dashboard context and the context is passed through RazorPage
class - so all existing logic and even markup is built on server-side...
At the same time, we don't want to create a new Hangfire dashboard - we just want to easily extend its features.
Hi,
under common UI I mean common design for: Identity Server login page, Angular app and now - for dashboard too. And ability to easily change (once we switch to new CSS) this for all these parts of our solution;
as I mentioned, we already have RecurringJobAdmin (it is slightly modified https://github.com/bamotav/Hangfire.RecurringJobAdmin) and it already works (as an ABP module). What we ask here is how to get rid of Vue which is used in the mentioned RecurringJobAdmin Hangfire extension, but retain interaction with server-side (CRUD for recurring jobs, update UI based on next job run time, etc.)? I've read about SPA package for AspNet Core app, but what confuses me is that it supposes running another instance of Node js, which we don't need, because we already have Angular app running. On other hand, I can't seem to see how to use Angular app to interact with Hangfire dashboard,since it looks like Hangfire dashboard is accessible only on server-side (by means of Middleware in AspNet Core app);