OneSpan Sign How To: Erstellen einer einfachen PHP-Webanwendung

Haris Haidary, 18. Mai 2016

PHP ist eine serverseitige Skriptsprache, die hauptsächlich für die Webentwicklung entwickelt wurde. Es ist eine der vorherrschenden Skriptsprachen, die von Webentwicklern verwendet werden. Die Hauptgründe für seine Popularität sind die folgenden:

  1. Leicht zu lernen
  2. Gut dokumentiert
  3. Einfach zu verwenden

PHP hat bei weitem die kleinste Lernkurve. Alles, was Sie brauchen, um loszulegen, sind ein paar PHP-Tags in einer HTML-Datei und sehen das Ergebnis. Als nächstes ist PHP gut dokumentiert. Sie können unzählige Beispiele auf der offiziellen PHP-Website oder einfach durch eine Online-Suche finden. Dies ist auf die enorme Community-Unterstützung zurückzuführen, die PHP bietet. Schließlich ist es besonders einfach zu bedienen. Im Gegensatz zu den meisten Lösungen wie Java und C ++ muss PHP-Code nicht kompiliert werden. Sie können einfach Ihr Skript schreiben und Ihren Browser aktualisieren, um die Ergebnisse anzuzeigen. In diesem Blog zeige ich Ihnen, wie Sie eine einfache PHP-Webanwendung erstellen, in der Ihr Benutzer ein Formular ausfüllen und anschließend mit OneSpan Sign einen Mustervertrag unterzeichnen muss.

Bedarf

Bevor Sie in den Code eintauchen, müssen Sie Ihre Umgebung einrichten, um Ihre PHP-Webanwendung zu erstellen. Für diesen Blog benötigen Sie lediglich einen Webserver mit einem PHP-Interpreter und einem Texteditor.

XAMPP herunterladen Ich werde XAMPP verwenden, einen kostenlosen plattformübergreifenden Open-Source-Webserver mit PHP- und PERL-Interpreten. Es ist einfach, leicht und ermöglicht es Ihnen, Ihre Skripte lokal zu testen. Sie können XAMPP über den unten stehenden Link erhalten.

Laden Sie XAMPP herunter

Herunterladen eines Texteditors

Sie benötigen außerdem einen Texteditor. Für diesen Blog werde ich Sublime Text verwenden. Sie können eine kostenlose Kopie über den unten stehenden Link herunterladen.

Laden Sie Sublime Text herunter

 

XAMPP installieren und konfigurieren

Führen Sie nach dem Herunterladen von XAMPP die ausführbare Datei aus. Wenn auf Ihrem Computer ein Antivirenprogramm ausgeführt wird, werden Sie möglicherweise aufgefordert, die Installation fortzusetzen. Klicken Sie auf "Ja". Es wird empfohlen, dass Sie Ihr Antivirenprogramm deaktivieren, wenn Sie XAMPP ausführen.

 

Frage

 

Als nächstes wird Ihnen die XAMPP-Begrüßungsseite angezeigt. Weiter klicken". Anschließend werden Sie aufgefordert, die Komponenten auszuwählen, die Sie installieren möchten. Für die Zwecke dieses Blogs benötigen Sie nur den Apache-Server und PHP als Programmiersprache.

 

Komponenten

 

Nachdem Sie auf "Weiter" geklickt haben, werden Sie aufgefordert, einen Ordner für die Installation von XAMPP auszuwählen. In meinem Beispiel habe ich mich dafür entschieden, es im Standardverzeichnis zu installieren (z C: \ xampp).

 

Verzeichnis

 

Von hier aus können Sie so lange auf "Weiter" klicken, bis die Installation abgeschlossen ist. Klicken Sie abschließend auf "Fertig stellen", um die XAMPP-Systemsteuerung zu starten.

 

abgeschlossen

 

Die von XAMPP verwendete Standardportnummer ist 80. In meinem Beispiel habe ich die Portnummer in "1234" geändert. Dieser Schritt ist rein optional. Wenn Sie es auf 80 belassen, lautet Ihre URL "localhost: 80". Um die Portnummer zu ändern, klicken Sie in der Systemsteuerung auf "Config" und wählen Sie "Apache (httpd.conf)". Ändern Sie in der Konfigurationsdatei Folgendes:

Hören Sie 80
Servername localhost: 80

Ersetzen Sie sie durch:

Hören Sie 1234
Servername localhost: 1234

Speichern Sie Ihre Änderungen und schließen Sie die Konfigurationsdatei. Sie können Apache jetzt ausführen, indem Sie in der Systemsteuerung auf "Start" klicken.

 

