如何从iframe登录到角度应用程序获取响应

时间:2019-07-15 22:15:43

标签: angular

我正在我的angular 8应用程序中设置一个第三方登录页面。

我正在将第三方身份管理集成到angular 8应用程序中。 我正在使用iframe加载第三方登录页面并能够使用凭据登录,但是登录后我如何从iframe获得响应。因为登录后我需要显示父页面。谢谢。

我在google中尝试过,但没有找到任何解决方案...这是正确的方法还是其他方法?我正在为此使用角度8。

1 个答案:

答案 0 :(得分:0)

尝试:-

window.parent.someMethodDefinedInOpenWindow(data);
//someMethodDefinedInOpenWindow is defined in electron app/ other iframe loaded //app

.html

 <iframe id="" class="" height="100%" width="100%" style="border: 0;" [src]="urlSafe"></iframe>

DomSanitizerPipe.pipe.ts

@Pipe({
    name: 'domSanitizer'
})
export class DomSanitizerPipe implements PipeTransform {

    constructor(protected sanitizer: DomSanitizer) { }
    transform(htmlString: string, args?: any): any {
        return this.sanitizer.bypassSecurityTrustHtml(htmlString);
    }

}

.ts

   constructor(
        public sanitizer:DomSanitizer
    ) { 
        this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl('https://.....');
    }

2)从父组件进入此加载页面的“ DOM”。

.ts

window.parent.someMethodDefinedInOpenWindow(data);

//someMethodDefinedInOpenWindow is defined in electron app/ other iframe loaded //app

iframe应用

someMethodDefinedInOpenWindow (){
 // I am inside iframe app
}

3)从iframe应用中的component.ts中定义调用方法

index.html

     <app-root></app-root>
        <script type="text/javascript">
//updateFromDevice is called from iframe
            function updateFromDevice(data) {
                window['componentRef'].zone.run(() => {
                    window['componentRef'].component.updateFromIframe(data);
                });
            }
        </script>

app.component.ts

 constructor(
        private zone: NgZone,
    ) {
        window['componentRef'] = {
            zone: this.zone,
            componentFn: (value) => this.updateFromIframe(value),
            component: this
        };
    }

  updateFromIframe(data) {}