Position für die Digitale Unterschrift vorgeben

Wir haben euch bereits unsere Lösung für eine Digitale Unterschrift für SharePoint Dokumente vorgestellt. In diesem Beitrag möchten wir euch gerne nähere Einblicke in das Festlegen der Unterschriftposition geben. Möchte man die Digitalen Unterschriften an ganz bestimmten Positionen im PDF haben, kann man diese nun mit unserer Lösung festlegen. Der Ersteller eines Workflows kann die Positionen für alle Benutzer im Vorhinein festlegen. Benötigt der Ersteller die genaue Vorgabe der Positionen nicht, kann der Benutzer seine Position selbst festlegen, wenn er an der Reihe  zum Unterschreiben ist.

Der Ersteller eines Workflows hat die Möglichkeit die Unterschriftpositionen für alle hinzugefügten Benutzer bereits zu vergeben. Dafür kann er in der Ansicht eines Workflows pro Benutzer auf den Button „Position vergeben“ klicken. Anschließend zeigen wir die Dokumentenvorschau an und der Ersteller kann durch einen Klick auf das Dokument die gewünschte Position für den jeweiligen Benutzer festlegen.

So kann der Ersteller für jeden Benutzer eine Position vergeben. Auch bereits vergebene Unterschriftpositionen für Benutzer zeigen wir in der Dokumentenvorschau an.

Möchte der Ersteller des Workflows keine Positionen für die Benutzer vorgeben, so kann jeder Benutzer selbst seine Position festlegen, wenn er an der Reihe zum Unterschreiben ist.

Wir rendern die Dokumentenvorschau in einem HTML canvas Element. Für das canvas fügen wir einen Click-Handler hinzu, welcher bei einem Klick auf das canvas aufgerufen wird. Dadurch können wir uns die Koordinaten der gewählten Position berechnen.

<canvas id="canvas" onClick={(ev) => markPosition(ev)}></canvas>

function markPosition(event: any) {
        var rect = canvas.getBoundingClientRect();

        var templateWidth = getTemplateWidth();
        var templateHeight = getTemplateHeight();

        var x0Percent = (event.nativeEvent.layerX - (templateWidth / 2)) / rect.width * 100;
        var y0Percent = (rect.height - event.nativeEvent.layerY - (templateHeight / 2)) / rect.height * 100; 
        // height - value -> because 0/0 in pdf is corner left/bottom

        var x1Percent = x0Percent + (templateWidth / rect.width * 100);
        var y1Percent = y0Percent + (templateHeight / rect.height * 100);

        let newMarkedPosition: SigningPosition = { pageNumber: pageNum, x0: x0Percent, y0: y0Percent, x1: x1Percent, y1: y1Percent };
        renderPage(pageNum, newMarkedPosition);   // Render page again with new marked position
    }

Anschließend fügen wir eine Markierung zum canvas hinzu, wo später die Unterschrift eingefügt wird.

function drawMarkAtPosition(markedPosition: SigningPosition, particpantTitle?: string) {
        let markText: string = particpantTitle ? `Signatur ${particpantTitle}` : "X";

        var rect = canvas.getBoundingClientRect();
        let x = (markedPosition.x0 / 100) * rect.width;                 
        let y = rect.height - (markedPosition.y0 / 100 * rect.height); 
        
        ctx.fillStyle = "#000000";
        ctx.font = "12px Arial";
        ctx.beginPath();
        ctx.strokeStyle = "black";
        ctx.lineWidth = "1";
        let templateWidth = getTemplateWidth();
        let templateHeight = getTemplateHeight();
        let y1 = rect.height - (markedPosition.y1 / 100 * rect.height); 
        ctx.strokeRect(x, y1, templateWidth, templateHeight);

        // fill canvas with text -> every word on separate line
        var lines = markText.split(' ');
        for (var i = 0; i < lines.length; i++)
            ctx.fillText(lines[i], x, (y-templateHeight) + ((i+1) * 15));
    }

Für die digitale Unterschrift mittels Handy-Signatur verwenden wir die Schnittstelle des A-Trust Services. Unter Verwendung dieses Service, haben wir die Möglichkeit die Position für die Unterschrift anzugeben.

public PrepareSignResponse PrepareSignWithPosition(string filename, byte[] content, SigningPosition signingPosition)
        {
            var client = new HandySignaturPdfClient();

            uint page = (uint)signingPosition.PageNumber;
            client.StartSignatureTemplateEx(ApiKey, content, filename, SuccessUrl, ErrorUrl, string.Empty, 4633, "NoLocation", "NoReason",
                signingPosition.X0, signingPosition.Y0, signingPosition.X1, signingPosition.Y1, page, out string ticket, out string redirectUrl);
        }

Dabei müssen die Koordinaten der linken unteren und der rechten oberen Ecke angegeben werden. Die Koordinaten der linken unteren Ecke werden durch den Klick vom Benutzer auf das PDF festgelegt. Die korrekten Koordinaten der rechten oberen Ecke wurden von uns im Code berechnet. Sie ergeben sich, indem man die Größe des Template der Unterschrift zur linke untere Ecke addiert. Die Größe des Template kann vom Service abgefragt werden.

public TemplateSize GetTemplateSize()
       {
           TemplateSize templateSize = null;

           var client = new HandySignaturPdfClient();

           client.GetTemplate(ApiKey, 4633, out byte[] template);
           string xmlTemplate = Encoding.Default.GetString(template);

           XmlDocument doc = new XmlDocument();
           doc.LoadXml(xmlTemplate);
           var positionNodes = doc.GetElementsByTagName("Position");

           if (positionNodes != null && positionNodes.Count > 0)
           {
               var positionNode = positionNodes[0];
               templateSize = new TemplateSize()
               {
                   Width = Convert.ToDouble(positionNode.Attributes["w"].Value),
                   Height = Convert.ToDouble(positionNode.Attributes["h"].Value)
               };
           }

           return templateSize;
       }

Haben wir euer Interesse geweckt und hättet ihr gerne nähere Informationen zu unserer Lösung für die Digitale Unterschrift für SharePoint Dokumente? Dann nehmt gerne Kontakt mit uns auf.