RClick – RPost Hilfecenter

RClick ermöglicht es Unternehmensanwendern innerhalb von RSign, elektronische Signaturen nahtlos in ihre Web-Anwendungen zu integrieren und gleichzeitig Signaturzertifikate für Unterzeichner zu erzeugen.

Dieser Artikel beinhaltet folgende Themen:

Erforderliche Konfiguration in RSign
Erforderliche Konfiguration in der Webanwendung des Kunden
Funktionstest

Erforderliche Konfiguration in RSign

Dies sind die Schritte, die der Kundenadministrator durchführen muss, um die RClick-Funktion zu nutzen:

1. Setzen Sie die Einstellung RClick aktivieren auf J (enabled).

Wenn diese Option aktiviert ist, stehen zwei zusätzliche Steuerelemente zur Verfügung: die RClick ID, die die Webanwendung des Kunden eindeutig identifiziert, und der RClick Key, ein sicherer Code, den die Webanwendung des Kunden bei Web-API-Aufrufen an RSign senden muss.

2. Aktivieren Sie die Einstellung Kontroll-ID anzeigen.

3. Erstellen Sie eine Vorlage, die das Formular oder Dokument widerspiegelt, in das der Benutzer seine Informationen und seine Unterschrift auf der Webseite eingibt. Damit die Vorlage wie die Webseite aussieht, auf der der Unterzeichner seine Unterschrift leisten wird, bringen Sie Ihr Firmenlogo auf dem Dokument an, bevor Sie es in die Vorlage hochladen. Platzieren Sie Steuerelemente, wo die Transaktionsdaten auf der Webseite des Kunden erscheinen, um diese Daten festzuhalten.

4. Notieren Sie sich den Code der Vorlage.

Erforderliche Konfiguration in der Webanwendung des Kunden

Die Entwickler der Kunden-Anwendung können einen RClick-Signaturblock, d.h. einen Java-Code-Ausschnitt, in ihre Webanwendung einbetten. Der RClick-Signaturblock ermöglicht es ihnen, auf der Webseite angezeigte Authentifizierungs- und Transaktionsdaten zusammen mit dem Signaturbild des Unterzeichners über API-Aufrufe an RSign zu übergeben. RSign kombiniert die Transaktionsdaten des Kunden und die elektronische Signatur des Unterzeichners mit der Vorlage und wendet ein digitales Zertifikat an, um der aufrufenden Anwendung ein endgültiges unterzeichnetes Dokument samt Fertigstellungs-Bestätigung zu liefern.

Um die RClick-Funktion zu nutzen, müssen die Entwickler in der Webanwendung des Kunden wie folgt vorgehen:

1. Abruf der Struktur der JSON-Payload zum Senden von Transaktionsdaten durch Aufrufen einer RSign-API.

Um sicherzustellen, dass die auf der Webseite des Kunden angezeigten Transaktionsdaten korrekt auf der Vorlage abgebildet werden, bietet RSign die API GetSignerControls an. Diese API holt die Struktur der JSON-Payload, die die Kontroll-IDs für alle im Dokument positionierten Steuerelemente enthält. Rufen Sie die Payload ab, weisen Sie den Kontroll-IDs in der JSON-Struktur entsprechende Werte zu und übermitteln Sie sie über einen API-Aufruf an RSign. Führen Sie dazu folgende Schritte aus:

- Rufen Sie die GetSignerControls API auf: Dazu benötigen Sie ein Authentifizierungstoken. Installieren Sie dazu einen REST-Client aus dem Chrome Web Store in Ihrem Chrome-Browser.

- Rufen Sie dei Authenticate User API durch Übergabe der folgenden Payload auf:

API URL: https://api3.use.rsign.com/api/V1/Authentication/AuthenticateUser

Payload:
{
"EmailId": "maxmustermann@rpost.com",
"Password": "rpostpasswort"
}

Geben Sie im Plugin Ihren RSign-Benutzernamen und Ihr Passwort ein und wählen Sie Post aus dem Dropdown-Menü.
Klicken Sie dann auf Send Request.

Der Browser-Client sendet die Anfrage und gibt das AuthToken zurück. Kopieren Sie den hervorgehobenen Inhalt und bewahren Sie ihn für nachfolgende API-Aufrufe auf.

- Rufen Sie die GetSignerControl-API durch Eingabe dieser URL auf: https://api3.use.rsign.com/api/V1/Envelope/GetSignerControls/62649

Hinweis: Die letzte Zahl entspricht dem Code der Vorlage, welche zur Nachahmung des Formulars auf der Webseite des Kunden erstellt wurde.

Geben Sie unter Authentication den AuthToken ein, den Sie im vorherigen Schritt kopiert haben,

