Laravel 1 | Basis | Nog in ontwikkeling

Laravel Authenticatie & Packages

Les 1: Wat zijn Laravel packages?

🎯 Leerdoelen

📖 Uitleg

In de vorige Laravel module heb je code geschreven voor je Game Collection app. Soms wil je functionaliteit toevoegen aan je Laravel applicatie, die iemand anders al heeft gebouwd. Zoals een inlogsysteem, een betalingssysteem of hulpmiddelen voor debuggen. Hiervoor gebruik je packages.

Een package is een kant-en-klaar stuk code dat je kunt installeren in je Laravelproject. Je kunt het vergelijken met een plug-in in WordPress of een extensie in VS Code. Iemand anders heeft de code geschreven, getest en beschikbaar gemaakt. Jij hoeft het alleen te installeren en te gebruiken.

Composer is de package manager voor PHP. Net zoals npm dat is voor JavaScript, beheert Composer alle packages in je (PHP / Laravel) project. Wanneer je een package installeert, downloadt Composer de code naar Laravel en plaatst deze in de map vendor/.

composer.json

In het bestand composer.json staat een lijst van alle packages die je project gebruikt.

💡 Let op: Packages die alleen handig zijn tijdens het programmeren, zoals een debugger, installeer je met --dev. Packages die nodig zijn op de live website, zoals een inlogsysteem, installeer je zonder --dev.

🛠️ Opdracht – Laravel Debugbar installeren

Installeer je eerste package: Laravel Debugbar. Deze tool toont onderin je browser informatie over je applicatie, zoals databasequeries, laadtijd, routes en gebruikte views.

composer require barryvdh/laravel-debugbar --dev

💡 Let op: De Debugbar is alleen zichtbaar als APP_DEBUG=true in je .env-bestand staat. Op een live website zet je dit op false. Controleer dit eerst!

Start je server met php artisan serve en open je applicatie in de browser. Onderin zie je de Debugbar verschijnen.

🛠️ Commit met het bericht Debugbar package geïnstalleerd en Sync via Source Control.

📦 Inleveren

Les 2: Authenticatie met Laravel Breeze

🎯 Leerdoelen

📖 Uitleg

Authenticatie is controleren of jij echt bent wie je zegt dat je bent. Dit gebeurt meestal met een e-mailadres en wachtwoord. Hierdoor kan een applicatie bepalen welke gebruiker is ingelogd.

Laravel Breeze is een officiële package van Laravel die een compleet authenticatiesysteem toevoegt. Na installatie heb je pagina's voor registreren, inloggen, uitloggen, wachtwoord vergeten en een dashboard.

🛠️ Opdracht – Laravel Breeze installeren

Voer de volgende commando's uit in je terminal:

composer require laravel/breeze --dev
php artisan breeze:install blade

Kies bij eventuele opties voor de standaardopties door op Enter te drukken.

npm install
npm run build
php artisan migrate

💡 Let op: Breeze overschrijft je routes

Na het installeren van Laravel Breeze kan het gebeuren dat je bestaande bestand routes/web.php wordt aangepast of deels wordt overschreven. Hierdoor kunnen routes die je eerder hebt gemaakt, bijvoorbeeld voor je Game Collection CRUD, verdwijnen.

Gebruik daarom na de installatie van Breeze altijd de Git Difference View in Source Control. Hiermee kun je precies zien welke regels zijn toegevoegd, gewijzigd of verwijderd.

Zie je dat oude routes zijn verdwenen? Kopieer deze routes dan terug uit de oude versie en combineer ze met de nieuwe Breeze-routes. Zo behoud je je bestaande CRUD-routes én voeg je de authenticatie van Breeze toe.

Start je server met php artisan serve en open http://localhost:8000. Rechtsboven zie je de links Log in en Register.

🛠️ Registreer twee gebruikers:

Kies zelf een wachtwoord van minimaal 8 tekens en onthoud dit wachtwoord.

🛠️ Opdracht - Commit 

Commit met het bericht 'Breeze authenticatie geïnstalleerd' en Sync via Source Control.

📦 Inleveren

Les 3: Middleware: pagina’s beschermen

🎯 Leerdoelen

📖 Uitleg

Middleware is een filter dat wordt uitgevoerd voordat een pagina wordt getoond. Je kunt het vergelijken met een beveiliger bij de ingang: voordat je binnenkomt, wordt gecontroleerd of je een geldig pasje hebt.

