[v2] Install: Configuration Options
Options can be found in the UIOptions class.
Any internal property can be set via extension methods (see SerilogUiOptionBuilderExtensions)
By default, serilog-ui allows access to the log page only for local requests. To give appropriate rights for production use, you need to configure authorization.
If you set AuthenticationType to Jwt, you can set a JWT token, and an Authorization header will be added to the request. In the UI, an Authorize button will be shown, and you can enter the token.
public void Configure(IApplicationBuilder app)
{
app.UseSerilogUi(options =>
{
options.Authorization.AuthenticationType = AuthenticationType.Jwt;
}
}
For Cookie just log into your website and no extra step is required.
For basic authentication, you can use the BasicAuthenticationFilter. Here's how to configure it in your code:
app.UseSerilogUi(options =>
{
options.Authorization.Filters = new IUiAuthorizationFilter[]
{
new BasicAuthenticationFilter { UserName = "SomeUser", Password = "P@ssw0rd" }
};
options.Authorization.RunAuthorizationFilterOnAppRoutes = true;
});Please notice: basic authorization is discouraged on production environment.
We suggest to use another option to secure your logs page, if you aren't in a testing or development environment.
You can add your implementations of the IUiAuthorizationFilter and IUiAsyncAuthorizationFilter interfaces, whose Authorize method is used to allow or prohibit a request.
The first step is to provide your implementation:
public void Configure(IApplicationBuilder app)
{
app.UseSerilogUi(options =>
{
options.Authorization.AuthenticationType = AuthenticationType.Jwt;
options.Authorization.Filters = new[]
{
new CustomAuthorizeFilter()
};
// or
options.Authorization.AsyncFilters = new []
{
new CustomAsyncAuthorizeFilter()
};
});
// ...
}Here is an example of how you can implement your own authentication and authorization:
public class CustomAuthorizeFilter : IUiAuthorizationFilter
{
public bool Authorize(HttpContext httpContext)
{
// Allow all authenticated users to see the Dashboard (potentially dangerous).
return httpContext.User.Identity is { IsAuthenticated: true };
}
}The default log page URL path is registered on: http://<your-app>/serilog-ui.
If you want to change this path, configure the route prefix option:
app.UseSerilogUi(option => option.RoutePrefix = "log-dashboard"); //http://<your-app>/log-dashboard
The home button URL can be customized by setting the HomeUrl property.
app.UseSerilogUi(options =>
{
options.HomeUrl = "https://example.com/example?q=example";
});To customize the dashboard UI, custom JS and CSS files can be injected.
CSS will be injected inside the <head> element.
JS will be injected at the end of the <body> element, by default. To inject it in the <head> element, set injectInHead property to true.
app.UseSerilogUi(options =>
{
options.InjectJavascript(path: "/js/serilog-ui/custom.js", injectInHead: false, type: "text/javascript");
options.InjectStylesheet(path: "/css/serilog-ui/custom.css", media: "screen");
});Custom JS/CSS files must be served by the backend using the static file middleware.
var builder = WebApplication.CreateBuilder(args);
// ...
app.UseStaticFiles();
// ...With the default configuration, static files are served under the wwwroot folder. Using the example above, the file structure should be:
JS code can be run when loading the file by wrapping the code in an IIFE (Immediately Invoked Function Expression):
(function () {
console.log("custom.js is loaded.");
})();