Wählen Sie Get aus dem Dropdown-Menü. Klicken Sie dann auf Send Request.

- Diese API gibt die folgende Payload zurück. Der Code der Client-App füllt die Kontrollwerte aus:

2. Betten Sie den RSign-Signaturblock in eine Kundenwebseite ein.

- Erstellen Sie zwei DIV-Elemente im Kunden-HTML-Code, in denen das HTML-Steuerelement eingefügt werden muss. Benennen Sie die DIV-Elemente als rs-Signature1 und hdnSignatureID1.
- Betten Sie den unten angezeigten RClick-JavaScript-Code-Ausschnitt in die HTML-Seite ein.
- Das von RSign zur Verfügung gestellte 'sign.rclick.js'-Skript wird geladen.
- Bei der Erstellung der Vorlage muss die HTML-ID des Präfixes des Signatur-Steuerelements signControl sein, und beim Aufruf muss dieselbe HTML-ID signControl übergeben werden.
c - Die Control ID-Werte in der Payload sind in der aktuellen Version nicht zwingend erforderlich.

// Kommentare in grün
const script= document.createElement('script');

// Fügen Sie die externe RClick-Dateiquelle ein. Dies wird sich ändern, wenn der Code in Produktion geht.
script.src = ' {{Base}}/scripts/custom/sign.rclick.js'; // Base ist mit der Host-URL zu ersetzen

// Setzen Sie async auf true für asynchrones Laden
script.async = true;

// Hängen Sie das Skript-Tag an den Dokumentenkopf an
document.head.appendChild(script);

// loadRClickScript-Funktion, die aufgerufen wird, sobald das Skript geladen ist
const loadRClickScript = () => {
  const data = JSON.stringify({
    rclickId:rclickId, // Verfügbar unter RSign-Einstellungen -> Extra
    rclickKey:rclickKey, // Verfügbar unter RSign-Einstellungen -> Extra
    token:authToken, // Von der Authenticate User API zurückgegebenes Authentifizierungs-Token
    environment:'STG', // STG ist die Staging-Umgebung. Nach erfolgreichem Test ist dies auf PROD zu wechseln.
    signControls:[{
      signControlId: 'rs-Signature1', // div Control ID in der Kunden-Anwendung für das Signatur-Steuerelement 
      signHiddenControlId: 'hdnSignatureID1' // div Control ID in der Kunden-Anwendung für die Speicherung des Primärschlüssels der Kunden-Signatur. 
    } 
]
});
rclick.run(data); // Das Skript ist geladen. Jetzt können wir Funktionen verwenden, die in der externen Datei definiert sind.
};

const url =
  ' {{Base}}/api/V1/Envelope/SendClickSignEnvelope'; //Base ist der Hostname: https://app.rsign.com
  fetch(url, {
    method: 'POST',
    headers: {
     'Content-Type': 'application/json','AuthToken': authToken 
    },
    body: JSON.stringify(submitPayload),
  })
  .then((response) => response.json()) // Antwort von der RClick-API abrufen
  .then(result => {
  alert("Document digital signature completed."); // Nur für Testzwecke. 
  let res= JSON.stringify(result);
  alert("RClick response:" + res); // Nur für Testzwecke.
  console.log("RClick response:",result)
  return result;
  })
  .catch((error) => {
    console.log('Document read error');
  });

3. Die Kunden-Anwendung sendet die Transaktionsinformationen an RSign.
Fügen Sie die Vorlagen-ID, den Betreff, den Text, die Unterzeichner-Rolle, den Namen und die E-Mail-Adresse ein. Ersetzen Sie den roten Code durch den Wert der „Daten“ in der oben empfangenen Payload.

submitPayload = {
"templateID":62649,
"subject": "enter subject text here", // Dieser Wert kommt vom Pop-up. Signierte Dokumente vom Benutzernamen
"body":"enter body text here", // Dieser Wert kommt vom Pop-up.

"signerList":[ 
{"roleName":"Manager","name":"Max Mustermann","email":"maxmustermann@noemail.com","dataControls":[
{"controlID":"E294C207-13FD-4508-95FC-90C5D9C555FA","controlHtmlID":"signControl74069","controlValue":""}, // es ist nicht nötig, den Wert von signcontrol zu senden, RClick holt ihn sich vom verborgenen Steuerelement (hdnSignatureID1)
{"controlID":"76597505-F0DE-47EE-AF59-F721BE198242","controlHtmlID":"textControl41531","controlValue":"55"},
{"controlID":"76597505-F0DE-47EE-AF59-F721BE198242","controlHtmlID":"textControl41830","controlValue":"66"},
{"controlID":"76597505-F0DE-47EE-AF59-F721BE198242","controlHtmlID":"textControl56794","controlValue":"77"}]
"order": 1
}]
"sendEmail":1, // E-Mail versenden, wenn der Wert 1 ist. Nicht senden wenn der Wert 0 ist. 
"returnFinalSignedDocument":1 // Endgültiges unterzeichnetes Dokument versenden, wenn der Wert 1 ist. Nicht senden wenn der Wert 0 ist.
}

 response : 
{
  "StatusCode": 200, 
  "StatusMessage":"OK",
  "Success":true,
  "Message":"Success",
  "EvelopeStatus":"Completed",
  "EnvelopeCode":"54352548-4999-FAAF-3257-CACF",
  "FinalSignedDocumentInBase64":"JVBERi0xLjcKJeLjz9MKODAgMCBvYmoKPDwvQnl0ZVJhbmdlI"
}

