Angular Публиковать на внешнем сервере, отображать результаты в iframe - PullRequest
0 голосов
/ 01 апреля 2020

Итак, я интегрирую свое приложение angular в платежный шлюз, в некоторых случаях для платежного процессора требуется дополнительная проверка безопасности. Для всех, кто интересуется, это 3D Secure реализация.

Я могу выполнить почтовый запрос без проблем, но значение, возвращаемое моим провайдером, просто ....

<html>
    <head>
        <title>Redirecting...</title>

Я надеялся, что он вернет полный html, который я мог бы просто визуализировать в модальном режиме, не повезло.

Поэтому я попытался создать iframe для публикации и обработки этого (как в старой школе) дней) но я не могу заставить это работать. Мой код пока ...

Компонент

export class CheckoutComponent implements OnInit {
    @ViewChild('form') postForm: ElementRef;
    private MD: any;
    private PaReq: any;
    private TermUrl: any;
    private demoEndpoint: any;
    @ViewChild('threedsModal', { static: true }) private threedsModal;
    constructor(
        private http: HttpClient,
        ) { }

    ngOnInit(): void {
        this.demoEndpoint = 'www.example.com/post/'
        this.MD = 'foo';
        this.PaReq = 'bar';
        this.TermUrl = 'www.myexample.com/response';


    }
    onLoad() {
        console.log('onLoad triggered.');
    }
   // Called from another part of the code when we need to perform the POST
    submitForm(){

        // values are custom encoded, not needed to show for example
        const myParams = new HttpParams({encoder: new HttpUrlEncodingCodec()})
            .set('MD', this.MD)
            .set('PaReq', this.PaReq)
            .set('TermUrl', this.TermUrl);
        this.http.post(this.demoEndpoint, myParams, {responseType: 'text'}).subscribe(x => console.log(x));

        return true;
    }

}

Тогда в моем шаблоне:

 <iframe class="custom-frame" #frame width="400" height="400" id="frame" name="frame" 
          frameborder="0" [src]="demoEndpoint | safeResourceUrl" (load)="onLoad()"></iframe>

<form target="frame" action="demoEndpoint| safeResourceUrl" #form method="POST">
    <input type="hidden" name="MD" value={{MD}} id="MD" />
    <input type="hidden" name="PaReq" value={{PaReq}} id="PaReq" />
    <input type="hidden" name="TermUrl" value={{TermUrl}} id="TermUrl" />
</form>

Но этот iframe просто выводит "Невозможно определить запрос"

Если я выполняю POST-запрос вручную в почтальоне, in отображает правильный HTML, но ответ на мой httpPOST в консоли просто показывает перенаправление.

Итак, мой вопрос, как я могу добиться этого в iframe и дать правильный ответ?

РЕДАКТИРОВАТЬ: Этот вопрос мне несколько помог

1 Ответ

1 голос
/ 02 апреля 2020

Так что для помощи кому-либо в будущем это было довольно легко с помощью этого ответа

  // create a form for the post request
  const form = window.document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', 'http://post.example.com');
  // use _self to redirect in same tab, _blank to open in new tab
  // form.setAttribute('target', '_blank');
  form.setAttribute('target', 'threedframe');

  // Add all the data to be posted as Hidden elements
  form.appendChild(this.createHiddenElement('MD', 'foo'));
  form.appendChild(this.createHiddenElement('PaReq', 'bar'));
  form.appendChild(this.createHiddenElement('TermUrl','https://dump.example.com'));
  console.log(form);
  window.document.body.appendChild(form);
  form.submit();

  // create the form
  private createHiddenElement(name: string, value: string): HTMLInputElement {
    const hiddenField = document.createElement('input');
    hiddenField.setAttribute('name', name);
    hiddenField.setAttribute('value', value);
    hiddenField.setAttribute('type', 'hidden');
    return hiddenField;
  }

Затем настройте iframe в моем шаблон:

 <iframe class="custom-frame" id="three-d-frame"  width="430" height="450" frameborder="0" name="threedframe">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...