메인 콘텐츠로 건너뛰기
항목을 찾을 수 없습니다.
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 Premium Branded eSignature Flow Using .NET Core and the Dropbox Sign API

by 
Julia Seidman
July 6, 2021
5개
분 소요
"Building a White Labeled eSignature Flow Using .NET Core and the Dropbox Sign API" header image
툴팁 아이콘

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

닫기 아이콘

Microsoft’s .NET Core framework is popular with developers creating data management systems for organizations of all sizes.  The MVC architecture and Entity Framework are well-adapted to maintaining scalable databases with robust built-in User profiles and authentication.

‍

Many such organizations also need to manage large volumes of documents, as well. Dropbox Sign is an excellent option for C#/.NET developers looking to integrate eSignatures into their applications to meet those needs.

‍

In this guide, we’ll show how Dropbox Sign’s embedded SignatureRequests and white-labeling options could be used to manage contracts and waivers for an athletic league. Let’s call it Company Inc.—and let’s see how to integrate Dropbox Sign into a new .NET project.


To learn more about the Dropbox Sign API, visit the Dropbox Sign Developer Portal and start testing for free (no credit card required).


Set Up Dropbox Sign In Your .NET Core Project

We created a database management application for Company Inc. with `dotnet new mvc`, using Pomelo to handle the MySQL connection.


Once you have created your .NET project folder, install the Dropbox Sign NuGet package by entering `dotnet add package hellosign` in your CLI.


Before you begin integrating Dropbox Sign into your application, you’ll need to create a Dropbox Sign account. After creating your account, go to “My Settings” and navigate to the API tab on your dashboard. There, you’ll find your API key. You will also need to create a Dropbox Sign API App. To do that click on “Create” in the API Apps section.  Give your API App a name and a domain. As long as you are in the testing phases of development, you can ignore the domain verification fields, as those are only required for production applications. Once you add your App, you will get a Client ID specific to this project.  


Save both your API key and Client ID in your project:

‍

Keys.cs

‍

Be sure to add the file to your .gitignore file to keep these secrets out of source control.

‍

Create Entity Relationships for SignatureRequests

Anytime you create a .NET project with the Entity Framework, you need to think through how you’ll map objects in your code to your database. Even though Dropbox Sign handles our signature requests, we’ll need to store some details on our side so we can track progress. Entity Relationships will help here, but first we need to look at what to expect from Dropbox Sign.


Dropbox Sign provides developers two primary options to use the API:

  1. Have Dropbox Sign generate emails to Signers with your documents linked
  2. Embed SignatureRequests directly in your application


The second option, which we’ll show in this tutorial, keeps the entire signing and review process on your website and displays SignatureRequests in an <iFrame>  HTML element.  This creates a seamless experience for your users and allows developers to write functions for administrators to assign and monitor SignatureRequests from inside the user database.


For Company Inc., we are managing data with Entity Framework. Using Dropbox Sign’s embedded SignatureRequests means we only need to store a single data point for each SignatureRequest in our Model.  The SignatureRequestID will give us quick access to the SignatureRequest object as required. The Entity Relationship Diagram below shows how SignatureRequests are tracked in the database.

Image of an Entity Relationship Diagram that shows how SignatureRequest objects are tracked in the database


The signed Documents needed for a particular Athlete are determined by what Teams they are a part of. Each SignatureRequest is associated with a single Athlete and single Document.

‍

Create Methods for Your Dropbox Sign Model to Send, Sign, and Track SignatureRequests

The Dropbox Sign API includes endpoints for a wide range of functions.  At the most basic, your application will send a SignatureRequest, obtain a unique URL to each signer to be embedded, and retrieve the SignatureRequest to check the status and review signatures.


We chose to keep all of the API calls together as properties of the `HSeSignature` model, and dispatch them all from a single controller.  The `CreateEmbeddedSignatureRequest` method takes a specific Athlete and Document as parameters, and uses properties of these particular Entities to create the SignatureRequest object.  These can be passed in through the Controller via the ViewBag or as the Application User if you are using Identity.


Models/HSeSignature.cs

‍

Controllers/HSeSignaturesController.cs

‍

Integrate Dropbox Sign’s Embedded SDK as a Script

The embedded signing experience for the User happens entirely on your site, so you can create Views around the workflow that is best for your users. The Dropbox Sign Embedded package is available as a Node package, but because working with npm in .NET can be difficult, we’ve chosen to import the package through the CDN. Either way, developers have access to a range of different functions within the Embedded flow.


By default, the CDN will attach itself to the Window object since it creates an <iFrame> element. Since JavaScript can’t access the Client ID from the .NET namespace, you will also need to save your Client ID in a .env file.


hellosign.js

‍

Once you’ve created the embedded client script, you should embed it as a <script> inside the <head> of your html.  For Company Inc., we created an `_HSLayout.cshtml` file separate from the shared `_Layout.cshtml` View, so that the HelloSign script is only included in the <head> in Views where it will actually be used.  Otherwise, the two layout files are the same.


Views/Shared/_HSLayout.cshtml

‍

Any View using this layout will be able to call the methods in `hellosign.js`.  For example, the `SignDocument` View created above by the `HSeSignaturesController` uses this layout and script:


Views/HSeSignatures/SignDocument.cshtml

‍

Clicking the button will open an <iFrame> element with the Document passed in through the Controller, allowing the Athlete to sign forms while still on the Company Inc. website.


Use White Labeling to Create an On-Brand User Experience

Once you have created an Embedded SignatureRequest flow in your application, you can further customize it with Dropbox Sign’s white labeling options. You can customize the colors of text, background, buttons, and hover effects to match your website’s color scheme, giving users a more cohesive signing experience.


Once white labeling options have been set for your API App, they will remain in place unless you change them. For most applications, it makes sense to do this with a Curl request to update your app once other functionality is fully in place.


For Company Inc. and other organizations managing many users with many eSignature needs, Dropbox Sign Embedded Signing is a great fit. It offers a straightforward, reliable way to integrate SignatureRequests with your other data and gives your users the smooth, consistent experience they expect—while ensuring you get the signatures needed to satisfy your legal team.


To learn more about the Dropbox Sign API and start testing for free, visit Dropbox Sign’s 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

템플릿으로 팀원 가져오기

사진 사용 동의서 템플릿

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