Best practice to implement Web API authentication in a SPA web shop

Question

At the moment we are building a web shop as a SPA application. All the SKU information is provided by a Web Api 2 service.

Of course the web shop is publicly available to every visitor, and currently there is only one user who can log in to manage the web shop: the administrator.

For the administrator we built in the basic authentication with the bearer token, as a lot of samples on the internet shows us, but now we need every user to log in before they can see any product. Not really what we have in mind for a web shop ;-)

What we would like to implement is that our Web Api is not available to the world but only for our SPA application. Every blog post or tutorial on authorization seems to assume that there is always a user that needs to log in, in our case there is only one user: the administrator.

The AllowAnonymous attribute makes specific API calls available to the world again, so that's also a dead end.

Basically it comes down to preventing any other apps (web or mobile) to fetch the data from our Web Api.

What would be the best and most secure approach to secure our Web Api without having the anonymous visitors of our web shop to log in?

Solution for now: Altough I'm not 100% happy with this solution, it will work for now. We implemented the OAuth Implicit flow with CORS enabled for specific domain.

Answer 1

You should take a look at the OAuth 2.0 client credentials flow. The client in OAuth speak is the application and not the user using the application. This way you can make sure only your SPA app can access the backend API.

The parts that only should allow access to the administrator, you can decorate with the [Authorize(roles = administrator)] attribute, which prevents any other roles from having access.

Answer 2

I think Json Web Token could help you with this. This article has more information about using Json Web Token for granular authorization of your web api.