Laravel heeft standaard de auth-middleware. Deze controleert of een gebruiker is ingelogd. Is dat niet zo, dan wordt de gebruiker doorgestuurd naar het inlogscherm.

Dit regel je in je routes bestand. /routes/web.php

// Alleen ingelogde gebruikers mogen het dashboard zien
Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth');

Je kunt ook meerdere routes tegelijk beschermen met een groep:

Route::middleware('auth')->group(function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    });

    Route::get('/profiel', function () {
        return view('profiel');
    });
});

💡 Let op: Test dit in een incognito-venster. Ga naar /dashboard, log in en probeer het opnieuw.

🛠️ Opdracht – Route /geheim beveiligen

1. Maak een nieuwe route /geheim met een simpele Blade-view en bescherm deze route met de auth-middleware.
2. Commit met het bericht Middleware auth toegepast en Sync via Source Control.

📦 Inleveren

Les 4: Game Collection achter een login

🎯 Leerdoelen

📖 Uitleg

Je gaat je bestaande Game Collection CRUD beveiligen met de auth-middleware. Iedereen mag het overzicht bekijken, maar alleen ingelogde gebruikers mogen games toevoegen, bewerken en verwijderen.

Beveiligingsregels:

// Iedereen mag het overzicht zien
Route::get('/games', [GameController::class, 'index']);

// Alleen ingelogde gebruikers
Route::middleware('auth')->group(function () {
    Route::get('/games/create', [GameController::class, 'create']);
    Route::post('/games/store', [GameController::class, 'store']);
    Route::get('/games/edit/{id}', [GameController::class, 'edit']);
    Route::post('/games/update/{id}', [GameController::class, 'update']);
    Route::post('/games/destroy/{id}', [GameController::class, 'destroy']);
});

💡 Let op: Het is niet erg als niet-ingelogde bezoekers de knoppen Edit en Delete nog zien. Als ze klikken, worden ze doorgestuurd naar het inlogscherm.

🛠️ Opdracht – Game Collection beveiligen

1. Pas de routes van je Game Collection aan zodat create, update en delete beschermd zijn met auth-middleware.
   
2. Commit met het bericht Games CRUD beveiligd met auth en Sync via Source Control.

📦 Inleveren

Les 5: Spatie Permission installeren

🎯 Leerdoelen

📖 Uitleg

Authenticatie betekent: wie ben jij? Autorisatie betekent: wat mag jij doen? Een admin mag bijvoorbeeld alles, terwijl een klant alleen mag bekijken.

Rollen vertegenwoordigen een groep gebruikers, zoals admin, klant of editor. Permissies zijn acties die aan rollen worden toegewezen, zoals product bekijken of product verwijderen.

🛠️ Opdracht – Spatie Laravel Permission installeren

Voer de volgende commando's uit:

composer require spatie/laravel-permission
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
php artisan migrate

Open app/Models/User.php en voeg de trait toe:

// Bovenaan bij de andere use-statements:
use Spatie\Permission\Traits\HasRoles;

// In de class:
class User extends Authenticatable
{
    use HasFactory, Notifiable, HasRoles;
}

Na de migratie zijn er vijf belangrijke tabellen aangemaakt:

🛠️Commit met het bericht Spatie Permission geïnstalleerd en Sync via Source Control.

📦 Inleveren

Les 6: Rollen en permissies instellen

🎯 Leerdoelen

📖 Uitleg

In deze les stel je via phpMyAdmin de rollen en permissies in je database in. Later bouw je hiervoor een webinterface, maar eerst leer je hoe de tabellen samenwerken.

🛠️ Opdracht – Rollen en permissies koppelen

Stap 1: Rollen aanmaken

⚠️ Let op: Vul bij guard_name altijd web in.

Stap 2: Permissies aanmaken

Stap 3: Permissies koppelen aan rollen

Klant (role_id = 1) mag producten bekijken en bestellen.

Admin (role_id = 2) mag alles.

Stap 4: Rollen koppelen aan gebruikers

💡 Let op: Kijk in de tabel users naar de id van het klant-account en het admin-account. Deze id's gebruik je als model_id.

🛠️ Opdracht - voer alle gegevens in de database, zoals die in bovenstaande tabellen staan.

