如何在Angular项目中集成使用HelloSign实现电子签名？

HelloSign（现官方品牌名已更新为Dropbox Sign，旧版接口与SDK全兼容）完全支持Angular + Node.js技术栈的项目接入，本身无前端框架限制。生产环境推荐架构为Angular端负责签名交互入口与状态反馈，Node.js端负责密钥鉴权、签名请求生成、回调事件处理，严禁将API密钥直接存放在Angular前端代码中，避免密钥泄露造成资损。

前置准备 #

• 在HelloSign控制台创建API应用，拿到API Key、前端ClientId，提前配置好允许的前端域名、公网可访问的HTTPS回调地址，本地调试可通过内网穿透工具映射本地服务接收回调
• 所有携带API Key的请求全部走Node.js后端转发，Angular端仅持有公开的ClientId即可

Node.js 后端实现 #

1. 安装官方Node.js SDK：

   npm install hellosign-sdk
   

2. 初始化SDK实例，密钥存放在服务端环境变量中，不要硬编码在代码里：

   const hellosign = require('hellosign-sdk')({
     key: process.env.HELLOSIGN_API_KEY
   });
   

3. 开发嵌入式签名请求接口，嵌入式签名模式适配单页应用体验，用户全程留在你的产品内完成签署，不需要跳转外部站点：

   // Express 框架示例接口
   const express = require('express');
   const app = express();
   app.use(express.json());
   
   app.post('/api/create-signature', async (req, res) => {
     try {
       // 创建嵌入式签名请求
       const signReq = await hellosign.signatureRequest.createEmbedded({
         clientId: process.env.HELLOSIGN_CLIENT_ID,
         title: req.body.docTitle,
         signers: [
           {
             email_address: req.body.signerEmail,
             name: req.body.signerName,
             order: 0
           }
         ],
         file_url: [req.body.docPublicUrl] // 待签文档的公网可访问地址
       });
       // 换取前端可用的签名访问token
       const signUrlInfo = await hellosign.embedded.getSignUrl(
         signReq.signature_request.signatures[0].sign_url
       );
       res.json({ signToken: signUrlInfo.embedded.sign_url });
     } catch (err) {
       res.status(500).json({ msg: '签名请求创建失败', err: err.message });
     }
   });
   

4. 开发回调接收接口，用于接收HelloSign推送的签署状态（已查看、已签署、拒签、签署过期等），接口需要做请求签名校验，防止恶意伪造请求篡改业务状态，收到合法状态请求后更新自有数据库的文档签署记录即可。

Angular 前端实现 #

1. 不需要安装第三方维护的Angular专属HelloSign封装包，这类包大多长期未更新存在版本兼容问题，直接动态加载官方嵌入式JS SDK即可。
2. 开发签名功能组件，示例代码如下：

   // sign-document.component.ts
   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   declare global {
     interface Window {
       HelloSign: any;
     }
   }
   
   @Component({
     selector: 'app-sign-document',
     template: `<div id="sign-mount-node"></div>`
   })
   export class SignDocumentComponent implements OnInit {
     constructor(private http: HttpClient) {}
   
     ngOnInit(): void {
       this.loadSignSdk().then(() => this.initSignProcess());
     }
   
     // 动态加载签名SDK，避免首屏加载冗余资源
     private loadSignSdk(): Promise<void> {
       return new Promise((resolve, reject) => {
         if (window.HelloSign) {
           resolve();
           return;
         }
         const scriptEl = document.createElement('script');
         scriptEl.src = 'HelloSign官方嵌入式SDK静态资源地址';
         scriptEl.onload = () => resolve();
         scriptEl.onerror = () => reject(new Error('签名组件加载失败，请刷新重试'));
         document.body.appendChild(scriptEl);
       });
     }
   
     private async initSignProcess(): Promise<void> {
       // 请求自有后端接口获取签名token
       const { signToken } = await this.http.post<{signToken: string}>(
         '/api/create-signature',
         {
           docTitle: '用户服务协议',
           signerName: '当前登录用户真实姓名',
           signerEmail: '当前登录用户邮箱',
           docPublicUrl: '待签署文档的公网访问地址'
         }
       ).toPromise();
   
       // 初始化签名实例
       window.HelloSign.init({
         clientId: 'HelloSign控制台获取的前端ClientId',
         skipDomainVerification: false // 本地调试可临时设为true，生产环境必须关闭
       });
   
       // 挂载签名组件，绑定事件监听
       window.HelloSign.open(signToken, {
         container: document.getElementById('sign-mount-node'),
         allowCancel: true,
         on: {
           sign: () => {
             // 签署成功逻辑，比如跳转成功页、刷新文档列表
             console.log('签署完成');
           },
           cancel: () => {
             // 用户取消签署逻辑
             console.log('用户取消签署');
           },
           error: (err) => {
             console.error('签署流程异常', err);
           }
         }
       });
     }
   }
   

3. 在Angular安全配置中，将HelloSign相关资源域名加入脚本、iframe的可信源白名单，避免被框架内置安全策略拦截。

• 嵌入式签名生成的signToken有效期仅1小时，过期后需要重新请求后端生成，不要做长期缓存
• 生产环境必须在HelloSign控制台配置前端域名白名单，避免ClientId泄露后被其他站点盗用签名入口
• 回调接口不要跳过签名校验，所有状态更新必须校验请求来源合法性
• 不要在Angular端存储、使用API Key，前端打包后的代码可被反编译提取，密钥泄露会导致账号下所有签署资源被篡改

内容的提问来源于stack exchange，提问作者Rutvi Trivedi