응용 프로그램에 전자 서명 포함

PDF 프로세스는 모든 업무의 핵심이지만 작성과 전자 서명을 다루는 절차는 복잡할 수 있다.Dell의 전자 서명 API는 복잡성을 제거하는 동시에 전체 프로세스를 완벽하게 제어합니다.이 박문에서, 나는 하나의 예를 통해 당신에게 그것이 어떻게 일을 하는지 보여 드리겠습니다.

문제.

기능이 완비된 React 프로그램이 있지만, 프로그램 흐름에 PDF를 채우고 사용자로부터 전자 서명을 수집하는 방법이 없습니다.사용자에게 일치된 사용자 체험을 제공하기를 원합니다. 전체 과정에서 사용자 체험은 응용 프로그램과 같습니다.
Anvil의 식각 전자 서명 API는 전자 우편의 기본 해결 방안을 사용하거나 응용 프로그램의 끼워넣기 해결 방안을 통해 사용자에게 서명을 알리는 두 가지 방법을 제공합니다.
오늘 나는 삽입식 방법을 소개할 것이다.서명자가 서명할 차례가 되면 전자메일을 받지 않고, 반대로, 응용 프로그램은 iframe이나modal을 통해 서명하도록 안내합니다.응용 프로그램을 서명 페이지로 다시 지정하고 서명한 후에 응용 프로그램으로 다시 지정하는 것도 선택입니다.
이메일 알림을 통한 부각 서명에 대한 자세한 내용은 Dell의 블로그 기사adding e-signatures to your app in 3 steps를 참조하십시오.

목표

저희 프로그램은 신입사원이 회사에 들어오는 포털입니다. 신입사원마다 NDA와 IRS표 W-4 두 통을 서명해야 합니다.
응용 프로그램 프로세스는 다음과 같습니다.

