Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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?
And, did you manage to resolve this? I have a similar thing here...
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:
public class OrderManagementController : UmbracoAuthorizedApiController
public List<CustomerViewModel> GetCustomers()
// Method logic
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...
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted