Hi,
Sorry I forgot your project version, this way only work for projects starting in 4.0.
I would be really grateful if you updated your test project and split IdentityServer and HttpApi.Host part - it will help me to troubleshoot authentication and test new ABP 4.0 things once we upgrade to this version.
Using cookies requires your backend and frontend to be on the same domain&port. Maybe you can use cache to store access_token.
I managed to do this using Cookies approach and it seems to work fine. Though, I will show my code here. If you find something not fully correct - please, comment here.
So,
step 1: made Angular web app running via https. Modify SessionRequestHttpInterceptor (pass withCredentials: true):
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const modified = req.clone({
setHeaders: { 'Content-Language': this.selectedLangCulture || '' }, withCredentials: true
});
return next.handle(modified);
}
step 2: modify appsettings for HttpApi.Host: "AngularApp:HostUrl": "https://localhost:4200", "CorsOrigins": https://localhost:4200"
step 3: Middleware for HttpApi.Host:
public static class ApplicationBuilderAccessTokenCookieMiddlewareExtension
{
public static IApplicationBuilder UseAccessTokenCookieMiddleware(this IApplicationBuilder app, string cookieName)
{
return app.Use(async (httpContext, func) =>
{
string token = null;
token = httpContext.Request.Cookies[cookieName];
if (token == null)
{
token = httpContext.Request.Headers[HeaderNames.Authorization].ElementAtOrDefault(0);
if (token != null)
{
token = token.Replace("Bearer ", "");
}
}
if (token != null)
{
httpContext.Response.Cookies.Append(cookieName,
token,
new CookieOptions
{
Path = "/",
HttpOnly = true,
SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Strict,
MaxAge = TimeSpan.FromMinutes(5),
IsEssential = true,
Secure = true
});
}
await func.Invoke();
});
}
}
step 4: Middleware for IdentityServer:
public static class ApplicationBuilderAccessTokenCookieMiddlewareExtension
{
public static IApplicationBuilder UseAccessTokenCookieMiddleware(this IApplicationBuilder app, string cookieName)
{
return app.Use(async (httpContext, func) =>
{
if (
(httpContext.User.Identity?.IsAuthenticated != true || httpContext.Request.Path.StartsWithSegments("/account/logout"))
&&
httpContext.Request.Cookies[cookieName] != null
)
{
httpContext.Response.Cookies.Delete(cookieName);
}
await func.Invoke();
});
}
}
step 5: HangfireAuthorizationFilter + corresponding Razor error page:
public class HangfireAuthorizationFilter : IDashboardAuthorizationFilter
{
public bool Authorize([NotNull] DashboardContext context)
{
var path = context.GetHttpContext().Request.Path;
var isResource = path != null && (path.Value.StartsWith("/css") || path.Value.StartsWith("/js") || path.Value.StartsWith("/font"));
if (!context.GetHttpContext().User.Identity.IsAuthenticated && !isResource)
{
context.Response.ContentType = "text/html";
context.Response.WriteAsync(new AccessDeniedPage().ToString(context.GetHttpContext()));
return false;
}
return true;
}
}
I had the same problem too. Try clearing chrome cache.
Oh, you are right - i use localhost for dev env, so i had some tenant id there :) it helped.
And yes, all in all, identity works as expected for Hangfire page in this simplified configuration. Could you please split HttpApiHost and IdentityServer in your example? I suspect the root cause of my issue could be that. And if nevertheless sending identity continues working, I will have a look what could be different in our configurations.
I've tried all that I can in my case and the only way out was to create token cookie, as we discussed a bit earlier here. However, if it is possible to make it work without setting the cookie - it will be much better!
Looking forward for your updated example. Thanks!
BTW, just in case: we are still using ABP 3.3.2 - we are not ready to update to 4.x. If it is possible, please use the same version in your example.
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...