Javascript 无法将Duo Web SDK与angular应用程序集成_Javascript_Angular_Iframe

Javascript 无法将Duo Web SDK与angular应用程序集成

javascript angular iframe

Javascript 无法将Duo Web SDK与angular应用程序集成,javascript,angular,iframe,Javascript,Angular,Iframe,我们正在尝试将Duo双因素身份验证集成到我们的应用程序中。是他们文档的链接。我面临的问题是，当页面加载时，他们的JS文件会查找iframe。但是iframe将位于一个局部中，该局部仅在单击按钮时渲染。在所有角度渲染完成后，如何运行它们的代码。是他们的JS文件的链接。感谢你的指点假设角度为4和5 首先，下载js文件（），然后将其保存在angular项目的asset文件夹中。打开它并更改以下行： if (iframe) { import * as Duo from '../../../../as

我们正在尝试将Duo双因素身份验证集成到我们的应用程序中。是他们文档的链接。我面临的问题是，当页面加载时，他们的JS文件会查找iframe。但是iframe将位于一个局部中，该局部仅在单击按钮时渲染。在所有角度渲染完成后，如何运行它们的代码。是他们的JS文件的链接。感谢你的指点

假设角度为4和5

首先，下载js文件（），然后将其保存在angular项目的asset文件夹中。打开它并更改以下行：

if (iframe) {

import * as Duo from '../../../../assets/duo/Duo-Web-v2'

为此

if (false && iframe) {

这样，您可以确保iframe将始终加载您调用的ngAfterViewInit

在按下按钮时将调用并加载的组件中，添加以下行：

if (iframe) {

import * as Duo from '../../../../assets/duo/Duo-Web-v2'

在ngAfterViewInit（当然，在完成所有角度渲染的地方，您可以随时调用Duo.init方法）方法中添加以下内容：

ngAfterViewInit() {
  Duo.init({
    iframe: "duo_iframe",
    host: this.duo.host,
    sig_request: this.duo.sig_request,
    submit_callback: this.twoFactorVerify.bind(this),
  });
}

其中this.duo是包含主机和sig_请求信息的对象。我使用了回调选项，因为它是SPA应用程序，所以我不想重新加载页面。另外，我使用bind（这个），因为我需要组件上下文，而不是调用回调的js上下文。回调函数如下所示：

twoFactorVerify(response: any) {
  console.log(response.elements.sig_response.value);
  this.serviceApi.post('/two_factor_verify', 
     { sig_response: response.elements.sig_response.value }) bla, bla...

  ...
}

其中sig_response是DUO服务的响应

在HTML模板中，只需添加：

<iframe id="duo_iframe" align=center></iframe>

就这样

希望它能帮助你。