如何在Angular的iframe中集成DocuSign实现PDF签署功能

一、后端（.NET Core）核心操作 #

• 首先通过DocuSign .NET SDK生成嵌入式签署所需的signingUrl，这是iframe要加载的核心地址：
  1. 初始化DocuSign客户端，配置集成密钥、账户ID、OAuth令牌等认证信息
  2. 创建Envelope（信封）：上传目标PDF文件，添加签署人信息，必须设置clientUserId（用于标识嵌入式签署的用户，要和你的系统用户ID对应）
  3. 调用EnvelopesApi.CreateEnvelope完成信封创建，再调用EnvelopesApi.CreateRecipientView生成嵌入式签署URL，该接口需要传入签署人信息、returnUrl（签署完成后的跳转地址）和clientUserId
  4. 编写一个后端API接口，供Angular前端调用，返回生成的signingUrl，同时要做好当前系统用户的身份校验

二、前端（Angular）iframe嵌入实现 #

• 在组件模板中添加触发按钮和iframe：

  <button (click)="startSigning()">开始签署文档</button>
  <iframe *ngIf="validSigningUrl" [src]="validSigningUrl" width="100%" height="800px" frameborder="0"></iframe>
  

• 组件逻辑处理：

  import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  @Component({
    selector: 'app-docusign-sign',
    templateUrl: './docusign-sign.component.html',
    styleUrls: ['./docusign-sign.component.css']
  })
  export class DocusignSignComponent {
    validSigningUrl?: SafeResourceUrl;
  
    constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}
  
    startSigning(): void {
      // 调用后端接口获取签署URL
      this.http.get<string>('/api/docusign/generate-sign-url').subscribe({
        next: (url) => {
          // 处理Angular安全策略，避免iframe加载被拦截
          this.validSigningUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
        },
        error: (err) => {
          console.error('获取签署地址失败:', err);
        }
      });
    }
  }
  

• 登录流程自动处理：iframe加载signingUrl后，若用户未登录DocuSign，会直接在iframe内显示DocuSign登录界面，登录完成后自动跳转至PDF签署页面，全程无需跳出iframe

三、关键配置注意事项 #

• 在DocuSign开发者后台，确保你的应用已配置可信域名（添加你的前端域名，避免跨域问题）
• 后端生成recipientView时，returnUrl要设置为前端的有效页面地址，用于签署完成后的回调处理
• 必须保证clientUserId的唯一性，且与当前系统用户绑定，防止签署人身份混乱

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