Angular与.NET Core中点击DocuSign Finish按钮后关闭模态框iframe

方法一：监听iframe的URL变化 #

通过监听iframe的加载事件，检测到签署完成的跳转URL时直接关闭模态框。

实现步骤： #

• 在模态框组件模板中给iframe绑定load事件：

<iframe 
  [src]="signingUrl" 
  (load)="onIframeLoad($event)"
  width="100%" 
  height="800px"
></iframe>

• 在组件类中实现URL判断与模态框关闭逻辑：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sign-modal',
  templateUrl: './sign-modal.component.html'
})
export class SignModalComponent {
  signingUrl: SafeResourceUrl;

  constructor(
    public dialogRef: MatDialogRef<SignModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { signingUrl: string },
    private sanitizer: DomSanitizer
  ) {
    // 处理URL避免Angular安全拦截
    this.signingUrl = this.sanitizer.bypassSecurityTrustResourceUrl(data.signingUrl);
  }

  onIframeLoad(event: Event) {
    const iframe = event.target as HTMLIFrameElement;
    // 替换为你的DocuSign签署完成跳转URL（支持部分匹配）
    const completionUrl = 'https://your-domain.com/sign-complete';
    
    if (iframe.contentWindow?.location.href.includes(completionUrl)) {
      this.dialogRef.close();
    }
  }
}

方法二：用自定义返回页触发父窗口关闭 #

修改DocuSign的返回URL为一个静态页面，通过postMessage通知Angular关闭模态框。

实现步骤： #

1. 在Angular项目assets目录下创建静态页面sign-complete.html：

<!DOCTYPE html>
<html>
<body>
  <script>
    // 向父窗口发送关闭指令，替换为你的Angular域名
    window.parent.postMessage('close-sign-modal', 'https://your-angular-domain.com');
  </script>
</body>
</html>

2. 在.NET Core API生成签署URL时，设置返回地址为该静态页面：

// DocuSign信封配置示例
var envelopeDefinition = new EnvelopeDefinition
{
    Status = "sent",
    Recipients = new Recipients
    {
        Signers = new List<Signer>
        {
            new Signer
            {
                RecipientId = "1",
                ClientUserId = "user123", // 启用嵌入式签署
                Email = "signer@example.com",
                Name = "Test Signer",
                // 设置返回URL为静态页面地址
                ReturnUrl = "https://your-angular-domain.com/assets/sign-complete.html"
            }
        }
    },
    // 其他信封配置...
};

3. 在Angular模态框组件中监听postMessage事件：

import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sign-modal',
  templateUrl: './sign-modal.component.html'
})
export class SignModalComponent implements OnInit, OnDestroy {
  signingUrl: SafeResourceUrl;

  constructor(
    public dialogRef: MatDialogRef<SignModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { signingUrl: string },
    private sanitizer: DomSanitizer
  ) {
    this.signingUrl = this.sanitizer.bypassSecurityTrustResourceUrl(data.signingUrl);
  }

  ngOnInit() {
    window.addEventListener('message', this.handleMessage.bind(this));
  }

  ngOnDestroy() {
    window.removeEventListener('message', this.handleMessage.bind(this));
  }

  handleMessage(event: MessageEvent) {
    // 验证消息来源，防止跨域风险
    if (event.origin !== 'https://your-angular-domain.com') return;
    
    if (event.data === 'close-sign-modal') {
      this.dialogRef.close();
    }
  }
}

关键注意事项 #

• 必须用DomSanitizer处理签署URL，避免Angular的安全策略拦截iframe加载。
• 方法二中的postMessage要严格验证消息来源，防止恶意跨域调用。

内容的提问来源于stack exchange，提问作者Sami In