如何通过 POST 请求将用户重定向到外部站点

Question

如何通过 POST 请求将用户重定向到外部站点，使用后端 - asp.net 核心网络 api 或前端 - angular 哪个更好？

我正在使用支付网关。为了确认 3D 安全，我需要将用户重定向到新的-url.

文档说像这样使用一个表单，

<form
  id="pa-form"
  method="post"
  action="https://test.sagepay.com/mpitools/accesscontroler?action=pareq"
>
  <input
    type="hidden"
    name="PaReq"
    value="eJxVUstugzAQvPcrEB+AHwTiRBtHaXMIqlrRJlJ7tYzVoIIhBgL5+9oJNK1PM+PV7HrWsB7Kwjsr0+SVXvkkwP6aP8DhaJTa7pXsjOLwoppGfCkvz1Y+xSQO53GIWcgYwTHDM59DunlXJw6jD7c2AQE0UWtg5FHoloOQp8fklc8WdIExoJFCqUyy5SSibL5geDyAbjJoUSqe7g5GnFXRir4yRXasijwTgK53IKtOt+bCGY0BTQQ6U/C+7wM3fC0ugayC7huQkwHdZ0o7hxprM+QZT98SfaBVHX0878PPbBeJ4YI2eggZXgFyFZCJVnGKKSGEhh4mSzpfEgboqoMoXX8eR/Z5Nwi167C563852IyN0nIafmKghrrSylZQQL8YMtVIvnfbSMXFe0kT29ZJgO7PeNq5oGXrInUZX5Hzy20qNMQ3Q0cAuVo0rg+Ni7bo3wf4AWyps7I="
  />
  <input
    type="hidden"
    name="TermUrl"
    value="http://localhost:4200/payment"
  />
  <input type="hidden" name="MD" value="FAD0DBBA-FC72-2D9A-F09F-D4D6FFFCB2CD" />
</form>

// in index.html  
<script>document.addEventListener("DOMContentLoaded",function(){var b=document.getElementById("pa-form");b&&b.submit()})</script>

但我在 angular 中尝试过这种形式。我收到了 Cannot POST / 回复。

所以我搜索了一下，有人说 angular is not able to handle third-party responses. 那么我该怎么做呢？如何使用 asp .net core 或 angular.

完成上述表格

我不清楚我该怎么办？

请指导我。如何使用 asp .net core 和 angular

Answer 1

简要概述：对于单页应用程序(Angular)，您应该不处理第三方如果您要重定向用户，则在客户端响应。因为每次应用程序重定向到第三方时，所有上下文都会丢失，并且在返回时，Angular 应用程序将再次启动。

解决方案一： 在架构方面，可以采用如下方式：

当用户点击您网站上的立即付款按钮时，获取所有与网关相关的密钥，如 PaReq、TermUrl 等（HttpClient 请求可以调用您的后端 API 以获取网关配置）。示例：
```
   {
      keys: [
        {
          name: "PaReq",
          value: "eJxVUstugzAQvPcrEB+AHwTiRBtHaXMIqlrRJ",
        },
        //... Rest of the keys
      ],
    };
```

获取网关配置后创建动态表单

let f = document.createElement("form");
f.setAttribute("method", "post");
f.setAttribute(
  "action",
  "https://test.sagepay.com/mpitools/accesscontroler?action=pareq"
); //Your action URL

//create hidden input elements
config.keys.forEach((item) => {
  let i = document.createElement("input");
  i.type = "hidden";
  i.name = item.name;
  i.value = item.value;
  f.appendChild(i); //Add it to the form
});

document.body.appendChild(f);//Add the form to the body
f.submit(); //Submit it immediately

现在用户将被重定向到支付网关。支付网关要求 callback URL 用于将支付结果传递给您的后端。创建一个 API（比方说 api/callback）来处理来自网关的支付响应。
最后，在 api/callback 中，您可以将响应存储在数据库中，并根据付款方式 success/failure，将用户重定向回您的 Angular 应用程序，并提供付款 ID作为参数。 https://youapp.com/payment/123456/success

在这里，我们在 Angular 应用程序中定义了一个名为 payment 的路由，它接受 2 个路由参数

    path: 'payment/:paymentId/:result'

方案二： 一些支付网关提供了一个 Javascript 插件（脚本）供您使用。它们允许在不重定向的情况下进行支付交易。他们在 Angular 的上下文中以模式打开支付页面。

当用户点击结帐按钮时，您会从后端 API 获取与付款相关的密钥。
不用提交表单，而是将密钥传递给网关提供的JS插件
交易模式在同一 window 中打开。插件通常会接收一个回调函数，在交易成功/失败时调用。

使用此解决方案，您永远不会失去 Angular（或其他 SPA 框架）上下文。 它的性能更好，因为您的应用不会再次下载和引导

如何通过 POST 请求将用户重定向到外部站点

How to redirect a user to an external site though a POST request

redirect

payment-gateway

opayo

asp.net-web-api

angular