Authenticate client-side app to REST API using CORS with local strategy

Question!

The Problem:

Serving a secure API to a client side app using only a local authentication strategy.
The red arrows are part of the knowledge gap.

enter image description here

Context:

That is --- client.example.com is making a POST to api.example.com/login where on success client.example.com can gain access to a GET service like api.example.com/secret.

An idea!

Implimentation of OAuth 2.0 with hybrid grant type sitting in front of API.

Why hybrid?

  • It wouldn't be an Implicit Grant Flow aka Client-Side Web Applications Flow because there is no redirection to API server too grant access token. (i.e.) "Is it ok for so-and-so to access your data?"

  • It wouldn't be a Resource Owner Password Flow because a Client ID and Client Secret are passed along with the request so it's assumed the client app is server-side.

OK... so what about a little bit of both?

What if we used a CRSF token on page load of client-side app, and POST it with user credentials too OAuth 2.0 authentication endpoint to exchange for access token? You would authenticate each subsequent request with the access token and CRSF token after a successful login.

A good Node.js OAuth 2.0 library I found:

https://github.com/ammmir/node-oauth2-provider

Help Me!

I can not find a working example of an authentication measure that solves this problem! Point me in the right direction?

Ultimately, the goal here is too authenticate a client side app to a REST api using CORS with a local strategy --- i.e. username & password --- even if the convention above isn't possible.

To Accommodate Bounty:

This is a client side app, so let's stay trendy.

I'm looking for a working example using the Node.js OAuth 2.0 seed above for the API/Auth server and a front end framework like Angular.js or Backbone.js to make requests.

The example should match the context described above.

By : Dan Kanze


Answers

I can't promise that I have time to write working example but I can show you 2 paths :)

The biggest deal is CORS. After you solve that problem it is easy to use $http service. So, first and probably easiest may be to configure reverse proxy in x.com webserver which points to api.x.com. I wrote article here

Second approach is better, and created for exactly this purpose, to authorise specific domain to use your resource. It involves a bit of coding in api.x.com so you don't have to change anything in new web applications served in other domains. You simply need to authorise CORS requests in api.x.com service.

  • Create table in database where you can manage list of authorised domains
  • Add in that table record "x.com"
  • in api.x.com add request filter/interceptor what ever tech term you use for method which should be invoked after request is handled and add in response Access-Control-Allow-Origin: x.com if request comes from x.com (in other words check in request header refer value match to any value in table above and put that value in Access-Control-Allow-Origin response header).

That is all :) After this if you know how to use $http or jQuey.ajax you will be able to POST/PUT/DELETE/... any request to api.x.com from any authorised domain in just few minutes.



I very similar idea using vinilla js web app and cross domain authentication to GAE backend or OpenID connect.

The web app is run on CDN. When click login link, it goes to respective login server and redirect back to the web app (with XSRF security token and HTTPS only cookie). Login server accept cross domain request with credentials. XSRF token has to be set (in header) with every request. cookie is set by the browser. Since it is HTTP only cookie, JS cannot read it. The technique is very secure.

Once login, you can get secure assess from login server.

For detail description, you can find here and open source repo here.

By : Kyaw Tun


This video can help you solving your question :)
By: admin