Inleiding: Waarom JWT voor Headless Beveiliging?

Headless betekent dat uw backend uitsluitend data levert, zonder presentatie­laag—bijvoorbeeld een PHP-API die alleen JSON terugstuurt naar een mobiele app of JavaScript-frontend. In zo’n stateless omgeving werkt traditionele sessie­authenticatie niet soepel: de server moet elke request onafhankelijk verwerken zonder gebruikers­sessies bij te houden.

JSON Web Tokens (JWT) bieden een compacte, self-contained en veilige manier om autorisatie­gegevens mee te sturen. De client ontvangt na inloggen een token dat bij elke API-call wordt meegestuurd, waardoor uw backend eenvoudig kan verifiëren of de gebruiker geautoriseerd is.

De Anatomie van een JWT

• Header: Bevat metadata zoals het algoritme (alg) en het type token (typ).
• Payload: Bevat de “claims”—gegevens over de gebruiker (sub), de issuer (iss), en de expiration (exp). U kunt hier ook rollen of permissies toevoegen.
• Signature: Een cryptografische handtekening over header en payload, met uw geheime sleutel, om manipulatie te voorkomen.

Deel 1: De PHP Backend – Een JWT API Bouwen

In dit deel bouwen we de PHP-backend die tokens uitgeeft en valideert. We gebruiken firebase/php-jwt om JWT’s aan te maken en te controleren, en zorgen voor strikte claim- en algoritme­validatie.

• Structuur:
  • api/login.php: Valideert inloggegevens en geeft een JWT (access + refresh) terug.
  • api/refresh.php: Ververst het access token met een geldig refresh token.
  • api/secure-data.php: Beveiligd endpoint; alleen toegankelijk met een geldig access token.
  • .env: Bevat uw geheime sleutels (JWT_SECRET en JWT_REFRESH_SECRET).
• Installatie:
  

  composer require firebase/php-jwt

  
  

1. Token Genereren (login.php)

<?php
require __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;

// Laad geheim uit .env
$secret       = getenv('JWT_SECRET');
$refreshSecret= getenv('JWT_REFRESH_SECRET');

// Valideer gebruiker...
if (validUser($_POST['email'], $_POST['password'])) {
    $now = time();
    $accessPayload = [
        'iss' => 'https://uw-domein.nl',
        'aud' => 'https://uw-domein.nl',
        'iat' => $now,
        'exp' => $now + 900,        // 15 minuten
        'sub' => getUserId(),
        'role'=> 'user'
    ];
    $refreshPayload = [
        'iss' => 'https://uw-domein.nl',
        'aud' => 'https://uw-domein.nl',
        'iat' => $now,
        'exp' => $now + 604800,     // 1 week
        'sub' => getUserId()
    ];
    $accessToken  = JWT::encode($accessPayload, $secret, 'HS256');
    $refreshToken = JWT::encode($refreshPayload, $refreshSecret, 'HS256');
    echo json_encode(['accessToken'=>$accessToken, 'refreshToken'=>$refreshToken]);
    exit;
}
http_response_code(401);
echo json_encode(['error'=>'Ongeldige inloggegevens']);

2. Token Valideren (secure-data.php)

<?php
require __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$secret = getenv('JWT_SECRET');
$auth   = $_SERVER['HTTP_AUTHORIZATION'] ?? '';
if (preg_match('/Bearer\s(\S+)/', $auth, $m)) {
    try {
        $token = $m[1];
        $decoded = JWT::decode($token, new Key($secret, 'HS256'));
        // Controleer iss en aud
        if ($decoded->iss !== 'https://uw-domein.nl' || $decoded->aud !== 'https://uw-domein.nl') {
            throw new Exception('Invalid token issuer or audience');
        }
        echo json_encode(['data'=>'Beveiligde informatie']);
        exit;
    } catch (Exception $e) {
        http_response_code(401);
        echo json_encode(['error'=>'Toegang geweigerd']);
        exit;
    }
}
http_response_code(401);
echo json_encode(['error'=>'Geen token gevonden']);

3. Refresh Endpoint (refresh.php)

<?php
require __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$refreshSecret = getenv('JWT_REFRESH_SECRET');
$body = json_decode(file_get_contents('php://input'), true);
try {
    $decoded = JWT::decode($body['refreshToken'], new Key($refreshSecret, 'HS256'));
    $now = time();
    $newAccess = [
        'iss'=>'https://uw-domein.nl','aud'=>'https://uw-domein.nl',
        'iat'=>$now,'exp'=>$now+900,'sub'=>$decoded->sub
    ];
    $token = JWT::encode($newAccess, getenv('JWT_SECRET'), 'HS256');
    echo json_encode(['accessToken'=>$token]);
} catch (Exception $e) {
    http_response_code(401);
    echo json_encode(['error'=>'Ongeldig refresh token']);
}

