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

Question

如何通过 POST 请求将用户重定向到外部站点，使用 backend-asp.net core web api 或 frontend-angular 哪个更好？

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

文档说像这样使用表单，

<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>

但我尝试了这种形式的角度。我收到了Cannot POST / 的回复。

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

我不清楚我该怎么办？

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

Answer 1

简要概述：对于单页应用程序 (Angular)，如果您要重定向用户。因为每次应用程序重定向到第三方时，所有上下文都会丢失，并且在返回时，Angular 应用程序将再次被引导。

解决方案： 在架构方面，您可以使用以下方法：

1. 当用户点击您网站上的立即付款按钮时，获取所有与网关相关的密钥，例如PaReq、TermUrl 等（HttpClient 请求可以调用您的后端 API 来获取网关配置）。示例：

      {
         keys: [
           {
             name: "PaReq",
             value: "eJxVUstugzAQvPcrEB+AHwTiRBtHaXMIqlrRJ",
           },
           //... Rest of the keys
         ],
       };
   

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

   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
   

3. 现在用户将被重定向到支付网关。支付网关要求callback URL 用于将支付结果传递到您的后端。创建一个 API（比如api/callback）来处理来自网关的支付响应。

4. 最后，在api/callback 中，您可以将响应存储在数据库中，并根据付款成功/失败，将用户重定向回您的Angular 应用程序，并将付款ID 作为参数。 https://youapp.com/payment/123456/success

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

    path: 'payment/:paymentId/:result'