How does one implement OpenID based authentication in Angular.js (with Flask back-end web app)?
It looks like the Angular.js code needs to incorporate logic like the example found here.
However, the Flask side should also have an OpenID verification mechanism.
Is there a "recommended" way to write the logic for both backend and frontend?
Is there a github example or some other related resource for starters?
Unfortunately I do not have a sample application to share, but here is a high level description that I hope is useful.
Let's forget for a moment that you have an AngularJS app and review how the OpenID authentication exchange works:
So let's see what happens when you add AngularJS to the mix. Note that there are many ways to do this, what I describe below is one possibility.
If the Angular app issues a request to the server that requires authentication the server should return an error code 401. The Angular app can pop up a login form when it gets a 401, for example.
But the OpenID authentication dance cannot be done all in the context of a rich JS application because it requires browser redirects. Your server side application will have to support at least three routes:
So the user connects to your root URL and gets the AngularJS app, which starts in a non-authenticated state. At some point the Angular app will prompt the user to login, using a form that has an OpenID text field an a submit button. These form fields should be part of a regular HTML form that posts to the server, not client-side Angular elements attached to a controller. The "action" attribute of the form should point to the server's OpenID login route.
When the user clicks the login button the server awakens and receives the request to start the OpenID authentication. At this point steps 1-5 above run without change.
At the end of step 5 the server has located the user in the application's database. What the server can do now is respond with a redirect back to the root URL, to get the Angular app restarted. If the app needs to restart in a state that is not the initial state then the state to restore can be saved in client side storage (a cookie, for example) before starting the OpenID authentication process.
But this is not enough, the server also needs to pass Angular some information about the user that logged in. One way to do this is to attach the user's unique ID or token in the query string of the redirect URL, which the Angular app can access. This would be the same piece of ID that went into a cookie in step 6 above.
Now the Angular app is restarted, can restore its state if necessary, and has an ID or token that identifies the logged in user. When the app needs to make an Ajax request to the server it sends this ID or token along with the request. The server can verify it and return 401 if found it is invalid or if it had an expiration date and found to be expired.
If the identification sent with the request is verified then the request can be carried out and a response can be sent back to the Angular app.
A logout function can be implemented in the client-side simply by deleting the user ID/token, so that future requests to the server are sent without authentication again.
Very Important: all exchanges between the Angular app and the Flask server that include user information must be done over secure HTTP. If not your IDs or tokens will be traveling in plain text.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With