在新窗口中打开HTML纯文本或者

问题描述 投票:0回答:1

通过get命中API端点后,我得到一个完整的HTML页面代码。这是出于身份验证的目的,我从端点获取的HTML是用户需要填写以进行身份​​验证的社交网络登录表单。

this.http
    .get('api/endpoint/html', { responseType: 'text' })
    .pipe(map((html: string) => {
      const popup = window.open('', 'Page', `toolbar=no,location=no ...`);

      popup.document.open();
      popup.document.write(html);
    }));

页面似乎工作,它显示页面,表单应该发布一个帖子并返回先前配置的“登录后URL”与一些参数,但当我填写我的凭据时,会抛出一个错误。

Cannot POST /my/redirect/after/login/url

我猜测是因为我首先通过执行document.write(html)来加载弹出窗口。

有没有办法在弹出窗口中加载我从API调用中获得的HTML并获得登录表单?

提前致谢。


#UPDATE

感谢this post,我想我知道发生了什么。现在,接受的答案表明必须完成webpack配置,如何为Angular7应用程序进行此类配置?

因为在创建项目时我只有一个angular.json文件来保存所有webpack配置文件,并且它不允许我编写这样的配置。

angular oauth angular7
1个回答
0
投票

请参考以下答案:How to transfer HTML-String from component.ts to component.html

以下是供您参考的代码段:

使用以下代码创建管道:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';


@Pipe({ name: 'keepHtml', pure: false })
export class SafePipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {
}

public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
    case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
    case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
    case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
    case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
    case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
    default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
}
}
}

并在html文件中使用以下代码行:

<div [innerHtml]="htmlBody | keepHtml: 'html'"></div>
© www.soinside.com 2019 - 2024. All rights reserved.