Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Dan 1243 posts 3708 karma points admin c-trib
    Jun 07, 2018 @ 08:20
    Dan
    0

    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?

    Many thanks.

  • marcelh 171 posts 471 karma points
    Aug 07, 2018 @ 05:36
    marcelh
    0

    And, did you manage to resolve this? I have a similar thing here...

  • Louis Ferreira 53 posts 248 karma points
    Aug 07, 2018 @ 05:52
    Louis Ferreira
    0

    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

  • Dan 1243 posts 3708 karma points admin c-trib
    Aug 15, 2018 @ 15:56
    Dan
    100

    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 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.

  • marcelh 171 posts 471 karma points
    Aug 15, 2018 @ 18:25
    marcelh
    1

    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...

Please Sign in or register to post replies

Write your reply to:

Draft