How to implement OAuth2 flow in Single Page Applications (Angular2 + Rails4) - oauth-2.0

I am wondering which OAuth2 flow best suit the SPA scenario. The front-end is angular and the backend is rails.
I think the authorization code grant type is the most adequate for this scenario but I am not sure how to handle the redirection when the user grants access to my application. That redirection breaks the SPA spirit to keep the user in the same page.
Thanks
EDIT (Added information):
Let me be more precise. Particularly I am trying to integrate google calendar into my app using this flow https://developers.google.com/identity/protocols/OAuth2WebServer. I am facing various problems, most of them because I have an angular SPA.
My first problem is how to handle the authorization endpoint. Up to now, I have devise and endpoint called /google_auth that will check whether the current user has authorized the app or not. If not, I will respond with a json body that has the authorization_uri. Here comes the first problem, how does the front-end show the authorization dialog. If I call window.open the browser will block it because it thinks its a popup. If I change the current window location it will leave my app and I don't want this.
The second problem appears when the user authorize my app in the authorization window presented by google. Here, google will send a request with the authorization code to the redirect uri callback previously defined. As I am using JWT token for authentication, in this request I lose which user has granted me authorization so I can't associate the refresh token to the user. How can I handle this? I am thinking I can use the state parameter to forward the JWT token, but I am no sure this is secure enough

It does indeed, but don't forget why this happens.
The whole point is that the user does not enter their password in an unknown application and most won't. When people see the login page from Facebook for example, they trust that and are cool with it. A random form asking them for their password is not cool and can lead to them being hacked which is why everyone who is concerned with security will simply leave that insecure website and move on.
My suggestion is to stick with the flow which makes sense. Once the user is authenticated and gives your app access, they will be sent back to your app and there you can get the token and use it to do further work so you are basically back in the SPA flow. It's just that your flow now has 2 steps, that's all.

Basically, you have 2 UI options: open the authorization page in the same window thus unloading your SPA, or in a pop-up, thus having risk of it being blocked. Unless the frontend app's state is too large, you may store essential app's state, go through authorization, and reload the app restoring the state. The state may be stored in browser's localStorage, in the redirect URL (if protocol allows variable part) or on the server side.

If your application is in public space, follow the authorization based flow if in enterprise then either the first option of password grant flow is also ok.

Related

Transfer the authenticated user to a SPA without forcing them to re-enter their credentials

