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

Question

我们正在尝试将Duo两因素验证集成到我们的角度应用程序中。 这是他们文档的链接。 我面临的问题是，页面加载时，他们的JS文件会查找iframe。 但是iframe将位于部分内部，该部分仅在单击按钮时才会呈现。 完成所有角度渲染后，如何运行他们的代码。 这是他们的JS文件的链接。 感谢任何指针。

Answer 1

假设角度4和5。

首先，下载js文件（ https://api.duosecurity.com/frame/hosted/Duo-Web-v2.js ），然后将其保存在angular项目的素材文件夹中。 打开它并更改以下行：

if (iframe) {

为了这

if (false && iframe) {

这样，您可以确保通过调用ngAfterViewInit始终加载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_request信息的对象。 我使用了回调选项，因为它是SPA应用程序，所以我不想重新加载页面。 另外，我使用bind（this），因为我需要组件上下文，而不是调用回调的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> 

而已。

希望对您有帮助。