javascript - Angular 发布到外部服务器,在 iframe 中显示结果
问题描述
因此,我将我的 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 请求,则会呈现正确的 HTML,但我在控制台中的 httpPOST 的响应只显示重定向。
所以我的问题是,如何在 iframe 中实现这一点并呈现正确的响应?
编辑:这个问题对我有所帮助
解决方案
因此,为了将来任何人的帮助,在这个答案的帮助下,这很容易
// 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">
推荐阅读
- oracle - 将 2 列添加到 oracle 中的现有表中,不为空,并将这些列设置为 PK
- git - Visual Studio App Center 为 Build 准备单独的 git
- c# - 如何从文件中获取唯一的文件标识符
- sql - 如何在 oracle 中为输入参数调用过程作为类型?
- node.js - 使用 AWS Lambda 进行长轮询
- c++ - Clang静态分析器-具有未指定可空性的参数使“更多”未指定条件?
- docker - ssh:连接到主机 e121a0ef81ef(容器 id)端口 22:docker 中的连接被拒绝
- microsoft-graph-api - Microsoft Teams:如何设置聊天消息的作者?
- javascript - 从响应数据中删除一行单词 - angularjs
- elasticsearch - Elasticsearch 没有生命连接