OAuth 2 authentication for both iframe and api

Question

I'm integrating several web sites/services into my application. I use iframes (or webview for Vue Electron) for UI integration and I also use API to implement cross-communication between those services.

At the moment I have to go through OAuth 2 authentication twice for each service: once as part of natural authentication in iframe and another when I ask the user to give me access to this service (for api reasons).

Is there any way to streamline this process?

Answer 1

The state of the art response would be to modify your application completely.

• You should have 1 SPA application and not iframe
• This application would authenticate to get OAuth2 token
• This application would then call the backend (access multiple backend, or access on api management layer that call backends).

Thing is, with this you can have 2 strategies :

• give all permission (scope) at 1st authentication
• give the smalled scope possible at 1st authentication, then when needed "reauthenticate" (in fact validate new scope) to get new access token

When an API want to call another API, you have also 3 strategies:

• you simply use the same client token the API receive to the service your API call (no human interaction needed)
• your API generate a token from a service account (using ROPC authentication scheme) or via a client credential scheme (the access token will be valid but usually not be bind to a real user), (no human interaction needed). (the API will be the client of the 2nd API)
• your identity provider have an endpoint to transform access token : Your API can give the client access token, and authorization server will transform this with the client_id of your API. You send this token to 2ndAPI ( token will show subject of your UI application, but client ID will be the 1st API clientId) (no human interaction needed)

Now if you use IFrame with multiple sub-application on the same domain (the domain need to be exactly the same!), it is possible to share the same access token for instance via local storage. (security is not top notch) You will probably need to authenticate with a bigger scope list sometime but it is your only option. You will simulate a single page application, but issue is that you will have potentially different client_id depending first application you authenticate to.

Edit: Multiple authorization server

From your comment, you have multiple authorization server. One strategy could be to ask user to authenticate, your application can then get an access_token and a refresh_token. Depending on your authorization server, refresh_token can be used a lot / on a long period of time, so that if you store it somewhere, the next time the user visit your application, your application can silently get an access_token from this refresh token. Your application have then access to remove api without newer interaction from your user. Of course, this means you have to save this token the most safely you can.