📦 Inleveren

Les 7: Blade directives: @role en @can

🎯 Leerdoelen

📖 Uitleg

Nu je rollen en permissies hebt ingesteld, kun je deze gebruiken in je Blade-views. Hiermee toon of verberg je onderdelen op basis van de rol of permissies van de ingelogde gebruiker.

Op basis van rollen: @role

@role('admin')
    <p>Welkom beheerder! Je hebt volledige toegang.</p>
@endrole

@role('klant')
    <p>Welkom klant! Je kunt producten bekijken en bestellen.</p>
@endrole

Op basis van permissies: @can en @cannot

@can('product aanpassen')
    <a href="/product/edit/{{ $product->id }}" class="btn btn-primary">
        Bewerken
    </a>
@endcan

@cannot('product aanpassen')
    <p>Je hebt geen rechten om dit product aan te passen.</p>
@endcannot

💡 Let op: Gebruik @can voor specifieke acties, zoals knoppen verbergen. Gebruik @role voor grotere secties, zoals een menu.

🛠️ Opdracht – Knoppen tonen per rol

1. Pas de overzichtspagina van je Game Collection aan.
2. Gebruikers met de rol klant zien geen knoppen voor toevoegen, bewerken of verwijderen.
3. Gebruikers met de rol admin zien alle knoppen.
4. Commit met het bericht Blade directives role en can en Sync via Source Control.

📦 Inleveren

Les 8: Route middleware voor rollen

🎯 Leerdoelen

📖 Uitleg

In de vorige les heb je onderdelen op een pagina verborgen met Blade directives. Maar een slimme gebruiker kan nog steeds een URL rechtstreeks intypen. Daarom beveilig je nu ook de routes op basis van rollen en permissies.

Role middleware in routes

// Alleen admins mogen naar het admin-dashboard
Route::get('/admin/dashboard', function () {
    return view('admin.dashboard');
})->middleware('role:admin');

// Zowel admins als klanten mogen deze pagina zien
Route::get('/catalogus', function () {
    return view('catalogus');
})->middleware('role:admin|klant');

Permission middleware in routes

Route::get('/product/create', [ProductController::class, 'create'])
    ->middleware('permission:product invoeren');

// Meerdere permissies toestaan
->middleware('permission:product bekijken|bestellingen bekijken');

Groepen van routes

Route::middleware(['auth', 'role:admin'])->group(function () {
    Route::get('/admin/dashboard', [AdminController::class, 'index']);
    Route::get('/admin/users', [AdminController::class, 'users']);
});

Route::middleware(['auth', 'role:klant'])->group(function () {
    Route::get('/bestellingen', [OrderController::class, 'index']);
});

⚠️ Let op: Als een gebruiker niet de juiste rol of permissie heeft, toont Laravel een 403 Forbidden-pagina. Dit is normaal gedrag.

🛠️ Opdracht – Game Collection beveiligen met rollen

1. Pas de routes van je Game Collection aan zodat klanten alleen het game-overzicht kunnen bekijken en admins op alle pagina's kunnen komen.
2. De klant mag alleen het game-overzicht bekijken.
3. De admin mag op alle pagina's komen.
4. Commit met het bericht Route middleware rollen en permissies en Sync via Source Control.

📦 Inleveren

Les 9: Eindopdracht – Beheeromgeving

🎯 Leerdoelen

📖 Uitleg

Tot nu toe heb je rollen en permissies handmatig ingevoerd via phpMyAdmin. Dat is niet handig als je veel rollen, permissies en gebruikers hebt. Daarom bouw je als eindopdracht een beheeromgeving waar alleen admins bij kunnen.

De beheeromgeving bestaat uit vier CRUD's:

Extra eisen

💡 Let op: Bouw de CRUD's één voor één. Begin met de eenvoudigste CRUD, bijvoorbeeld permissies beheren, en commit na elke werkende CRUD.

🛠️ Opdracht – Beheeromgeving bouwen

1. Bouw een beheeromgeving waarin de admin rollen, permissies en koppelingen kan beheren via de browser.
2. Bouw de vier CRUD's in de beheeromgeving.
3. Maak een navigatiemenu met links naar de vier overzichtspagina's.
4. Beveilig alle beheer-routes met role:admin-middleware.

📦 Inleveren