¿Cómo redirigir a un usuario a un sitio externo a través de una solicitud POST, que es mejor usar backend-asp.net core web api o frontend-angular?
Estoy trabajando con una pasarela de pago. Para confirmar 3D seguro, necesito redirigir al usuario a una nueva URL.
Los documentos dicen que use así un formulario,
<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> Pero probé esta forma en angular. Recibí Cannot POST / respuesta.
Así que busqué sobre esto, alguien dijo que angular is not able to handle third-party responses. Entonces, ¿cómo puedo hacer esto? Cómo hacer el formulario anterior con asp .net core o angular.
No tengo claro ¿Qué debo hacer?
Por favor guíame. ¿Cómo puedo usar asp .net core y angular?
Breve descripción general: con una aplicación de una sola página ( Angular ), no debe manejar la respuesta de terceros en el lado del cliente si está redirigiendo al usuario. Porque cada vez que la aplicación se redirige a un tercero, todo el contexto se pierde y, al volver, la aplicación Angular se reiniciará nuevamente.
Solución 1: en términos de arquitectura, puede utilizar el siguiente enfoque:
Obtenga todas las claves relacionadas con la puerta de enlace, como PaReq , TermUrl , etc., cuando un usuario haga clic en el botón Pagar ahora en su sitio web (la solicitud de HttpClient puede llamar a su API de back-end para obtener las configuraciones de las puertas de enlace). Ejemplo:
{ keys: [ { name: "PaReq", value: "eJxVUstugzAQvPcrEB+AHwTiRBtHaXMIqlrRJ", }, //... Rest of the keys ], };Cree un formulario dinámico después de obtener la configuración de la puerta de enlace
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 Ahora el usuario será redirigido a la pasarela de pago. Las pasarelas de pago solicitan una callback URL de llamada que utilizan para pasar el resultado del pago a su backend. Cree una API (digamos api/callback ) que manejaría la respuesta de pago desde la puerta de enlace.
Finalmente, en api/callback , puede almacenar la respuesta en la base de datos y, en función del éxito/fallo del pago, redirigir al usuario a su aplicación Angular con la identificación de pago como parámetro. https://youapp.com/payment/123456/success
Aquí, tenemos una ruta definida en la aplicación Angular llamada payment que toma 2 parámetros de ruta
path: 'payment/:paymentId/:result'Solución 2: algunas pasarelas de pago proporcionan un complemento (script) de Javascript que puede usar. Permiten que la transacción de pago se realice sin redirección. Abren la página de pago en un modal dentro del contexto de Angular.
Obtiene las claves relacionadas con el pago de su API de back-end cuando el usuario hace clic en el botón de pago.
En lugar de enviar un formulario, pasa las claves al complemento JS proporcionado por la puerta de enlace.
El modal de transacción se abre en la misma ventana. El complemento generalmente acepta una función de devolución de llamada que se invocará cuando la transacción sea exitosa o falle.
Con esta solución, nunca perderá el contexto de Angular (u otro marco SPA). Tiene un mejor rendimiento porque su aplicación no se descarga ni se reinicia nuevamente.