Deel 2: De Ionic Vue App – API Communicatie met Axios

In dit deel bouwen we de frontend in Ionic Vue. We installeren Axios, maken een service voor al onze API-calls inclusief refresh-token-rotatie, en implementeren veilige opslag.

1. Secure Storage & Axios Setup

Installeer eerst secure storage plugin voor Capacitor:

npm install @capacitor-community/secure-storage

// src/services/AxiosService.js
import axios from 'axios';
import { SecureStoragePlugin } from '@capacitor-community/secure-storage';

const API_URL = import.meta.env.VITE_API_URL || 'https://www.jouw-domein.nl/api';
const storage = new SecureStoragePlugin();

const axiosInstance = axios.create({ baseURL: API_URL, headers:{'Content-Type':'application/json'} });

axiosInstance.interceptors.request.use(async config => {
  const token = await storage.get({ key:'accessToken' });
  if (token.value) config.headers.Authorization = `Bearer ${token.value}`;
  return config;
});

export default axiosInstance;

2. Login & Token Opslag (LoginPage.vue)

<script setup>
import { SecureStoragePlugin } from '@capacitor-community/secure-storage';
import axiosService from '@/services/AxiosService';
const storage = new SecureStoragePlugin();

async function handleLogin() {
  const resp = await axiosService.post('/login.php', params);
  await storage.set({ key:'accessToken', value:resp.data.accessToken });
  await storage.set({ key:'refreshToken', value:resp.data.refreshToken });
  router.push('/tabs/dashboard');
}
</script>

3. Refresh Logic

In uw interceptor kunt u bij 401 automatisch een refresh-call doen:

axiosInstance.interceptors.response.use(null, async error => {
  if (error.response?.status === 401) {
    const refresh = await storage.get({key:'refreshToken'});
    const { data } = await axios.post('/refresh.php', { refreshToken: refresh.value });
    await storage.set({key:'accessToken', value:data.accessToken});
    error.config.headers.Authorization = `Bearer ${data.accessToken}`;
    return axiosInstance.request(error.config);
  }
  return Promise.reject(error);
});

Best Practices & Veiligheid

• Gebruik altijd HTTPS voor transportbeveiliging.
• Bewaar tokens in veilige opslag (bv. Capacitor Secure Storage), niet in localStorage.
• Implementeer access- en refresh-tokenrotatie voor kortlevende sessies.
• Valideer altijd iss, aud en alg aan serverzijde.
• Beperk token-payload tot minimaal noodzakelijke data.

Conclusie

Deze gids onderstreept dat echte beveiliging begint bij een “security-first” architectuur: korte levensduur tokens, dual-tokenstrategie, veilige client-opslag en strikte server-validatie. Met deze lagenaanpak bouwt u een veerkrachtige, productieklare headless applicatie die bestand is tegen moderne dreigingen.

