메인 콘텐츠로 건너뛰기
항목을 찾을 수 없습니다.
dropboxsign 로고
Dropbox Sign을 사용해야 하는 이유
아코디언 메뉴 펼치기/접기

포함된 기능

온라인에서 문서 서명
전자 서명 만들기
템플릿 선택 또는 생성
PDF를 작성하고 서명하기
온라인 계약 체결하기
문서 관리
기능 살펴보기
오른쪽 방향 화살표 아이콘

이용 사례

영업 및 비즈니스 개발
인사
스타트업
재무 기술
부동산
온디맨드 서비스
제품
아코디언 메뉴 펼치기/접기
Dropbox 아이콘
Sign
간편한 문서 전송과 서명
Dropbox 아이콘
Sign API
워크플로에 전자 서명 통합
dropbox fax 아이콘
Fax
팩스 없는 팩스 전송
dropbox 통합 아이콘
연동
여러분이 일하는 곳이라면 어디서든 구현 가능한 Dropbox Sign
관련 자료
아코디언 메뉴 펼치기/접기
블로그
워크플로 전문 지식과 제품 소식
고객 이용 후기
실제 성과를 엿볼 수 있는 실제 스토리
도움말 센터
Dropbox Sign 제품 심층 설명
자료 라이브러리
보고서, 동영상, 정보 안내서
개발자
요금
아코디언 메뉴 펼치기/접기
Dropbox Sign 요금제
가장 적합한 요금제 찾기
Dropbox Sign API 요금제
실제 성과를 엿볼 수 있는 실제 스토리
영업팀에 문의
가입
영업팀에 문의
로그인
아코디언 메뉴 펼치기/접기
Dropbox Sign
Dropbox Forms
Dropbox Fax
무료 평가판
블로그
/
개발자

Building a Custom Branded eSignature Flow Using Vue.js

by 
Cory Shrecengost
13
분 소요
툴팁 아이콘

새로운 이름, 변함없이 강력한 성능! HelloSign이 Dropbox Sign으로 새롭게 탄생했습니다.

닫기 아이콘

eSignatures are quickly becoming the primary way of signing important documents like non-disclosure agreements(NDAs), financial contracts, and onboarding documents digitally and remotely.

‍

The Dropbox Sign API is an advanced, customizable eSignature API service that makes implementing digital signatures in your app a breeze. To learn more about what Dropbox Sign (formerly known as HelloSign) can offer you, check out their Dropbox Sign developer portal.

‍

This article will show you how to use the Dropbox Sign API to implement an eSignature flow in your Vue.js app. If you want to, you can follow along with this GitHub repo.

‍

‍

Implementing a custom eSignature flow

If you’re running a software development company and want to hire remote employees or freelancers to grow the business, you’ll need a way for people to sign documents like NDAs and employment contracts. That’s where the Dropbox Sign API can help. With it, you can easily integrate eSignatures into your Vue.js frontend, creating a cohesive, centralized app for all your paperwork.

‍

Initial setup

To get started, make sure you have the most recent versions of Node.js (>=8) and a package manager like npm, Yarn, or pnpm installed. Then, create both backend and frontend folders to house your app.

‍

The backend for this eSignature flow is a simple Express app that uses the Dropbox Sign Node.js SDK. To install the necessary dependencies, go to the backend folder and run:

‍

‍

The frontend is powered by Vite and Vue.js. This means the resulting app will perform well and allow for fast development. In addition to that, you’ll use the HelloSign Embedded library to embed the HelloSign form.

‍

In the frontend folder, initiate a Vite project and install the necessary HelloSign dependency with the following commands:

‍

‍

Dropbox Sign API key

Before getting into the code, you’ll have to create your Dropbox Sign account and obtain your API key.

‍

If you don’t already have one, create a Dropbox Sign account and sign in.

‍

Inside the dashboard, go to the Integrations section > API tab to retrieve your API key. You’ll use it to connect to Dropbox Sign from the backend.

‍

‍

Integrating Dropbox Sign with the backend

With the API key available, you can start working on the backend.

‍

First, create an `index.js` file and initiate the Dropbox Sign Node.js SDK, providing your API key:

‍

‍

Using the SDK and its `signatureRequest.send()` method, you should be able to upload and send any document that needs to be signed.

‍

