此代码如何启用重定向流程？

Question

我有一个前端 www.myfrontend.tech 和一个后端 www.mybackend.io。我以前的开发人员设法使用 PassportJS 实现了第三方身份验证（如 Microsoft）。但是在查看他的代码时，我无法理解流程以及代码如何实现这一点。这是代码：

在www.myfrontend.tech的nginx的.conf中：

upstream mybackend {
   server www.mybackend.io:443;
}

server {
    location ~ /socialLoginSuccess {                                                                                            
        rewrite ^ '/#/socialLoginSuccess' redirect;
    }

    location ~ /auth/(.*) {                                                                                            
        proxy_pass  https://mybackend/front/auth/?$query_string;
        proxy_set_header Host www.myfrontend.tech;
    }
    ... ...
}

在 ReactJS www.myfrontend.tech 的 frontend/src/router.tsx 中：

function RouterConfig({ history }: any) {
  return (
    <ConnectedRouter history={history}>
      <Layout>
        <Switch>
          <Route path="/socialLoginSuccess">
            <SocialLoginSuccess />
          </Route>
          ... ...

在 app.js 中 www.mybackend.io 在 NodeJS+ExpressJS+PassportJS 中：

var _front = require('./routes/front');
app.use('/front', _front);

在 www.mybackend.io 的 routes/front.js 中：

router.get('/auth/microsoft', passport.authenticate('microsoft', { scope: ['User.Read'] }));
router.get('/auth/microsoft/callback', passport.authenticate('microsoft', {
  successRedirect: '/auth/signinSuccess',
  failureRedirect: '/auth/signinFailure',
  failureFlash: true
}))

router.get('/auth/signinSuccess', function (req, res, next) {
  res.redirect("/socialLoginSuccess");
})

在passport.module.js中：

var Microsoft = (function() {
  function Microsoft() {}
  Microsoft.prototype.enable = function() {
    var MicrosoftStrategy = require("passport-microsoft").Strategy;
    passport.use(
      "microsoft",
      new MicrosoftStrategy(
        {
          clientID: keys.MICROSOFT_CLIENT_ID,
          clientSecret: keys.MICROSOFT_CLIENT_SECRET,
          callbackURL: `/auth/microsoft/callback`
        },
        this.loginSuccessfully
      )
    );
  };
  return Microsoft;
})();

在测试此身份验证时，我在登录后可以在地址栏中看到 www.myfrontend.tech/auth/google 和 www.myfrontend.tech/#/socialLoginSuccess。

我的问题是，例如，successRedirect: '/auth/signinSuccess' 去哪里（后端还是前端）？ res.redirect("/socialLoginSuccess") 去哪儿了？它是如何通过代码启用的？

Answer 1

流量：

用户转到 www.myfrontend.tech/auth/microsoft（在后端转发到 https://mybackend.io/front/auth/microsoft，因为它与您的 nginx 配置中的 location ~ /auth/(.*) 匹配）
它将重定向到 Microsoft 授权页面
用户点击授权后，它将重定向到您的 Microsoft Oauth 应用程序上的回调 URL，在您的情况下是 www.frontend.tech/auth/microsoft/callback（转发到后端的 https://mybackend.io/front/auth/microsoft/callback，因为它与你的 nginx 配置上的 location ~ /auth/(.*) 匹配）
在该回调中，passport 中间件检查授权是否成功，如果成功，它将重定向到 successRedirect URI，即 www.frontend.tech/auth/signinSuccess（转发到 https://mybackend.io/front/auth/signinSuccess后端，因为它匹配 location ~ /auth/(.*) 你的 nginx 配置）
快速应用句柄 auth/signinSuccess 成功调用，并重定向到 /socialLoginSuccess，因为 /socialLoginSuccess 位置匹配 Nginx 配置上的 location ~ /socialLoginSuccess（因此不是 location ~ /auth/(.*)没有代理通行证），它将被重定向到 www.frontend.tech/#/socialLoginSuccess（由 rewrite ^ '/#/socialLoginSuccess' redirect;）
由于它被重定向到 www.frontend.tech/#/socialLoginSuccess，它现在由 React 路由器处理

并回答您的问题：

successRedirect 将转到您的前端，因此它将是 www.myfrontend.tech/auth/signinSuccess，但是由于您在 Nginx 上有代理配置，并且它匹配 location ~ /auth/(.*)，它被转发到 www.mybackend.io/front/auth/signinSuccess（阅读更多关于 reverse proxy）
res.redirect("/socialLoginSuccess") 会将您重定向到 www.frontend.tech/#/socialLoginSuccess，原因在上面的第 5 个流程中提到

此代码如何启用重定向流程？

How does this code enable the redirection flow?

proxy

nginx

express

passport.js