Funktionstest

Zu Testzwecken wurde eine Prototyp-Webseite in der RPost-Staging-/QA-Umgebung bereitgestellt.
Sie können hier darauf zugreifen: settings22.d1.rpost.info
Der Prototyp zeigt ein Pop-up an, um das Testen der Integration zu erleichtern. Damit können Sie API-Parameter über die Benutzeroberfläche übergeben.

Das auf der Webseite angezeigte Pop-up Signature Payload akzeptiert drei Parameter:

- Token: Dies ist das Authentifizierungs-Token, das nach dem Aufruf der RSign-Authenticate-User-API erhalten wurde.
- RClick ID: Dies ist ein eindeutiger Identifikator, der von RSign generiert wird, um die Kunden-Webanwendung zu identifizieren.
- RClick Key: Dies ist ein eindeutiger, von RSign generierter Parameter, den die Kunden-Webanwendung bei einem API-Aufruf an RSign senden muss.

Hinweis: Der Kundenadministrator holt sich die RClick ID und den RClick Key für seine Kunden-Anwendung aus den RSign Einstellungen>Firma>Extra.

Klicken Sie auf das Signatur-Steuerelement, um Ihre Unterschrift anzubringen als ob Sie der Unterzeichner wären.

Sobald Sie auf das Steuerelement Unterzeichnen klicken, öffnet sich das Pop-up Unterschrift hinzufügen. Unterschreiben Sie und klicken Sie dann auf OK.

Sobald die Signatur auf das Dokument angebracht wurde, wählen Sie beide Checkboxen am unteren Rand des Bildschirms aus und klicken Sie auf Absenden, um die Transaktion abzuschließen.

Die Kunden-Anwendung sendet die Vorlagen-ID, den Betreff, den Text und die Unterzeichner-Liste an RSign.

Geben Sie den Wert in das Texteingabefeld Unterzeichner-Liste im folgenden Format ein. Stellen Sie sicher, dass die HTML-Control-ID in der Payload mit den HTML-Control-IDs der im Dokument eingefügten Steuerelemente übereinstimmt. Stellen Sie außerdem sicher, dass die HTML-Control-ID des Signatur-Steuerelements mit signControl beginnt.

[
{"roleName":"Manager","name":"Max Mustermensch","email":"maxmustermensch@yahoo.com","dataControls":[
{"controlID":"","controlHtmlID":"nameControl68146","controlValue":"Peter Müller"},
{"controlID":"","controlHtmlID":"textControl56448","controlValue":"Golden Habitat, Kondapur"},
{"controlID":"","controlHtmlID":"dateControl92618","controlValue":"08/02/2024"},
{"controlID":"","controlHtmlID":"baserate","controlValue":"145.05"},
{"controlID":","controlHtmlID":"accomodation","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"brokenlunch","controlValue":"20.10"},
{"controlID":"","controlHtmlID":"nightschoolbrokenlunch","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"supplimentaryperformance","controlValue":"78.89"},
{"controlID":"","controlHtmlID":"otherexpenses","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"overtime","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"holidaycredit","controlValue":"15.62"},
{"controlID":"","controlHtmlID":"travelallowance","controlValue":"13.87"},
{"controlID":"","controlHtmlID":"fittingfee","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"adjustment","controlValue":"0.00"},
{"controlID":"","controlHtmlID":"reasonforadjustment","controlValue":"Just for checking"},
{"controlID":"","controlHtmlID":"Total","controlValue":"273.53"},
{"controlID":"","controlHtmlID":"signControl1","controlValue":""}
],
"order": 1
}]

Das endgültige signierte Dokument wird im Base-64-Format an die Kunden-Webanwendung zurückgegeben. Überprüfen Sie, ob das Dokument per E-Mail an die angegebene E-Mail-Adresse gesendet wird.

Try RMail PRE-Crime Services – Schedule a Demo Now

Erforderliche Konfiguration in RSign

Erforderliche Konfiguration in der Webanwendung des Kunden

Funktionstest