Несоответствие состояния OAuth поставщика грантов при одновременном доступе к двум модулям приложения в одном и том же браузере, когда пользователь еще не вошел в систему

Вы должны перенаправить пользователя обратно на исходный URL-адрес приложения, а не на URL-адрес сервера API:

.use('/connect/:provider', (req, res, next) => {
  res.locals.grant = {dynamic: {redirect_uri:
    `http://${req.headers.host}/connect/${req.params.provider}/callback`
  }}
  next()
})
.use(grant(require('./config.json')))

Затем вам нужно указать оба:

https://foo1.bar.com/connect/google/callback
https://foo2.bar.com/connect/google/callback

как разрешенные URI перенаправления вашего приложения OAuth.

Наконец, вам нужно направить некоторые маршруты домена приложения на ваш сервер API, где Грант обрабатывает URI перенаправления.

Пример

0. Настройте свое приложение со следующим URI перенаправления https://foo1.bar.com/connect/google/callback
1. Перейдите к https://foo1.bar.com/login в браузере.
2. Приложение браузера перенаправляет на ваш API https://api.bar.com/connect/google
3. Перед перенаправлением пользователя в Google приведенный выше код настраивает redirect_uri на основе входящего заголовка Host запроса к https://foo1.bar.com/connect/google/callback
4. Пользователь входит в Google и перенаправляется обратно на https://foo1.bar.com/connect/google/callback
5. Этот конкретный маршрут должен быть перенаправлен обратно в ваш API https://api.bar.com/connect/google/callback

Повторить для https://foo2.bar.com

у вас есть параметр relay_state при обращении к серверу SSO, который возвращается, когда он был отправлен на сервер SSO, просто для отслеживания состояния приложения перед запросом SSO.

Чтобы узнать больше о состоянии реле: https://developer.okta.com/docs/concepts/saml/

А какой сервис SSO вы используете??

Как я решил эту проблему, удалив реализацию Grant-Express и используя client-oauth2 пакет.

Вот моя реализация.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
const session = require('express-session');
const { JWT } = require('jose');
const crypto = require('crypto');
const ClientOauth2 = require('client-oauth2');
var logger = require('morgan');
var oauthRouter = express.Router();



const clientOauth = new ClientOauth2({
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.SECRET,
  accessTokenUri: process.env.ACCESS_TOKEN_URI,
  authorizationUri: process.env.AUTHORIZATION_URI,
  redirectUri: process.env.REDIRECT_URI,
  scopes: process.env.SCOPES
});

oauthRouter.get('/oauth', async function(req, res, next) {
  try {
    if (!req.session.user) {
      // Generate random state
      const state = crypto.randomBytes(16).toString('hex');
      
      // Store state into session
      const stateMap = req.session.stateMap || {};      
      stateMap[state] = req.query.uiState;
      req.session.stateMap = stateMap;

      const uri = clientOauth.code.getUri({ state });
      res.redirect(uri);
    } else {
      res.redirect(req.query.uiState);
    }
  } catch (error) {
    console.error(error);
    res.end(error.message);
  }
});


oauthRouter.get('/oauth/callback', async function(req, res, next) {
  try {
    // Make sure it is the callback from what we have initiated
    // Get uiState from state
    const state = req.query.state || '';
    const stateMap = req.session.stateMap || {};
    const uiState = stateMap[state];
    if (!uiState) throw new Error('State is mismatch');    
    delete stateMap[state];
    req.session.stateMap = stateMap;
    
    const { client, data } = await clientOauth.code.getToken(req.originalUrl, { state });
    const user = JWT.decode(data.id_token);
    req.session.user = user;

    res.redirect(uiState);
  } catch (error) {
    console.error(error);
    res.end(error.message);
  }
});

var app = express();


app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(session({
  secret: 'My Super Secret',
  saveUninitialized: false,
  resave: true,
  /**
  * This is the most important thing to note here.
  * My application has wild card domain.
  * For Example: My server url is https://api.app.com
  * My first Frontend module is mapped to https://module-1.app.com
  * My Second Frontend module is mapped to  https://module-2.app.com
  * So my COOKIE_DOMAIN is app.com. which would make the cookie accessible to subdomain.
  * And I can share the session.
  * Setting the cookie to httpOnly would make sure that its not accessible by frontend apps and 
  * can only be used by server.
  */
  cookie: { domain: process.env.COOKIE_DOMAIN, httpOnly: true }
}));
app.use(express.static(path.join(__dirname, 'public')));


app.use('/connect', oauthRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

В моей конечной точке /connect/oauth вместо переопределения состояния я создаю хэш-карту stateMap и добавляю ее в сеанс с uiState в качестве значения, полученного в URL-адресе, подобном этому https://api.foo.bar.com?uiState=https://module-1.app.com Когда в обратном вызове я получаю состояние обратно с моего сервера OAuth и использую stateMap Я получаю значение uiState.

Образец карты состояния

req.session.stateMap = {
  "12313213dasdasd13123123": "https://module-1.app.com",
  "qweqweqe131313123123123": "https://module-2.app.com"
}