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

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

如何通过 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

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

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

  1. 当用户点击您网站上的立即付款按钮时,获取所有与网关相关的密钥,如 PaReqTermUrl 等(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 中,您可以将响应存储在数据库中,并根据付款方式 success/failure,将用户重定向回您的 Angular 应用程序,并提供付款 ID作为参数。 https://youapp.com/payment/123456/success

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

    path: 'payment/:paymentId/:result'

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

  1. 当用户点击结帐按钮时,您会从后端 API 获取与付款相关的密钥。

  2. 不用提交表单,而是将密钥传递给网关提供的JS插件

  3. 交易模式在同一 window 中打开。插件通常会接收一个回调函数,在交易成功/失败时调用。

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