If you’re still in the testing phase, make sure to include the `test_mode: 1` property in the config object. It indicates that the integration is currently being tested (signing is not legally binding) and you can test all of the platform’s features freely before moving to production.

‍

‍

To test the code above, ensure you’ve got an example `nda.pdf` file in the backend folder and run it with the `node index.js` command. If the test was successful, the signature request would be sent to the provided email, and API response would be outputted to the console. Additionally, the document will appear in your Dropbox Sign dashboard in the Documents section.

‍

The `signatureRequest.send()` method sends the locally-stored document for signing to recipients’ emails with the provided details. This is the simplest approach to sending an eSignature request, however, it won’t scale well or look good. The document file will have to be uploaded every time a signature is requested and the signature area will be loosely added at the end of the document.

‍

To improve on that, you can use Dropbox Sign Templates.

‍

Dropbox Sign Templates

‍

Templates are reusable documents for multiple signings. Not only that, you can use them with the Dropbox Sign editor, which lets you set the location of the signature as well as other fields.

‍

To create a template, from the side menu, go to the Templates section and click Create template.

‍

Upload your document and go through the template setup process. Pay close attention to the Who needs to sign? panel, as the provided role(s) will be used later with the API.

‍

When you’re done, return to the dashboard and retrieve the template ID:

‍

With the template ready, return to the backend and adjust the code:

‍

‍

To send a signature request using a template, you’ll have to use the `signatureRequest.sendWithTemplate()` method. Also, inside the config object, make sure to include the `template_id` and `signers.role` properties from the Dropbox Sign dashboard. The `files` property is no longer needed, since this time you don’t upload any files.

‍

With this change, your signature requests are now more scalable and reusable. They’re also much cleaner, thanks to the modifications made with the Dropbox Sign editor.

‍

However, the backend still only uses Dropbox Sign to send signature requests via email. While it’s easy and secure, it’s inherently separate to your frontend. For a more seamless, unified experience for your new employees, you should embed the eSignature form on your frontend with the HelloSign Embedded library.

‍

‍

The frontend

For this example, the frontend won’t be anything fancy. All the UI and frontend logic will fit into the `src/App.vue` file:

‍

‍

The above code sets up the app’s UI and state. Refs like `signed` are used to indicate the app’s current state, allowing for the conditional rendering of related UI elements. On top of that, to make things look prettier, some CSS was added.

‍

To run the Vite development server, in the frontend folder run:

‍

‍

The result should look like the following:

‍

Now it’s time to use the HelloSign Embedded library to implement embedded signing. This will require some configuration on both the backend and the frontend, as well as in your Dropbox Sign dashboard.

‍

Configuring the Vite Proxy

‍

First, you’ll have to connect the frontend with the backend to be able to access them both from a single host. For development purposes, it’s recommended to use Vite’s built-in proxy to avoid any issues with CORS. You can enable it from the `vite.config.js` file:

‍

‍

The above configuration proxies all requests to `/api/` path from your frontend to `/` path on your backend.

‍

Creating the Express Server

‍

Now, get back to your backend and start implementing the Express server:

‍

‍

Currently, all that’s needed is the `/callback` route. It’ll be provided in the Dropbox Sign dashboard as the URL to be called for every event that occurs during the signing process. In this example, the endpoint won’t be used much and it simply responds with `“Hello API Event Received”`. The Dropbox Sign API requires this string to confirm that the callback URL works correctly.

‍

You can now start the backend and the frontend with `node index.js` and `npm run dev` commands from their respective folders.

‍


Creating a Dropbox Sign API app

To use the HelloSign Embedded library and related API endpoints, you’ll have to create a Dropbox Sign API App and retrieve its Client ID. To do so, go back to the Integrations > API page in the Dropbox Sign dashboard. From there, click the Create button next to API apps to start configuring your app.

‍

To create an API app, you’ll need a domain or subdomain and a publically accessible event callback URL. Thanks to Vite proxy, your backend and frontend are already available under a single host. However, it’s more than likely that your localhost isn’t publically available.

‍

In this case, the best solution is to use a localhost tunnel like Ngrok. Follow Ngrok’s official setup guide and tunnel the port your Vite development server is running on. With binary downloaded, the whole process comes down to just two commands:

‍

‍

The first command above authenticates you with your Ngrok account, while the second one tunnels the selected port(`3000` being the default port for Vite).

