使用带有 Passport 的 Express 后端将 React 页面重定向到 SAML 登录

Question

我目前在 Express 中有一个功能性应用程序，但我正在转向 React，因此 express 现在应该充当 API。目前我正在移动登录页面，但我遇到了一个我不知道如何解决的问题。对于登录我有以下几点考虑：

使用 Passport 验证用户
使用 SAML (SSO) 对其进行身份验证
为了能够通过 SSO 进行身份验证，用户被重定向到 SSO 页面，然后被重定向回 Express 应用程序。

此登录名适用于 express，因为我可以通过不同的页面进行重定向。但是我无法通过 React 执行此操作，因为我找不到重定向到 SSO 登录页面的方法（重定向由 SSO 站点自动完成）。

这是我当前的 saml 登录名

router.post('/login',
    passport.authenticate('saml', {
      successRedirect: '/', // SUCCESS: Go to home page
      failureRedirect: 'login', // FAIL: Go to /user/login
    })
);

这是用户登录的表单

export class Login extends React.Component{
constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(){
    fetch("http://localhost:3000/auth/login",
          {method : 'POST'})
          .then(response => alert(response));
}


render(){
    return (
        <div className="flex h-screen">
            <div className="container m-auto max-w-md w-full space-y-8">
                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
                   Sign in to your account
                 </h2>
                <form className="space-y-6 p-8" onSubmit={this.handleSubmit} id="loginForm">
                    <div>
                       <button type="submit">
                         <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                         Sign in
                       </button>
                     </div>
                </form>
            </div>
        </div>
    );
}

如您所见，当用户按下按钮时，将调用提交处理程序，我可以在其中执行 post 请求，但我不知道如何继续进行身份验证。

我尝试在表格中添加 action="http://localhost:3000/auth/login" method="post"。这有效，它成功重定向到 SSO 登录页面，但这里有 2 个问题。

重定向返回不起作用，因为它是一个 post 请求（它包含用户信息）
应该对 express 服务器进行重定向，因为它是保存 cookie、护照、身份验证数据的服务器，它必须完成重定向。
我不确定这是否适用于本地主机外部的真实域。

有什么想法吗？

谢谢！

Answer 1

最后，为了进行身份验证，我创建了一个 public 子域 auth.domain.com 并向身份验证页面启动了一个 window 弹出窗口，一旦页面关闭，身份验证就应该完成了。

const authLoginURL = 'http://auth.domain.com/login';
const loginWindow = window.open(
                    authLoginURL,
                    "_blank"
            );
const timer = setInterval(() => {
            if(loginWindow.closed) {
                clearInterval(timer);
                this.props.callback();
            }
        }, 1000);

使用带有 Passport 的 Express 后端将 React 页面重定向到 SAML 登录

Redirect React page to SAML login using Express backend with Passport

node.js

reactjs

express

passport.js

saml