config

 

Geben Sie in Ihrem Browser "localhost: 1234" ein. Wenn Sie den folgenden Bildschirm sehen, bedeutet dies, dass Sie XAMPP erfolgreich auf Ihrem Computer installiert haben.

 

xampp_home

 

Sie können auch mit einem einfachen Test testen, ob XAMPP PHP erfolgreich installiert hat. Öffnen Sie Sublime Text und geben Sie Folgendes ein:

 php echo 'Hallo Welt!'; ?>

Speichern Sie diese Datei als "test.php" in "C: \ xampp \ htdocs". Navigieren Sie dann zu "localhost: 1234 / test.php". Sie sollten das "Hallo Wort!" Botschaft:

 

Hallo Welt

OneSpan Sign-Entwickler-Community

OneSpan Sign-Entwickler-Community

Treten Sie der OneSpan Sign Developer Community bei! Foren, Blogs, Dokumentationen, SDK-Downloads und mehr.

Tritt heute bei

Der Code

Wir sind jetzt bereit, in den Code einzutauchen. Erstellen Sie einen neuen Ordner unter "C: \ xampp \ htdocs \" und nennen Sie ihn "esignlive". Der erste Schritt besteht darin, Ihr HTML-Formular zu erstellen. Erstellen Sie in Sublime Text eine neue Datei und kopieren Sie den folgenden Code:

 

Bitte füllen Sie das folgende Formular aus: h3>

Vorname:
Nachname:
E-Mail-Adresse:
Firma:
Adresse:
Stadt:
Status:
Zip:
Land:
Telefonnummer:
Richtliniennummer:
form> div> body> html>

Wie Sie dem obigen HTML-Code entnehmen können, werden die Formulardaten beim Senden an eine Datei mit dem Namen "Thankyou.php" gesendet (wird in Kürze erstellt). Speichern Sie Ihre Datei als "index.html" in Ihrem soeben erstellten Ordner "OneSpan Sign" (z C: \ xampp \ htdocs \ esignlive). Wenn Sie in Ihrem Browser zu localhost navigieren: 1234 / esignlive / index.html, sollte Folgendes angezeigt werden:

 

Form 1

 

Wenn Sie das Formular ausfüllen und auf "Senden" klicken, wird eine 404-Fehlermeldung angezeigt, da wir noch keine "Thankyou.php" -Datei erstellt haben. Lassen Sie uns fortfahren und dies tun.

Erstellen Sie in Sublime Text eine neue Datei und kopieren Sie Folgendes:

 php 

require ("ESLPackageCreation.php");

$ package = new ESLPackageCreation ();

$ packageId = $ package-> buildPackage ($ _ POST ['Vorname'], $ _POST ['Nachname'], $ _POST ['emailAddress']);

$ response = $ package-> buildDocument ($ packageId, $ _POST ['firstName'], $ _POST ['lastName'], $ _POST ['address'], $ _POST ['city'], $ _POST ['state' ], $ _POST ['zip'], $ _POST ['country'], $ _POST ['phoneNumber'], $ _POST ['emailAddress'], $ _POST ['company'], $ _POST ['policyNumber']) ;;

$ package-> buildSend ($ packageId);

$ package-> buildSign ($ packageId);

$ token = $ package-> buildToken ($ packageId);

?>



Vielen Dank, dass Sie das Formular ausgefüllt haben! Bitte unterschreiben Sie das folgende Dokument: h3>

 

Speichern Sie diese Datei als "Thankyou.php" in Ihrem "OneSpan Sign" -Ordner. Lassen Sie uns den obigen Code aufschlüsseln. Die ersten beiden Zeilen importieren die Datei "ESLPackageCreation.php" (wird in Kürze erstellt) und instanziieren eine neue Klasse.

 

require ("ESLPackageCreation.php");
$ package = new ESLPackageCreation ();

 

In den nächsten Zeilen übergeben wir die Formulardaten als Parameter an die Methoden der Klasse "ESLPackageCreation", um ein Paket zu erstellen und zu senden und anschließend ein Signer-Authentifizierungstoken zu erstellen.

 

 php

define ("MULTIPART_BOUNDARY", "---- WebKitFormBoundary7MA4YWxkTrZu0gW");

Klasse ESLPackageCreation