‍

With the tunnel running, enter its address followed by /api/callback/ subpath in the Event callback field.

‍

Customize other aspects of your API app like branding or the app’s name and click Create Application. The app should now be listed on the API page, with its Client ID next to it.

‍

‍

Apply branding to the API app
‍

Retrieving the embed URL

With Client ID ready, you can now get back to your backend.

‍

First, for the embedded signing to work, you have to initialize it on the backend and retrieve the embedded sign URL. That procedure is similar to sending a signature request through email, as you did before, with only a few changes. The method to use here is `signatureRequest.createEmbeddedWithTemplate()`:

‍

‍

The method receives a config object but with the required `clientId` property. Next up, the signature ID is extracted from the response. While there’s only one in the example, there will always be as many signature IDs as there are signers.

‍

Then, the signature ID is passed on to the `embedded.getSignUrl()` method, the response of which contains the embed URL. Finally, the endpoint responds with a JSON object containing the URL.

‍


Embedding the signature request on the frontend

Having everything set up, you can now return to the frontend to finish the integration process. In the `src/App.vue` file, import the HelloSign Embedded library and create a helper function for fetching the embed URL from the backend:

‍

‍

Inside `setup()`, initialize the library client with your client ID. If you’re in the development stage, set the `testMode` property to `true` to skip domain verification:

‍

‍

To open the embedded form, call the `open()` method on the client, passing the embed URL. The client instance also has event-emitter methods like `on()`, `once()`, and `off()`. In the example above, the `once()` method callback updates the UI when an error happens, or the signing process is completed.

‍

The app is now integrated with the Dropbox Sign API, and you can start accepting new employees.

‍

Keep in mind that for production use you’ll need a paid Dropbox Sign plan. On top of that, if you decide to implement an embedded eSignature flow, you’ll have to adhere to certain regulations and security guidelines. To ensure that you do so, Dropbox Sign requires you to go through an app review process before going to production.

‍

‍

Conclusion

In this article, you’ve learned how to implement a complete eSignature flow inside your Vue app with Dropbox Sign. You’ve explored the Dropbox Sign API and laid the groundwork for future expansion of the eSignature feature inside your app.

‍

Dropbox Sign is a full-fledged solution for all your eSignature needs. With its API, you can implement various eSignature flows with emails, or embedded on your custom frontend, in just a couple lines of code. Try Dropbox Sign for free and explore more with the Dropbox Sign developer portal.

‍

진행 상태 확인

모두 완료되었습니다! 받은 편지함을 확인하세요.

Thank you!
Thank you for subscribing!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum
오른쪽 방향 화살표 아이콘
닫기 아이콘

Up next:

현대 디지털 서명 솔루션을 나타내는 수기 서명의 클로즈업 일러스트레이션.
개발자
15개
분 소요

Dropbox Sign과 Ruby on Rails 통합: 단계별 튜토리얼

현대 디지털 서명 솔루션을 나타내는 수기 서명의 클로즈업 일러스트레이션.
개발자
15개
분 소요

Dropbox Sign vs. SignNow for developers

Video

Digital collect Signed Waivers with Dropbox Sign

제품
Dropbox SignDropbox Sign APIDropbox Fax연동
Dropbox Sign이어야 하는 이유
전자 서명문서에 서명PDF 작성과 서명온라인 계약전자 서명 만들기서명 편집기Word 문서 서명
지원
도움말 센터영업팀에 문의지원팀에 연락쿠키 관리시작하기: Dropbox Sign시작하기: Dropbox Sign API
관련 자료
블로그고객 이용 후기자료 센터합법성 지침신뢰 센터
파트너
전략적 파트너파트너 찾기
회사
함께 일하기이용 약관개인정보 보호
Facebook 아이콘Youtube 아이콘

사용 가능한 결제 수단

Mastercard 로고Visa 로고American Express 로고Discover 로고
CPA 컴플라이언스 배지HIPAA 컴플라이언스 배지Sky High Enterprise Ready 배지ISO 9001 인증 배지

Dropbox Sign 전자 서명은 미국, 유럽연합, 영국을 비롯해 전 세계 많은 국가에서 법적 구속력을 발휘합니다.
더 자세한 정보는 이용 약관과 개인정보처리방침에서 확인할 수 있습니다.