OAuth2 - 从现有网络应用程序启动 SPA，无需用户再次进行身份验证

Question

Background

We have an existing traditional webapp (Wicket/Java/Spring/Tomcat) that we are incrementally migrating to a Vue.js application/SPA. So when the user navigates to certain parts of the application we serve the SPA which the user interacts with until they navigate to a old part of the application again.

All user authentication is currently handled by the traditional webapp which results in a tomcat session (JSESSIONID cookie).

The SPA currently talks to the API on the main java monolith application. This is the same application serving the traditional webapp. So currently we handle authentication by checking for the presence of the JSESSIONID cookie/tomcat http session in the request from the SPA.

       ┌──────────────┐
       │  Browser     │
       │              │          ┌────────────┐
       │  ┌──────┐    │          │  Monolith  │
 ──────┼─►│ HTML │◄───┼─────────►│    java    ├──────────────┐
       │  └──────┘    │          └────────────┘              ▼
       │              │             ▲             ┌──────────────────────┐
       │ ┌─────────┐  │             │             │ OAuth2 Authorization │
       │ │   SPA   │◄─┼─────────────┘             │       Server         │
       │ │ (VueJs) │  │                           └──────────────────────┘
       │ └────┬────┘  │                                      ▲
       │      │       │                                      │
       └──────┼───────┘               ┌──────────────┐       │
              │                       │ Microservice │       │
              └──────────────────────►│     java     ├───────┘
                                      └──────────────┘

Requirement

We are building new microservices (with APIs) that we wish the SPA to be able to talk to. So our approach of sharing the JSESSIONID cookie is not going to work.

We'd like to use OAuth2 to protect our new microservices meaning that they will require valid access tokens for all incoming requests.

Question

All the documentation and examples we've found are concerned with implementing the standard solutions whereby you choose the OAuth2 grant flow you want to use (implicit or authroization code with PKCE) and get the SPA to prompt the user to authenticate.

This is not going to work for us while we are still in this hybrid situation and all user authentication is handled by the traditional webapp.

• What are some approaches that people use in situations like these?
• How can the SPA be given enough information when it is loaded in order to make (pre)authenticated calls to the new microservice API?

We are happy to consider moving the traditional webapps login flow to an OAuth based flow but still aren't clear how to solve the problem with the SPA.

Answer 1

If all your apps are OAuth2, it's likely that you choose an OIDC authorization-server and almost all have SSO (single sign-on) features: when users authenticate (with authorization-code + PKCE flow), they have a "session" opened on authorization-server and can have subsequent authentications happen silently (only the very first authentication for each client can require explicit consent).

In other words, with SSO, your users would authenticate once for all clients (legacy app and new Vue one).

Be sure to pick Certified OpenID Connect Implementations for each of your client frameworks.

Answer 2

In addition to previous answer, OIDC is correct choice, because you can still have user session that will be created during OIDC flow: https://openid.net/connect/

In OIDC flow id token, access token and refresh token are returned, but id token is used only once to establish user session.

Access token and refresh token can be saved on backed service(Ie some gateway) responsible for OIDC communication and user session creation. Then based on user session you can find those tokens and use in call to microservice when needed.

It is important to understand whole concept behind oauth especially in scenario with web application. I recommend to read those information to understand whole picture: https://www.ietf.org/archive/id/draft-ietf-oauth-browser-based-apps-10.html