{
	// API-Schlüssel und API-URL definieren
	private $ url = "https://sandbox.esignlive.com/api";
	private $ key = "your_api_key";
	private $ packageAppend = "/ packages /";
	private $ tokenAppend = "/ signerAuthenticationTokens /";

	// Konstruktormethode für ESLPackageCreation
	öffentliche Funktion __construct ()
	{

	}

	// Paket erstellen
	öffentliche Funktion buildPackage ($ firstName, $ lastName, $ email)
	{
		$ build = array (
			'type' => 'PACKAGE',
			'status' => 'ENTWURF',
			'Rollen' => Array (
				Array (
					'id' => 'Signer1',
					'type' => 'SIGNER',
					'signers' => array (
						Array (
							'email' => $ email,
							'Vorname' => $ Vorname,
							'lastName' => $ lastName,
							'id' => 'Signer1',
						)
					),
				),
				Array (
					'id' => 'Sender1',
					'type' => 'SIGNER',
					'signers' => array (
						Array (
							'email' => 'mail32 @mailinator .com ',
							'Vorname' => 'John',
							'lastName' => 'Smith',
							'id' => 'Sender1',
						)
					),
				),
			),
			'name' => 'PHP-Anwendungsbeispiel',
		);
		$ packageJSON = json_encode ($ build);
		$ packageId = json_decode ($ this-> sendRequest ($ this-> packageAppend, $ packageJSON, NULL, NULL), true);
		return $ packageId;
	}

	// Dokument hochladen
	öffentliche Funktion buildDocument ($ packageId, $ firstName, $ lastName, $ address, $ city, $ state, $ zip, $ country, $ phoneNumber, $ emailAddress, $ company, $ policyNumber)
	{
		$ build = array (
			'Felder' => Array (
				Array (
					'value' => $ firstName,
					'name' => 'first_name',
				),
				Array (
					'value' => $ lastName,
					'name' => 'last_name',
				),
				Array (
					'Wert' => $ Adresse,
					'name' => 'address',
				),
				Array (
					'Wert' => $ Stadt,
					'name' => 'city',
				),
				Array (
					'value' => $ state,
					'name' => 'state',
				),
				Array (
					'Wert' => $ zip,
					'name' => 'zip',
				),
				Array (
					'Wert' => $ Land,
					'name' => 'country',
				),
				Array (
					'value' => $ phoneNumber,
					'name' => 'phone_number',
				),
				Array (
					'value' => $ emailAddress,
					'name' => 'email',
				),
				Array (
					'Wert' => $ Unternehmen,
					'name' => 'company',
				),
				Array (
					'value' => $ policyNumber,
					'name' => 'policy_number',
				),
			),
			'extrahieren' => wahr,
			'name' => 'Mustervertrag',
			'id' => 'Vertrag'
		);

		$ documentJSON = json_encode ($ build);

		$ postdata = "-". MULTIPART_BOUNDARY. "\ r \ n";
	    $ postdata. = "Inhaltsdisposition: Formulardaten; name =" Datei "; Dateiname =" sample_contract2.pdf "\ r \ n";
	    $ postdata. = "Inhaltstyp: application / pdf". "\ r \ n \ r \ n";
	    $ postdata. = file_get_contents ("documents \ sample_contract2.pdf");
	    $ postdata. = "\ r \ n \ r \ n";
	    $ postdata. = "-". MULTIPART_BOUNDARY. "\ r \ n";
	    $ postdata. = "Inhaltsdisposition: Formulardaten; Name =" Nutzlast "\ r \ n \ r \ n";
	    $ postdata. = $ documentJSON;
	    $ postdata. = "\ r \ n \ r \ n";
	    $ postdata. = "-". MULTIPART_BOUNDARY. "- \ r \ n";

		$ status = $ this-> sendRequest ($ this-> packageAppend. $ packageId ['id']. '/ documents', $ documentJSON, $ postdata, 'multipart / form-data; Grenze = '. MULTIPART_BOUNDARY);
		$ status zurückgeben;
	}

	// Paket senden
	öffentliche Funktion buildSend ($ packageId)
	{
		$ build = array (
			'status' => 'SENT'
		);
		$ sendJSON = json_encode ($ build);
		$ this-> sendRequest ($ this-> packageAppend. $ packageId ['id'], $ sendJSON, NULL, 'application / json');
		return NULL;
	}

	// Absender unterschreibt Einverständniserklärung und Vertragsdokumente
	öffentliche Funktion buildSign ($ packageId)
	{
		$ build = array (
			'Dokumente' => Array (
				Array (
					'id' => 'Standard-Zustimmung',
					'name' => 'Zustimmung zu elektronischen Angaben und Unterschriften'
				),
				Array (
					'id' => 'Vertrag',
					'name' => 'Mustervertrag'
				)
			)
		);
		$ signJSON = json_encode ($ build);
		$ signaturAppend = $ this-> packageAppend. $ packageId ['id']. '/ documents /igned_documents';
		$ this-> sendRequest ($ SignaturAppend, $ signJSON, NULL, 'application / json');
		return NULL;
	}

	// Ein Sitzungstoken abrufen
	öffentliche Funktion buildToken ($ packageId)
	{
		$ build = array (
			'packageId' => $ packageId ['id'],
			'signerId' => 'Signer1'
		);
		$ tokenJSON = json_encode ($ build);
		$ token = json_decode ($ this-> sendRequest ($ this-> tokenAppend, $ tokenJSON, NULL, 'application / json'), true);
		$ token zurückgeben;
	}

	// cURL-Funktion zum Senden von Anforderungen an eSignLive
	private Funktion sendRequest ($ type, $ json, $ document, $ contentType)
	{
		if (is_null ($ document) && is_null ($ contentType))
		{
			$ postfields = array (
				"payload" => $ json
			);
		}
		sonst wenn (is_null ($ document) && !is_null ($ contentType))
		{
			$ postfields = $ json;
		}
		sonst
		{
			$ postfields = $ document;
		}

		$ headerOptions = array (
			'Autorisierung: Basic'. $ this-> key,
			'Akzeptieren: application / json, application / zip, text / html, application / xhtml + xml, application / xml; q = 0,9, image / webp, * / *; q = 0,8'
		);
		wenn ( !is_null ($ contentType))
		{
			$ headerOptions [] = "Inhaltstyp: $ contentType";
		}

		$ ch = curl_init ();
		curl_setopt ($ ch, CURLOPT_URL, $ this-> url. $ type);
		curl_setopt ($ ch, CURLOPT_POST, true);
		curl_setopt ($ ch, CURLOPT_FAILONERROR, true);
		curl_setopt ($ ch, CURLOPT_FOLLOWLOCATION, true);
		curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, true);
		curl_setopt ($ ch, CURLOPT_SSL_VERIFYHOST, false);
		curl_setopt ($ ch, CURLOPT_SSL_VERIFYPEER, false);

		wenn (  ($ postfields))
		{
			curl_setopt ($ ch, CURLOPT_POSTFIELDS, $ postfields);
			wenn ( !is_array ($ postfields))
			{
				$ headerOptions [] = 'Inhaltslänge:'. strlen ($ postfields);
			}
		}

		curl_setopt ($ ch, CURLOPT_HTTPHEADER, $ headerOptions);
		$ response = curl_exec ($ ch);
		$ err = curl_error ($ ch);
		curl_close ($ ch);
		
		if ($ err)
		{
			return $ err;
		}
		sonst
		{
			$ response zurückgeben;
		};
	}
}