```

Het bericht Veilige Headless Architectuur met Ionic Vue en een PHP JWT-API verscheen eerst op Utilewebsites.

1. Installeer Vereiste Packages Voeg de benodigde libraries toe aan je project:

npm install pdfjs-dist @capacitor/filesystem @capacitor-community/http

2. Component Code (Web en Mobile)
Voeg de volgende code toe als component in je Ionic Vue-project:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>PDF Viewer</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button @click="downloadAndRenderPdf">Download PDF</ion-button>
      <!-- PDF.js rendering container -->
      <div v-if="pdfUrl">
        <canvas ref="pdfCanvas" style="width: 100%;"></canvas>
      </div>
    </ion-content>
  </ion-page>
</template>

<script>
import { defineComponent, watch } from "vue";
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from "@ionic/vue";
import { Filesystem, Directory } from "@capacitor/filesystem";
import { CapacitorHttp } from "@capacitor/core";
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';

// Set the workerSrc to the imported worker
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url
).toString();

import { Capacitor } from '@capacitor/core';

// Add detailed platform and path logging
const platform = Capacitor.getPlatform();
console.log('Platform detection:', {
  platform,
  isAndroid: platform === 'android',
  isWeb: platform === 'web'
});

export default defineComponent({
  name: "TestpdfPage",
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButton,
  },
  data() {
    return {
      pdfUrl: null, // URL of the PDF to be rendered
    };
  },
  methods: {
    // Method to download and render the PDF
    async downloadAndRenderPdf() {
      try {
        console.log("Starting PDF download process...");

        const pdfUrl = "https://example.com/sample.pdf";
        const fileName = "temp.pdf";
        const dirPath = "downloaded";
        const savedFilePath = `${dirPath}/${fileName}`;

        console.log("Downloading PDF using CapacitorHttp from:", pdfUrl);

        // Clean up the existing directory
        try {
          await Filesystem.rmdir({
            path: dirPath,
            directory: Directory.Data,
            recursive: true,
          });
          console.log("Cleaned up existing directory");
        } catch (e) {
          console.log("No existing directory to clean up");
        }

        // Download PDF using native HTTP
        const response = await CapacitorHttp.get({
          url: pdfUrl,
          responseType: "arraybuffer",
        });

        console.log("Download response:", response);

        // Check if response.data is a string (Base64) or an ArrayBuffer
        let base64Data;
        if (typeof response.data === 'string') {
          // Data is already Base64-encoded
          base64Data = response.data;
          console.log("Received data is a Base64 string");
        } else {
          // Convert ArrayBuffer to Base64
          base64Data = this.arrayBufferToBase64(response.data);
          console.log("Converted ArrayBuffer to Base64");
        }

        console.log("Base64 data length:", base64Data.length);

        // Save to device storage
        try {
          await Filesystem.mkdir({
            path: dirPath,
            directory: Directory.Data,
            recursive: true,
          });
          console.log("Created directory for PDF");

          await Filesystem.writeFile({
            path: savedFilePath,
            data: base64Data,
            directory: Directory.Data,
          });

          console.log("File saved locally");

          // Check if the file exists and get its size
          const fileStat = await Filesystem.stat({
            path: savedFilePath,
            directory: Directory.Data,
          });

          console.log("File exists:", fileStat.uri);
          console.log("File size in bytes:", fileStat.size);

          if (fileStat.size === 0) {
            console.error("Downloaded file is empty.");
            return;
          }

          // Set the PDF URL to display it
          this.pdfUrl = "data:application/pdf;base64," + base64Data;
        } catch (fsError) {
          console.error("Filesystem Error:", fsError);
          throw fsError;
        }
      } catch (error) {
        console.error("Operation Failed:", error);
      }
    },
    // Method to render the PDF on a canvas
    async renderPdf() {
      console.log("Starting PDF rendering process...");

      const canvas = this.$refs.pdfCanvas;
      if (!canvas) {
        console.error("Canvas element not found");
        return;
      }
      console.log("Canvas element found");

      const ctx = canvas.getContext("2d");
      if (!ctx) {
        console.error("Failed to get 2D context");
        return;
      }
      console.log("2D context obtained");

      try {
        const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise;
        console.log("PDF document fetched successfully");

        const page = await pdf.getPage(1);
        console.log("Page 1 of PDF document fetched successfully");

        const viewport = page.getViewport({ scale: 1.5 });
        console.log("Viewport created with scale 1.5");

        canvas.width = viewport.width;
        canvas.height = viewport.height;
        console.log("Canvas dimensions set to width:", viewport.width, "height:", viewport.height);

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };

        console.log("Starting PDF page render");
        await page.render(renderContext).promise;
        console.log("PDF rendered successfully");
      } catch (error) {
        console.error("Error rendering PDF:", JSON.stringify(error, Object.getOwnPropertyNames(error)));
      }
    },
    // Helper method to convert ArrayBuffer to Base64
    arrayBufferToBase64(buffer) {
      let binary = "";
      const bytes = new Uint8Array(buffer);
      const len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return btoa(binary);
    },
  },
  watch: {
    // Watcher to render the PDF when the URL changes
    pdfUrl(newUrl) {
      if (newUrl) {
        this.$nextTick(() => {
          this.renderPdf();
        });
      }
    }
  }
});
</script>

3. Toelichting

• HTTP Plugin: Hiermee download je bestanden veilig en effectief op mobiele apparaten.
• Filesystem Plugin: Hiermee sla je bestanden lokaal op in de Documents-directory, essentieel voor Android/iOS.
• PDF.js: Verantwoordelijk voor het renderen van PDF's in een canvas-element.

4. Compatibiliteit

• Android/iOS: Zorg ervoor dat je permissies instelt voor bestandstoegang in je AndroidManifest.xml en Info.plist.
• Web: PDF.js werkt direct met een externe URL zonder dat lokale opslag nodig is.

Het bericht Stappen om een PDF te downloaden en weer te geven in een Ionic Vue-app (Android/iOS): verscheen eerst op Utilewebsites.

Een mogelijk opzet wordt hier beschreven Ionic & Vue : https://ionicframework.com/docs/vue/quickstart

Er is een video tutorial : https://www.youtube.com/watch?v=mQ4zmFy4d7Y

Voor de Api calls/data/database/backend zou men laraval kunnen gebruiken. Installatie zie hier : https://laravel.com/docs/8.x

Het bericht Ionic, Vue, Laravel verscheen eerst op Utilewebsites.