Dieses Tutorial nimmt Bezug auf das Photobooth Project von Andreas Skomski und zeigt, wie ihr ein Foto unmittelbar nach der Aufnahme auf einen SFTP-Server hochladen könnt. Von dort kann es der Nutzer der Photobooth über die implementierte QR-Code-Funktion direkt auf sein Handy herunterladen. Voraussetzung hierfür ist, dass die Photobooth Zugriff auf das Internet hat, d.h. die Photobooth muss mit einem Router verbunden sein, der über eine aktive Internet-Verbindung verfügt. Und dann braucht ihr natürlich noch einen SFTP-Server, entweder selbst gehostet z.B. über eine NAS oder über einen Webhosting-Anbieter. Habt ihr eine eigene Webseite und nutzt WordPress als Content-Management-System, bietet der Hosting-Provider in der Regel auch schon einen SFTP- bzw. SSH & SFTP-Zugang an. Tut er das nicht, könnte der Datei-/Foto-Upload ggf. auch über einen FTP-Server und das weniger sichere FTP-Protokoll erfolgen. Darauf gehe ich an dieser Stelle aber nicht weiter ein.
Meldet euch also im Kontrollpanel eures Hosting-Anbieters an und sucht dort nach den SFTP / SFTP & SSH-Zugangsdaten. Diese findet ihr meist unter den „Erweiterten Einstellungen“ zu eurer Domain. Aktiviert den Zugang, falls noch nicht geschehen. In den Verbindungsdetails werden euch die Server-IP/Hostadresse, euer Benutzername und der verwendete Port angezeigt; hier könnt ihr auch ein Passwort festlegen. Die Informationen werden benötigt, um sich via SSH / SFTP mit dem Server zu verbinden. Normalerweise wird von den Hosting-Providern der Default-Port 22 verwendet, es gibt aber auch Ausnahmen. Über den Befehl
ssh <user>@<server-ip>könnt ihr die Verbindung vom Terminal aus via SSH testen. Beim Anmeldeprozess werdet ihr nach eurem Passwort gefragt. Wird ein anderer Port als der Default-Port 22 genutzt, müsst ihr den verwendeten Port im obigen Befehl ergänzen. Das geht so:
ssh -p 65002 <user>@<server-ip>Statt des Default-Ports 22 wird hier also der Port 65002 genutzt. Sodann können wir auch eine Verbindung via SFTP herstellen. Ich nutze hierfür die freie Clinet-Software FileZilla. In der Leiste oben gebe ich meine SFTP-Serveradresse, meinen Benutzernamen, mein Passwort sowie den Port ein.
wp-content Ordner meiner WordPress-Installation, der alle vom Benutzer bereitgestellten Inhalte enthält. In diesem lege ich einen neuen Ordner an, in den ich die Fotos der Photobooth später hochladen werde. Ich habe mir hierfür den Ordner Photobooth und zusätzlich noch den Unterordner event1 angelegt.
Als Nächstes kopiere ich noch den vollständigen Pfad zu meinem Event-Ordner aus dem Feld „Server:“
/home/u12*348***/domains/partyboxberlin.com/public_html/wp-content/photobooth/event1Dort sollen in Zukunft also die Foto-Dateien auf dem SFTP-Server abgespeichert werden. Hierfür trage ich einen post-picture Befehl in dem diesbezüglichen Feld auf der Photobooth-Admin-Seite ein (http://localhost/admin). Dieses findet ihr unter „Befehle“, „Skript / Befehl nach Bildaufnahme“. In dem post-picture Befehl nutze ich den secure copy scp command:
scp -P 65002 /var/www/html/data/images/%s u12*348***@92.***.19.*7:/home/u12*348***/domains/partyboxberlin.com/public_html/wp-content/photobooth/event1
Der Befehl kopiert das gerade geschossene Foto (%s) aus dem Photobooth-Ordner /var/ww/html/data/images mittels scp unter Verwendung des Ports 65002 (scp -P 65002) in den eben festgelegten Ordner auf dem SFTP-Server, der über meinen Benutzernamen u12*348*** und der Server-IP 92.***.19.*7 erreichbar ist. Ein "@"-Zeichen verbindet Benutzernamen und Server-IP, ein ":" leitet die Pfad-Eingabe zum Ordner ein, in dem die Fotos gespeichert werden sollen. Achtung: Ggf. lautet der Pfad zum images Ordner bei euch auch anders, z.B. /var/www/html/photobooth/data/images/.
Fertig? Noch nicht ganz... Da der www-data User, über den der post-picture Befehls ausgeführt wird, dem SFTP-Server nicht bekannt ist, verlangt der Server nach einem Passwort, das wir dem scp command aber nicht (ohne Weiteres) mitgeben können. In der Folge scheitert der File-Transfer. Dieses Problem lässt sich mittels einer Fingerprint-Verifikation und der Verwendung eines öffentlichen/privaten Schlüsselpaares beheben. Dazu öffnen wir das Terminal auf unserem Photobooth-Rechner und geben folgenden Befehl ein, um ein öffentliches/privates Schlüsselpaar zu erzeugen:
sudo -u www-data ssh-keygen -t rsaNach Eingabe unseres root-Passworts werden wir aufgefordert, eine „Passphrase“ anzulegen. Darauf können wir verzichten, drücken also auf Enter und das private/öffentliche Schlüsselpaar wird erzeugt. Beispielhaft sieht das Ganze dann so aus:
frank@photobooth:~$ sudo -u www-data ssh-keygen -t rsa
[sudo] Passwort für frank:
Generating public/private rsa key pair.
Enter file in which to save the key (/var/www/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /var/www/.ssh/id_rsa
Your public key has been saved in /var/www/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:+jjfV4f7NrJeGfsdJgxUR2cFk+IYfsf+fQJDHfk www-data@photobooth
The key's randomart image is:
+---[RSA 3072]----+
|o+.=Oo+o=. |
|+.+Boo *o |
|+=ooo.. . |
|o.=. .E . |
|... + So . |
|. . o .. o |
| . +... = |
| ..= oo + |
| ..+ .. |
+----[SHA256]-----+/var/www/.ssh/ in der Datei id_rsa abgelegt wurde, der öffentliche Schlüssel in der Datei id_rsa.pub. Im nächsten Schritt muss der öffentliche Schlüssel auf den SFTP-Server übertragen werden. Wechseln wir also mit dem www-data User in das Verzeichnis /var/www/.ssh und führen dort folgenden Befehl aus:frank@photobooth:~$sudo -u www-data -s
www-data@photobooth:~$ cd /var/www/.ssh
www-data@photobooth:~/.ssh$ ssh-copy-id -i id_rsa.pub www-data@<server-ip>Ersetzt <server-ip> mit eurer Server-IP/Host-Adresse. Manche Webhosting-Anbieter ermöglichen es, einen öffenlichen Schlüssel über das Kontrollpanel hinzuzufügen. In diesem Fall ist der Aufruf des obigen ssh-copy-id Befehls nicht notwendig; kopiert einfach den Inhalt aus der Datei id_rsa.pub und fügt ihn in die zu erstellende Schlüssel-Datei ein.
Zu guter Letzt müssen müssen wir noch die URL für den QR-Code im Admin-Panel der Photoobooth anpassen. Dazu ersetzen wir den Default-Eintrag /api/download?image= durch die Domain, unter der unsere Webseite im Internet erreichbar ist, gefolgt vom Verzeichnis zum Photobooth-Ordner, den wir im wp-content Ordner angelegt haben. In meiner Konfiguration sieht der Eintrag wie folgt aus:
https://partyboxberlin.com/wp-content/photobooth/event1/Schließlich müssen wir noch dafür sorgen, dass der Dateiname an die URL angehängt wird. Aktiviert also das entsprechende Feld neben dem Eintrag „URL für QR-Code“.