DocuSel Vue 组件
此套件提供了嵌入 DocuSeal 地图 进入 Vue 应用程序。 在您的应用程序中直接签名文档并创建文档表格 .
安装
npm install @docuseal/vue
文档
详细文件请点击 这里。 。 。 .
使用量
签名窗体
复制公共 DocuSel 格式 URL https://docuseal.com (中文(简体) ) 并使用在 src 组件道具 :
<template>
// ...
<DocusealForm
:src="'https://docuseal.com/d/LEVGR9rhZYf86M'"
:email="'[email protected]'"
/>
// ...
</template>
<script>
// ...
import { DocusealForm } from '@docuseal/vue'
export default {
name: 'App',
components: {
DocusealForm
},
// ...
}
</script>
窗体构建器
<template>
// ...
<DocusealBuilder
v-if="token"
:token="token"
/>
// ...
</template>
<script>
// ...
import { DocusealBuilder } from '@docuseal/vue'
export default {
name: 'App',
components: {
DocusealBuilder
},
mounted () {
this.loadToken()
},
methods: {
loadToken () {
fetch('/api/docuseal/builder_token', {
method: 'POST'
}).then(async (resp) => {
const data = await resp.json()
this.token = data.token
})
}
}
// ...
}
</script>
为了保护模板构建者不被无名访问,应在后端生成一个安全标志(JWT):
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const secretKey = process.env.DOCUSEAL_API_KEY;
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'],
}, secretKey);
res.json({ token });
});
app.listen(8080, () => {
console.log(`Server is running`);
});
获取秘密 API 令牌( E)DOCUSEAL_API_KEY env 变量)以从 https://console.docuseal.com/api 页面存档备份,存于互联网档案馆。 。 。 .
许可证
麻省理工学院