첫 페이지(/onboarding/start에서 사용자는 인터넷 폼을 작성할 것이다.

저희 서버는 네트워크 폼을 통해 제출한 상세한 정보를 포함하는 서명 패키지를 만들고 삽입식 서명에 사용할 링크를 생성합니다.

두 번째 페이지(/onboarding/sign/:signaturePacketEid에서 사용자는 끼워 넣은 서명 프레임워크를 통해 파일에 서명할 것이다.

사용자는 우리의 세 번째 페이지, 즉 마지막 페이지/onboarding/finish에 들어갈 것이다. 이것은 사용자에게 입사 절차가 이미 끝났다는 것을 알려줄 것이다.

다음 항목을 다룹니다.

원본 PDF 업로드 및 필드 추가

PDF 템플릿 사용

서명자 추가

PDF

를 데이터로 미리 채웁니다.

다중 PDF 서명 요청

서명 페이지를 React 응용 프로그램에 끼워넣기

이 예에서는 React, Node를 사용합니다.js,Express.js node-anvil client 는 Anvil에 요청을 했고, Anvil SignatureFrame 의 React 구성 요소는 서명 페이지를 프로그램에 끼워 넣었습니다.Node를 사용하지 않은 경우js, 안심하세요. 모든 플랫폼이 Anvil에 대한 요청이 같기 때문입니다.

용어

Signature packet - 서명이 필요한 PDF 설명서

PDF template (cast라고도 함) - 데이터 저장 및 서명이

에 채워지는 구성을 위한 템플릿 PDF 형식

저희가 시작하기 전에. - 설정.

Sign up 모루 계좌에서 retrieve your API key까지.

인증을 계속합니다.프로젝트에 node anvil 클라이언트를 설치합니다.

yarn add @anvilco/anvil
# or
npm install @anvilco/anvil

Anvil 클라이언트를 가져와 서버에 인스턴스를 생성합니다.

import Anvil from '@anvilco/anvil'
// The API key is found under your organization settings
const apiKey = '5AeDVVQ2ybDKqU8LktSVwFL63aLXgH2f'
const anvilClient = new Anvil({ apiKey })

신입사원 네트워크 폼의 첫 페이지 구축

우선, 신입사원들이 정보를 입력할 수 있도록 간단한 웹 폼을 구축합니다. 이 정보는 이따가 서명 패키지를 만드는 데 사용됩니다.
클라이언트:

  <form action="/api/packet/create" method="POST">
    <input name="firstName" type="text" />
    <input name="lastName" type="text" />
    <input name="email" type="email" />
    <input name="date" type="date" />
    <input name="ssn" type="text" />
    <input name="address" type="text" />
    <input type="submit" value="Submit" />
  </form>

우리의 서명 패키지 정의

비밀 협정

이것은 신입 사원이 우리 프로그램의 입사 절차에 서명해야 하는 두 장의 표 중 첫 번째이다.이 파일에 미리 제작된 PDF 템플릿이 없으므로 PDF를 업로드하고 PDF에 데이터를 채울 필드를 지정합니다.

먼저 파일을 JavaScript 객체로 초기화합니다.우리는 잠시 후에 그것을 사용하여 서명 패키지를 만들 것입니다.

const uploadedNDA = {
  id: 'uploadedNDA',
  title: 'Company Onboarding NDA',
  file: anvilClient.prepareGraphQLFile('./static/onboardingNDA.pdf'),
  fields: [
    {
      id: 'employeeSignature',
      type: 'signature',
      rect: { x: 270, y: 374, height: 22, width: 142 },
      pageNum: 1,
    },
  ]
}

국세청 표 W-4

NDA에 서명한 신입 사원은 다음 페이지의 서명 페이지에서 이 양식을 보아야 한다.이 양식의 PDF 템플릿이 Anvil 대시보드에 이미 있습니다.PDF 템플릿을 사용하는 것은 필드 구성이 정의되어 있으므로 에칭 전자 서명을 사용하는 가장 간단한 방법입니다.

NDA처럼 이 PDF 템플릿을 JavaScript 객체로 초기화합니다.우리는 잠시 후에 그것을 사용하여 우리의 서명 패키지를 만들 것입니다.

const templateW4 = {
  id: 'templateW4',
  // castEid is also known as the 'PDF template ID'
  // found under the 'API Info' tab on the PDF template page
  castEid: 'nCpCqnkpRxjg1jNIUDZk',
}

모든 파일

이 그룹은 신입 사원들이 서명할 모든 서류를 저장합니다.

const packetFiles = [uploadedNDA, templateW4]

서명자 추가

신입 사원은 우리의 유일한 서명인이다.우리는 서명자가 우리 프로그램에 서명하기를 원하기 때문에 signerType를 embedded로 설정해야 한다.신입 사원이 서명한 후에 확인 페이지로 바뀌는 것을 확보하기 위해서 redirectURL를 /onboarding/finish로 설정해야 합니다.

const packetSigners = [
  {
    id: 'signer1',
    // Important! This tells Anvil that our app will be
    // notifying the signer when it is their turn to sign
    signerType: 'embedded',
    // Important! This tells Anvil to redirect to this URL
    // after the signer has completed their signatures
    redirectURL: '/onboarding/finish',
    // fields left undefined to be filled using webform input
    name: undefined,
    email: undefined,
    fields: [
      {
        fileId: 'uploadedNDA',
        fieldId: 'employeeSignature',
      },
      {
        fileId: 'templateW4',
        fieldId: 'employeeSignature',
      },
    ],
  }
]

데이터로 PDF 미리 채우기

const packetPrefillData = {
  uploadedNDA: {
    data: {
      // fields left undefined to be filled using webform input
      disclosingPartyName: undefined,
      disclosingPartyEmail: undefined,
      effectiveDate: undefined,
      recipientName: 'Demo Company Inc.',
      recipientEmail: '[email protected]',
      purposeOfBusiness: 'DEMO!!',
    },
  },
  templateW4: {
    data: {
      // fields left undefined to be filled using webform input
      firstName: undefined,
      lastName: undefined,
      address: undefined,
      ssn: undefined,
    },
  },
}

우리의 서명 가방 변수를 한데 조합하다

export const signaturePacketVariables = {
  files: packetFiles,
  signers: packetSigners,
  data: {
    payloads: {
      ...packetPrefillData,
    },
  },
}

네트워크 폼에 루트를 만들고 서명 패키지를 생성합니다

신입 사원이 첫 페이지에서 웹form을 제출할 때, 우리는 서버가 이 정보를 사용하여 node-anvil 클라이언트가 서명 패키지를 만들어야 한다.

모루 / 노드 모루

Anvil의 노드 API 클라이언트

서버에 루트를 만들어서 이를 실현할 것입니다. 첫 페이지의 웹form에서 이 루트를 명중시킬 것입니다.이 루트는 요청 주체로부터 웹form 정보를 검색하여 이전 정의된 서명 패키지 설정에 없는 필드에 이 데이터를 채우고 서명 패키지를 만듭니다.우리는 되돌아오는 eid 로 만든 서명 패키지를 식별할 수 있다.
폼을 제출한 후 사용자는 프로그램 프로세스의 두 번째 페이지에 로그인해야 하기 때문에 루트 함수의 끝에 res.redirect() 호출/onboarding/sign/:signaturePacketEid을 추가합니다.
서버측:

import {
  signaturePacketVariables as variables
} from '../variables'

router.post('/api/packet/create', async (req, res) => {
  // Extract the data submitted from the webform
  const { 
    firstName, lastName, email, date, ssn, address,
  } = req.body

  // Fill in signer details
  variables.signers[0].name = firstName + lastName
  variables.signers[0].email = email

  // Enter the prefill data for the NDA
  variables.data.payloads.uploadedNDA.data = {
    diclosingPartyName: firstName + lastName,
    diclosingPartyEmail: email,
    effectiveDate: date,
  }

  // Enter the prefill data for the W4
  variables.data.payloads.templateW4.data = {
    firstName,
    lastName,
    address,
    ssn,
  }

  // Create the signature packet on the server
  const {
    statusCode, data, errors
  } = await anvilClient.createEtchPacket({ variables })

  // Pass the signature packet EID to the client-side
  // for new hire to sign the packet
  const signaturePacketEid = data.data.createEtchPacket.eid
  const signingPageURL = `/onboarding/sign/${signaturePacketEid}`
  return res.redirect(signingPageURL)
})

신입사원이 첫 페이지에 웹폼을 제출하면 서버에 서명 패키지가 생성되고 신입사원 노조가 두 번째 페이지에 로그인한다.서류에 서명할 준비가 되었다.

서명 패키지 상세 정보 검색 및 서명 URL 생성

프로그램의 /onboarding/sign/:eid 페이지에 서명 프레임워크를 끼워 넣으려면 서명 URL이 필요합니다. node-anvil 클라이언트를 사용하여 이 URL을 생성합니다.
페이지를 표시할 때 이 동작을 실행할 것입니다.

this.state = { signURL: null }

async componentDidMount () {
  const response = await fetch('/api/packet/sign', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      // clientUserId should be the signer’s ID in your system
      clientUserId: 5,
      signaturePacketEid: req.params.signaturePacketEid,
    }),
  })
  const responseText = await response.text()
  const { url } = JSON.parse(responseText)
  this.setState({ signURL: url })
}

