Best way to authenticate Umbraco API request as back-office user
Hi,
I have a VueJS application which pulls data from an Umbraco WebAPI endpoint. The data needs to be accessible only to users who are logged into the Umbraco back-office.
The controller inherits from UmbracoAuthorizedApiController and I can successfully test the API endpoint by loading its URL in the browser — when logged in it's accessible, when not logged in it returns an authentication error, as expected. All good.
However, the VueJS application always experiences a 401 Unauthorized response from the API endpoint, presumably because it's running without the necessary context to authenticate.
So, question is, what's the simplest way to get the application to authenticate as a back-office user? I've seen a couple of approaches (e.g. using JWT tokens and OAuth2) but I'm not sure whether they're still the best approaches; they also seem very technical/scary to someone who's not overly familiar with authentication.
Can anyone suggest any alternative or anything simpler in order to handle this?
I don't think there is an easier way to do this because you will first need to authenticate with the Umbraco Backoffice to obtain an auth cookie (as you have already noticed). Once you have that auth cookie, it then needs to be sent with every request to the API controller in order to validate authentication/authorisation.
I had a similar requirement not too long ago whereby I wanted only backoffice users to manage Hangfire tasks, and the only way to allow access to this was to first log into the backoffice to obtain an auth cookie.
My suggestion is to use JWT as it will be the lesser headache... and remember, you want it to be fairly secure right, otherwise what's the point of securing it? :)
I've just picked this up again and I believe there's a simple solution. In your API controller when you create your class, inherit from UmbracoAuthorizedApiController rather than UmbracoApiController. Then decorate your methods with the [UmbracoAuthorize] attribute. So, something like this:
namespace MyProject.Controllers
{
public class OrderManagementController : UmbracoAuthorizedApiController
{
[HttpGet]
[UmbracoAuthorize]
public List<CustomerViewModel> GetCustomers()
{
// Method logic
}
}
}
Then when you call the API end-point in your JavaScript (or whatever) add 'BackOffice' to the controller path, e.g. change from /umbraco/api/OrderManagement/GetCustomers to /umbraco/BackOffice/api/OrderManagement/GetCustomers.
This all seems to have done the trick in my VueJS app.
Hi all, I have a similar problem to resolve. Someone has already managed this issue? I'd like to release web api with some kind of authentication (basic auth, OAuth) and I can't find any working code on Umbraco as example.
Best way to authenticate Umbraco API request as back-office user
Hi,
I have a VueJS application which pulls data from an Umbraco WebAPI endpoint. The data needs to be accessible only to users who are logged into the Umbraco back-office.
The controller inherits from
UmbracoAuthorizedApiControllerand I can successfully test the API endpoint by loading its URL in the browser — when logged in it's accessible, when not logged in it returns an authentication error, as expected. All good.However, the VueJS application always experiences a
401 Unauthorizedresponse from the API endpoint, presumably because it's running without the necessary context to authenticate.So, question is, what's the simplest way to get the application to authenticate as a back-office user? I've seen a couple of approaches (e.g. using JWT tokens and OAuth2) but I'm not sure whether they're still the best approaches; they also seem very technical/scary to someone who's not overly familiar with authentication.
Can anyone suggest any alternative or anything simpler in order to handle this?
Many thanks.
And, did you manage to resolve this? I have a similar thing here...
Hi Dan,
I don't think there is an easier way to do this because you will first need to authenticate with the Umbraco Backoffice to obtain an auth cookie (as you have already noticed). Once you have that auth cookie, it then needs to be sent with every request to the API controller in order to validate authentication/authorisation.
I had a similar requirement not too long ago whereby I wanted only backoffice users to manage Hangfire tasks, and the only way to allow access to this was to first log into the backoffice to obtain an auth cookie.
My suggestion is to use JWT as it will be the lesser headache... and remember, you want it to be fairly secure right, otherwise what's the point of securing it? :)
Regards Louis
Hi all,
I've just picked this up again and I believe there's a simple solution. In your API controller when you create your class, inherit from
UmbracoAuthorizedApiControllerrather thanUmbracoApiController. Then decorate your methods with the[UmbracoAuthorize]attribute. So, something like this:Then when you call the API end-point in your JavaScript (or whatever) add 'BackOffice' to the controller path, e.g. change from
/umbraco/api/OrderManagement/GetCustomersto/umbraco/BackOffice/api/OrderManagement/GetCustomers.This all seems to have done the trick in my VueJS app.
Hmm interesting, another VueJS app ;-) I will be looking into this the coming weeks and intended to go the JWT way and will share my findings...
Hi all, I have a similar problem to resolve. Someone has already managed this issue? I'd like to release web api with some kind of authentication (basic auth, OAuth) and I can't find any working code on Umbraco as example.
Many thanks in advance!
Antonio
is working on a reply...