无法将 Duo Web SDK 与 Angular 应用程序集成答案

【问题标题】：Unable to integrate Duo Web SDK with angular application无法将 Duo Web SDK 与 Angular 应用程序集成
【发布时间】：2018-01-05 07:31:25
【问题描述】：

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

【问题讨论】：

标签： javascript angular iframe

【解决方案1】：

假设 Angular 4 和 5。

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

if (iframe) {

为此

if (false && iframe) {

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

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

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>

就是这样。

希望对你有所帮助。

【讨论】：