This is my current setup:
IdentityServer4
API (Bearer authentication)
SPA page (oidc-client implicit flow redirected to IdentityServer4 Quickstart UI)
Native application (written i C#)
The native application already have the users credentials. I want to provide a web link to the SPA page from the native application, but I don't want to force the user to login again when navigating to the web. Instead I want to move their current session to the web page.
Is it possible to "inject" the access token into the oidc-client? (using a url fragment). Or is there any other flow or way to make this work?
In general the answer should be: you are on a wrong way.Look: you use resource owner password flow in your native app and that's wrong. It's not interactive, meaning not only IdP has access to the credentials. In general such flow is recommended for test purposes etc, not for general use. One huge limitation of the non-interactive flow is that it does not create a user session. If you switch your native app to an interactive flow such as Code flow with PKCE extension, it will create the session. After that your other app will get authenticated automatically whenever the session cookie for Identity server is alive.NB: If you don't like to improve your architecture, you are free to do whatever you like, including providing a token in the link. That token will still be valid for calling the API. But that will be not the implicit flow, you will not have a session, nor the possibility to use silent refresh feature.

How should the server for a single-page application handle expired oAuth tokens?

As background, I'm using the Google OAuth2 NodeJS client, but I think my question is more abstract / technology independent.
My website is single-page application that communicates via AJAX to the server.
When a user first visits my website, I perform an OAuth2 flow which redirects them to Google to log in, and then redirects back to my site with an access token. I store this access token in a cookie, and use it to handle various calls made to the server via AJAX.
My challenge is that I'm unsure what to do when that access_token expires. Should I be storing the refresh_token in a cookie as well, and using that, or are there security issues in doing so?
Should I be redirecting the browser to perform the login flow again? That seems fairly ugly for a single-page application.
You can do the OAuth2 flow via js in the background(like the login flow with the popup window), and if the access hasn't been revoked for you app id, then the user shouldn't see anything about it. Although you can set a hint on the user email to authenticate, this may not work.
The other way that you mentioned, is the refresh token, that you can use to ask for a new access token, without user interaction. Maybe that would be the better idea, but remember, that you will only get a refresh token if you set the access type to offline.

Access LinkedIn REST API without front-end (e.g. OAuth2 redirect)

Goal
Fetch a company's updates save them locally in a background task
Problem
This should be done as a backend service without any real user interaction. We could provide a user account to use, but the authentication is a problem: There is literally no one to answer the OAuth redirect and there is no public redirect URL to configure, since it's a background service.
Is there any way to access the API without having a redirect URL or a real user?
You can get an initial access token in a regular front end flow, for you as the app developer i.e yourself as the LinkedIn user. Once you've got that, you can store it in the backend and use it for 60 days to get access to the LinkedIn APIs.
After 60 days you need to refresh the token as documented in:
https://developer.linkedin.com/documents/handling-errors-invalid-tokens
Unfortunately LinkedIn does not (yet) support an autonomous refresh flow where your app can get a new access token by presenting a refresh token on a backchannel. So the developer will have to refresh the access token by a manual login every 2 months.
Well, it is still all HTTP and HTML, so in fact there is no real reason to show the OAuth dialog to a user, as long you can strip out the necessary parts in the HTML authentication dialog and send a valid response back to the server, using the username and password from the user (which you can obtain from him, or save it yourself in a config file if it is you).
Note that there might be a legal issue if LinkedIn demands you to actually show the dialog, beside that, there is no technical need.

Dealing with expired access tokens in OAuth2 implicit grant

The specification of OAuth2 states that an authorization server must not issue a refresh token when using implicit grant. In our use case we protect a RESTful API with OAuth2 and use a Single Page Javascript application as a client for this API. As it would be very difficult to redirect to the authorization server after an access token has expired, we are searching for a better way to get a new valid token. I could think about two different approaches and wonder which one could be better:
Use a hidden iframe to Rerequest a valid access token. For this it is necessary to include a parameter like “prompt=none” which tells the OAuth provider neither to challenge authentication, nor to display an authorization page. If the user is authenticated and has authorized the application the server will send back an access token in the urls # parameters. If one of the previous conditions is not fulfilled, it will redirect with an error like #error=authentication%20lost. With this behaviour we can use short lived access tokens also with an implicit flow.
We could use an additional scope (e.g. offline) which tells the server to hand out a refresh token. Even if the original spec says that implicit flow does not issue refresh tokens (which is correct if the client only uses OAuth it for a first authorization) you are free to define your own scopes for your particular application. You should consider to only allow this scope from well-known clients.
Both approaches are very similar to those of OpenID Connect. Unfortunately there are not many implementations of OpenID Connect at the moment. So first step would be to extend the OAuth2 server until OIC will be more popular.
So which approach should be preferred?
EDIT: The token endpoint needs client authentication, which is only possible for confidential clients like server-side applications. With the second approach it would only be possible to let the RESTful API in our case the resource provider to refresh the token and send it back to the client. I think this would be a security risk. So probably we have only one valid approach.
I'm trying to achieve the exact same thing at the moment.
I've actually implemented hidden iframe approach and then realized you have to be very careful with iframes. Any malicious website can contain your iframe and get access token easily if you don't specify X-Frame-Options.
Best approach for refreshing token should be password grant as specified by the spec. (I wanted my users to login with their facebook account & implicit flow was easier to develop this. I have not quite figured out how to do this with password grant.)
2nd approach also came accross my mind and seems much safer than the 1st to me, since you can usually trust the https & browser storage to keep your tokens secret.
Edit
I realized, even with X-Frame-Options most browsers can't prevent redirects, because this header is attached to the response body and redirected URL will be exposed, therefore access tokens exposed.
Update
Looks like hash fragment is protected by the browser when accessed from the parent page within different domain. So I assume #access_token is safe. My bad. Just as a reminder callback page has to store the access token in its own right, instead of (my original intention) delegating it to the parent page like window.parent.storeAccessToken(hash); which obviously is a dumb thing to do.
From the OAuth0 website:
If you need to authenticate your users without a login page (for example, when the user is already logged in via SSO scenario) or get a new access_token (thus simulate refreshing an expired token), you can use Silent Authentication.
As for the Silent Authentication:
However, redirecting users away from your application is usually considered disruptive and should be avoided, from a UX perspective. Silent authentication lets you perform an authentication flow where Auth0 will only reply with redirects, and never with a login page.
This will allow you to log back the user using an SSO token, without having to prompt him for credentials again.

OAuth for server side apps

I need to interact with an API that only supports OAuth2.
The problem is, I would like to write a purely server side application which should sit there without a GUI polling an API every day.
The API gives me the ability to get the application token programatically, but it looks like I need to implement the entire GUI flow to get the subsequent access token. This is because I need to log in via the application providers web based login screen.
It looks like I then need to get that access token, and copy this out as my server side credential where I recreate it. If that ever expires or goes bad, I'll need to go back via the GUI flow to get my server side access token.
Is my understanding correct here as this feels very clunky?
Specifically:
Can I avoid implementing the process where we link over to the application providers login form?
Is it right that after doing this, I have to unpick an access token and store this within my server side application. I don't appear to have any control over whether that will expire?
I can see that e.g. Facebook specifically support server side and client side flow. I wonder if I'm coming up against limitations in this particular implementation of OAuth 2?
I don't know how you actually want the app to behave, but one thing is certain - you do have to input the user credentials once.
Once you authenticate and authorize (there are a lot of open questions on SO, about automatic authentication), your app will get not only an access token, but also a Refresh Token. A refresh token is just what you need in your use case. You can store it your the server side - A refresh token does not have an expiration time. It lives till the user explicitly revokes permissions.
For any OAuth service provider there is a token exchange endpoint where you can exchange the refresh token for a (refresh token + access token) pair. So, at the backend (your server) you can at any time hit this endpoint - get a short-lived access token and perform the operation that you need to. This saves you all the effort of following the GUI flow every time.
See this link - https://developers.google.com/accounts/docs/OAuth2WebServer#offline
EDIT - Made some changes after reading your comment. You simply need to know how to use refresh tokens in your app.
I've found that the typical solution to the problem I asked in this question is to use XAuth.
Many providers such as Twitter and the application I am currently working against support XAuth to provide a simplified flow without the user interface based authentication.
What is the difference among BasicAuth,OAuth and XAuth?

Resources