typescript - Angular HttpClient post simulează trimiterea formularului cu redirecționarea ulterioră

Trebuie să efectuez un POST de tip formular către un furnizor de plăți terță parte folosind Angular TypeScript și, de asemenea, să fac redirecționarea ulterior. Dacă fac un submit standard de formular printr-o pagină HTML obișnuită, submit-ul formularului face automat redirect către pagina de plată găzduită de furnizorul de plăți terță parte, dar nu se întâmplă asta atunci când fac un HttpClient.post în Angular.

M-am uitat la observabile și injectoare pentru a vedea dacă asta ar ajuta, dar nimic din ce am căutat și am găsit nu părea să rezolve această problemă specifică. Deși am citit atât de multe probleme și soluții diferite între diferite versiuni Angular, este posibil să fi pierdut vreun răspuns evident pe parcurs.

Motivul pentru care nu fac un formular ascuns cu câmpuri ascunse este că trebuie să pot face același lucru printr-o aplicație mobilă (Ionic) mai târziu, și va trebui să folosesc HttpClient-ul lor încorporat împreună cu HttpClient-ul normal pentru paginile web standard.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector    :  'app-paymenttest-page',
  templateUrl :  'paymenttest.page.html',
  styleUrls   : ['paymenttest.page.scss']
})
export class PaymentTestPage implements OnInit {

  constructor(private  http : HttpClient) {
  }

  private void makePayment(url: str, formData: FormData): void {
    let headers = new HttpHeaders({'Accept' : 'text/html' });

    this.http.post(url, formData, {
      headers         : headers,
      responseType    : 'text',
      })
       .subscribe(
         (res) =>  {
           console.log('post res');
           console.log(res);

           window.location.href = res.url;
    // How do I simulate a form submit redirect with res.body here?
         },
         (err) => {
          console.log('post err');
          console.log(err); 
      });
  }
}

Mă aștept să pot face o redirecționare către o pagină găzduită de o terță parte, dar tot ce primesc înapoi este răspunsul text html de la terța parte. Pe care îl primesc de asemenea atunci când trimit un formular html simplu, dar cumva formularul html simplu gestionează și redirecționarea.

-- Edit Răspunsul pe care îl primesc este efectiv payload-ul HTML de la URL-ul către care fac postarea și se așteaptă să fie servit de la acel URL. Deci întrebarea este cum navighează un formular HTML standard către URL-ul POST și cum servește conținutul returnat de acolo?

Răspuns #1

Redirecționează către URL extern

Importați Angular DOCUMENT.

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

...
constructor(@Inject(DOCUMENT) private document: any) { }

...
this.http.post(url, formData, { headers: headers, responseType: 'text'}).subscribe(
  (res) =>  {
    console.log('post res');
    console.log(res);

    this.document.location.href  = res.url;
  },
  (err) => {
    console.log('post err');
    console.log(err); 
   });
  }
}

Încarcă HTML dinamic în Șablon

Pe baza comentariului tău, vrei să injectezi HTML în șablonul tău, mai degrabă decât să redirecționezi către un site web extern. Pentru a injecta HTML, salvează-l într-o variabilă și folosește DomSanitizer pentru a fie a-l sanitiza, fie a ocoli verificarea de securitate:

data: SafeHtml;

constructor(private sanitizer: DomSanitizer) {}      

ngOnInit(){ 
    this.http.post(url, formData, { headers: headers, responseType: 'text'}).subscribe(
    (res) =>  {
      console.log('post res');
      console.log(res);
      
      this.data = this.sanitizer.sanitize(res.html);
            /* OR */
      this.data = this.sanitizer.bypassSecurityTrustHtml(res.html);
  },
  (err) => {
    console.log('post err');
    console.log(err); 
   });
  }
}

Apoi, în șablonul tău:

<div>
  <div [innerHtml]="data"></div>
</div>

Răspunsul #2

Așa am reușit să-l fac să funcționeze în cele din urmă. Practic, am generat o pagină HTML cu un formular ascuns și am rescris documentul. Funcționează perfect atât pentru paginile standard Angular, cât și pentru Ionic. Mai jos este metoda pe care am scris-o în TypeScript pentru a o face să funcționeze.

private _providerPayment(vpp: bVoucherPaymentPayload): void {
    let pageContent = '<html><head></head><body><form id="payForm" action="' + vpp.endpoint + '" method="POST">';

    for (let item of vpp.formFields) {
      let ff : bLookupItem = (<bLookupItem> item);
      pageContent += '\n  <input type="hidden" name="' + ff.key + '" value="' + ff.value + '">';
    }

    pageContent += '\n</form><script type="text/javascript">document.getElementById("payForm").submit();</script></body></html>';

    // console.log('DYNAMIC FORM!!');
    // console.log(pageContent);



    if (this._runningOnNativeDevice()) {
      const pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);      

      this._inAppBrowser.create(pageContentUrl, "_self", {
       'location'          : 'no',
       'presentationstyle' : 'fullscreen',
      });
    } else {
      document.open();
      document.write(pageContent);
      document.close();
    }
  }