DocuSeal 反应组件
页:1 | 实例 | \\ Demo App
此套件提供了嵌入 DocuSeal 地图 进入反应应用程序。 在您的应用程序中直接签名文档并创建文档表格 .
安装
npm install @docuseal/react
文档
详细文件请点击 这里。 。 。 .
使用量
签名窗体
复制公共 DocuSel 格式 URL https://docuseal.com (中文(简体) ) 并使用在 src 组件道具 :
import React from "react"
import { DocusealForm } from '@docuseal/react'
export function App() {
return (
<div className="app">
<DocusealForm
src="https://docuseal.com/d/LEVGR9rhZYf86M"
email="[email protected]"
/>
</div>
);
}
窗体构建器
反应客户端渲染器
import React, { useEffect, useState } from 'react'
import { DocusealBuilder } from '@docuseal/react'
export function App() {
const [token, setToken] = useState()
useEffect(() => {
fetch('/api/docuseal/builder_token', {
method: 'POST'
}).then(async (resp) => {
const data = await resp.json()
setToken(data.token)
})
}, []);
return (
<div className="app">
{token && <DocusealBuilder token={token} />}
</div>
);
}
为了保护模板构建者不被无名访问,应在后端生成一个安全标志(JWT):
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.post('/api/docuseal/builder_token', (req, res) => {
const token = jwt.sign({
user_email: '[email protected]',
integration_email: '[email protected]', // replace with current user email
name: 'Integration W-9 Test Form',
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, process.env.DOCUSEAL_TOKEN);
res.json({ token });
});
app.listen(8080, () => {
console.log(`Server is running`);
});
获取秘密 API 令牌( E)DOCUSEAL_TOKEN env 变量)以从 https://console.docuseal.com/api 页面存档备份,存于互联网档案馆。 。 。 .
Find Express.js 示例工程 这里。 。 。 .
下一轮
import jwt from 'jsonwebtoken';
import { DocusealBuilder } from '@docuseal/react'
export default function Home() {
const token = jwt.sign( {
user_email: process.env.DOCUSEAL_USER_EMAIL,
integration_email: '[email protected]',
name: 'Integration W-9 Test Form',
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, process.env.DOCUSEAL_TOKEN);
return (
<div>
<h1>Docuseal Builder</h1>
<DocusealBuilder token={token} />
</div>
);
}
查找 Next.js 示例工程 这里。 。 。 .
许可证
麻省理工学院