I have 2 Servers. One that serves the Javascript Site to the Client and one that handels the Private Stuff.
The Client should Scan an QR Code an send the Content (something like 044d-9ed1-473c) to the Backend Server. (For Testing 10.1.1.120). If the Backend says true, the page will be green for 200ms and you can scan the next Voucher. Else it will be Red for 400ms. EASY.
Here is my Code. (The PHP worked as it was GET and I only Changed GET to POST)The “API-Server”
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
error_reporting(E_ALL);
ini_set("error_reporting", E_ALL);
function checkCouponValidity($searchCode, &$codes) {
foreach ($codes as &$coupon) {
if ($coupon['Code'] == $searchCode) {
if ($coupon["valid"] == true){
$coupon["valid"] = false;
$coupon["invalid_timestamp"] = date("D, d M Y H:i:s", time());
return true; // Coupon gefunden und gültig
}
}
}
return false; // Coupon nicht gefunden oder ungültig
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Annahme: Die JSON-Datei enthält einen Array von Objekten
$codes = json_decode(file_get_contents("codes.json"), true);
$requestData = json_decode(file_get_contents('php://input'), true);
if ($codes !== null && isset($requestData["qrCode"])) {
$searchCode = $requestData["qrCode"];
if (checkCouponValidity($searchCode, $codes)) {
// Jetzt kannst du $codes zurück in die JSON-Datei schreiben
file_put_contents("codes.json", json_encode($codes, JSON_PRETTY_PRINT));
echo json_encode(array("isValid" => true));
} else {
echo json_encode(array("isValid" => false));
}
} else {
echo json_encode(array("error" => "Fehler beim Verarbeiten der Anfrage."));
}
} else {
echo json_encode(array("error" => "Ungültige Anfragemethode."));
}
?>
And Here for my Frontend:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="body">
<video id="qr-video" width="100%" height="100%"></video>
<div id="qr-result"></div>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
let scanner = new Instascan.Scanner({
video: document.getElementById('qr-video'),
mirror: false, // Füge diese Option hinzu, um die Spiegelung der Kamera zu deaktivieren
facingMode: 'environment' // Füge diese Option hinzu, um die Kamera auf der Rückseite des Geräts zu verwenden
});
scanner.addListener('scan', function (content) {
// Hier kannst du die gescannten Daten verwenden und eine Anfrage an deinen API-Server senden
checkQRCodeValidity(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[1]); // Ändere die Indexnummer entsprechend der verfügbaren Kameras
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
});
function checkQRCodeValidity(qrCodeContent) {
// Hier sollte die Logik für die Überprüfung des QR-Codes auf dem Server implementiert werden
// Du kannst eine Ajax-Anfrage verwenden, um die Überprüfung durchzuführen
// Beispiel mit Fetch-API:
fetch('http://10.1.1.120/codeCheck/v1/index.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ qrCode: qrCodeContent }),
})
.then(response => response.json())
.then(data => {
// Hier kannst du die Antwort des Servers verarbeiten
document.getElementById('qr-result').innerText = data.isValid ? validCode() : inValideCode();
})
.catch(error => {
console.error('Error:', error);
document.getElementById('qr-result').innerText = 'Fehler bei der Überprüfung des QR-Codes';
inValideCode();
});
}
function validCode(){
document.getElementById("body").style.backgroundColor = "green"
navigator.vibrate(200)
setTimeout(reset, 200)
}
function inValideCode(){
document.getElementById("body").style.backgroundColor = "red"
navigator.vibrate(400)
setTimeout(reset,400)
}
function reset(){
document.getElementById("body").style.backgroundColor = "blue"
}
</script>
</body>
</html>
I got an error, but can’t really debug it on mobile. I got an Browser like Eruda to see the console, JavaScript only says Type error. So I ask ChatGPT and yeeeeeees…. 2h later I’m got not a single step forward. It convinced me to rewrite my Code from easy GET to POST idk. The Big World Wide Web don#t rescued me. I made it on booth sides and now I’m Stuck I have no Clue what to do.
I think its an really easy error and its my blindheit.
<3 Thank you!