저희 서버는 저희 서명 패키지의 상세한 정보를 얻고 신입 사원을 위한 서명 URL을 생성합니다.

router.post('/api/packet/sign', async (req, res) => {
  const { signaturePacketEid, clientUserId } = req.body

  const { data } = await anvilClient.getEtchPacket({
    variables: { eid: signaturePacketEid },
  })

  // We only have 1 signer for this signature packet
  const signers = data.data.etchPacket.documentGroup.signers
  const signerEid = signers[0].eid

  // The signing URL generated here is used to
  // embed the signing page into our app
  const { url } = await anvilClient.generateEtchSignUrl({
    variables: { signerEid, clientUserId }
  })

  return res.jsonp({ url })
})

참고: clientUserId가 시스템의 사용자 ID로 설정되어 있는지 확인합니다.이것은 저희 시스템에서 귀하의 시스템으로 사용자의 트레이스 가능성을 제공하는 데 도움이 됩니다.중요한 구성 요소는 전자 서명이 지정한 사용자와 연결되어 있고, 그 사용자만 서명을 사용할 수 있다는 것이다.프로그램이 특정 사용자만 서명할 수 있도록 검증하고 권한을 부여할 수 있도록 적절한 조치를 취해야 합니다.

서명 페이지 포함

서명 URL을 사용하면 Anvil React component library 서명 페이지를 계속 삽입할 수 있습니다.

모루 / 반응 사용자 인터페이스

Anvil의 React UI 구성 요소

우리는 프레임이나 모형을 선택할 수 있다.이 예에서 우리는 SignatureFrame 구성 요소를 사용할 것이다.
구성 요소를 설치합니다.

yarn add @anvilco/react-signature-frame
# or
npm install @anvilco/react-signature-frame

구성 요소를 서명 페이지에 보여 줍니다.

import SignatureFrame from '@anvilco/react-signature-frame'

class SigningPage extends React.Component {
  state = { signURL: null }

  async componentDidMount () {
    const response = await fetch('/api/packet/sign', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        // clientUserId should be the signer’s ID in your system
        clientUserId: 5,
        signaturePacketEid: req.params.signaturePacketEid,
      }),
    })
    const responseText = await response.text()
    const { url } = JSON.parse(responseText)
    this.setState({ signURL: url })
  }

  render () {
    return (
      <>
        <p>
          Please review the documents and sign to complete 
          the onboarding process.
        </p>
        <SignatureFrame
          signURL={this.state.signURL}
          onFinish={
            (redirectURL) => window.location.assign(redirectURL)
          }
        />
      </>
    )
  }
}

서명 후 onFinish 함수를 호출합니다. 이 예에서 이 함수는 사용자를 redirectURL로 연결합니다.서명 패키지를 만들 때 서명자의 redirectURL 부터 /onboarding/finish 까지 지정했기 때문에 서명자는 서명한 후에 입사 완료 페이지로 연결됩니다.

주: 본 예는 SignatureFrame를 사용하지만 과정은 SignatureModal와 같다.

요약

Anvil의 삽입식 서명 프로세스를 React 프로그램에 통합하는 모든 절차를 마쳤습니다. Anvil Node-client 서명 패키지 생성부터 사용 Anvil React component library 서명 페이지 삽입까지.나는 이 블로그를 통해 네가 이 과정이 어떻게 작동하는지 더욱 잘 이해할 수 있기를 바란다. 그러면 너는 이 도구를 너의 응용 프로그램에 통합시킬 수 있을 것이다.

추가 자원

우리 거 해봐live example of Etch embedded signing

클론example app repo은 Anvil 계정

에서 전자 서명 API를 사용하는 경험을 제공합니다.

우리 거 봐봐Etch E-sign API docs

모루 삽입식 표지React component library

사용Anvil Node-client 처리 요청 및 인증

사용 Anvil API Postman collection API 테스트

Anvil이 이메일로 서명 알림을 처리할 수 있도록 하려면 저희 블로그를 방문하십시오adding e-signature to your app in 3 steps

질문 아니면 댓글?전화[email protected]로 문의하십시오.