如何通过 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 应用程序将再次启动。
解决方案一:
在架构方面,可以采用如下方式:
当用户点击您网站上的立即付款按钮时,获取所有与网关相关的密钥,如 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 请求将用户重定向到外部站点,使用后端 - 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 应用程序将再次启动。
解决方案一: 在架构方面,可以采用如下方式:
当用户点击您网站上的立即付款按钮时,获取所有与网关相关的密钥,如
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 框架)上下文。 它的性能更好,因为您的应用不会再次下载和引导