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

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.

Answer 2

OAuth 2.0 is inherently insecure, and solely relies upon SSL. It has no encryption, and most of the latest web api gurus are suggesting that it's dead. This again is relative to what you need the security for. If it's for a social SPA where the data isn't financial or medical, for example, and good enough SSL security is ok, then perhaps OpenID or OAuth2 is suitable.

A much better solution is to implement Identity 2.0 for the Web API authentication flow, and then utilize something like Hawk Protocol for HTTP MAC implementation. Check this out : https://github.com/webapibook/hawknet for an example.

For OAuth2 framework and a extensible solution, check out Thinktecture.IdentityServer3 on GitHub

For a lightweight .net 4.5 Web API Tokenization solution, check out Thinktecture.IdentityServer2 on GitHub.

Hope it helps.

Answer 3

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.