?>

Im obigen Code erstellt jede Methode die entsprechende JSON-Nutzlast aus dem Array mit json_encode (). Diese PHP-Funktion übersetzt die an sie übergebenen Daten in eine JSON-Zeichenfolge, mit der dann eine cURL-Anforderung an OneSpan Sign gesendet werden kann. Stellen Sie außerdem sicher, dass Sie den Platzhalter für den API-Schlüssel durch Ihren eigenen Wert ersetzen.

Hinweis : Wenn Sie sich in einer Mac- oder Linux-Umgebung befinden, verwenden Sie bitte Schrägstriche, wenn Sie Dateipfadspeicherorte angeben.

Ausführen Ihres Projekts

Sie können jetzt Ihre PHP-Webanwendung ausführen. Geben Sie in Ihrem Browser localhost ein: 1234 / esignlive / index.html. Füllen Sie einige Beispielinformationen aus und klicken Sie auf "Senden".

 

Form 1

 

Sie sollten zur OneSpan Sign-Zeremonie weitergeleitet werden. Nachdem Sie das Standard-Einverständnisformular akzeptiert haben, werden Ihnen die Mustervertragsfelder angezeigt, die mit den Daten gefüllt sind, die Sie in das Formular eingegeben haben, und der Vertrag, der zur Unterzeichnung bereit ist.

 

Vertrag2

Projekt herunterladen

Wenn Sie Fragen zu diesem Blog oder zu anderen Themen bezüglich der Integration von OneSpan Sign in Ihre Anwendung haben, besuchen Sie die Entwickler-Community-Foren: https://developer.esignlive.com .

Das war's von mir. Danke fürs Lesen! Wenn Sie diesen Beitrag hilfreich fanden, teilen Sie ihn bitte auf Facebook, Twitter oder LinkedIn.

Haris Haidary
Junior Technical Evangelist
LinkedIn | Twitter