AI en studiekeuze

Een Firebase account maken

Inleiding

Om onze webapp te beveiligen, gebruiken we Firebase Authentication. Daarmee kunnen gebruikers inloggen en wordt de database alleen toegankelijk voor wie toestemming heeft.

Om je webapp te beveiligen, heb je een Firebase-account nodig. Firebase is een dienst van Google die allerlei kant-en-klare functies aanbiedt, waaronder inloggen en uitloggen met e-mail en wachtwoord.

Maak een account
  • Ga naar firebase
  • Klik op Get Started en log in met je Google-account (gebruik bij voorkeur je schoolaccount).
Maak een project aan
  • Klik op Add Project.
  • Geef het project een herkenbare naam (bijvoorbeeld inloggen-studiekeuze).
  • Zet Google Analytics uit (dat is voor deze opdracht niet nodig).
Instellingen van het project
  • In het menu links kies je Authentication.
  • Klik op Get Started.
  • Zet de optie E-mail/wachtwoord aan.
  • Eventueel kun je ook Google login aanzetten, zodat je met een Google-account kunt inloggen.
Webapp koppelen
  • Ga naar Project Settings → tabblad General.
  • Klik op Add App → kies Web (het </> icoon).
  • Geef de app een naam en klik op Register App.

Je krijgt nu een configuratiecode met allemaal gegevens zoals apiKey, authDomain, projectId enzovoort.

Die code plak je in een nieuw JavaScript-bestand. 
Daarmee weet jouw webapp welk Firebase-project hij moet gebruiken.

Geef dit bestande de naam firebase-config.js en sla het op in de map van jouw project op je laptop.

Vergeet niet om in de headsectie van je HTML-bestand  het nieuwe JS-bestand te koppelen.

 

Een lokale server gebruiken

Wat en waarom?

Als je werkt met Firebase en JavaScript, kun je de bestanden meestal niet zomaar openen door te dubbelklikken op je index.html. Dat werkt voor kleine scripts, maar niet wanneer er verbinding moet worden gemaakt met externe diensten zoals Firebase. De browser blokkeert sommige functies (zoals authenticatie of het ophalen van gegevens) als je geen server gebruikt.
Daarom gaan we werken met een lokale server. Dat is een klein programma dat je laptop even laat spelen alsof hij een echte webserver is. Zo kun je jouw webapp op een veilige manier testen voordat je hem online zet.

Voor Apple (macOS)
  • Zorg dat Python 3 op je Mac staat. Meestal is dit al standaard geïnstalleerd. Zo niet, download dit via python
  • Open Terminal. Rechtse muisklip op de map van je project
    kies: Nieuw Terminal-venster bij map
  • Ga met cd naar de map waarin jouw projectbestanden staan, bijvoorbeeld: cd ~/Desktop/inloggen of cd ~/Documents/inloggen
    Inloggen is in dit voorbeeld de naam van de projectmap
    Klik Enter
  • Start een eenvoudige server met: python3 -m http.server
    Klik Enter
  • Open je browser en ga naar: http://localhost:8000
    Je webapp draait nu via de server en kan met Firebase praten.

Tip: Sluit de server af door in de terminal op Ctrl + C te drukken

Voor Windows
  • Controleer of Python 3 geïnstalleerd is. Zo niet, download dit via python
  • Open Opdrachtprompt (cmd) of PowerShell.
  • Ga met cd naar de map waarin jouw projectbestanden staan, bijvoorbeeld: cd C:\Users\jouwnaam\Desktop\inloggen
  • Start de server met: python -m http.server
  • Open je browser en ga naar: http://localhost:8000
    Je webapp draait nu via de server en kan met Firebase praten.

Tip: Sluit de server af door in de opdrachtprompt op Ctrl + C te drukken

De verificatie code

Importeren van functies

Bovenaan het script worden twee functies opgehaald uit de Firebase-bibliotheek: initializeApp en getAuth.

  • Met initializeApp start je Firebase op.
  • Met getAuth krijg je toegang tot alles wat met inloggen en uitloggen te maken heeft.
Projectgegevens vastleggen

Daarna staat er een variabele firebaseConfig.
Dit blokje bevat de gegevens van jouw eigen Firebase-project.
Die gegevens krijg je van Firebase zodra je een project aanmaakt.
Met deze gegevens kan Firebase zien: “Dit script hoort bij dat specifieke project.”
Belangrijk: deze gegevens zijn zichtbaar in je script, maar dat is niet erg. De echte geheime sleutels (private keys) staan alleen veilig in de Firebase-console.

Firebase starten

In de variabele app wordt Firebase aangezet voor jouw project.
Dit noem je initialiseren: dat betekent letterlijk “aanzetten met de juiste instellingen uit firebaseConfig”.

Authenticatie klaarmaken

Daarna wordt de variabele auth gemaakt.
Hierin plaatst Firebase alle functies die je later nodig hebt voor inloggen, uitloggen en accounts aanmaken.
Omdat auth wordt geëxporteerd, kan dit ook in een ander script gebruikt worden, bijvoorbeeld in het bestand waar je de knoppen en formulieren maakt.

				
					import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-app.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-auth.js";


const firebaseConfig = {
  apiKey: "Jouw-API-key", 
  authDomain: "inloggen-studiekeuze.firebaseapp.com",
  projectId: "inloggen-studiekeuze",
  storageBucket: "inloggen-studiekeuze.appspot.com", 
  messagingSenderId: "Jouw-messagingSenderId",
  appId: "Jouw-appId",
  measurementId: "Jouw-measurementId"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

De inlog code

Importeren van functies

Helemaal bovenin worden verschillende functies uit de Firebase-bibliotheek gehaald. Het gaat om functies voor inloggen, uitloggen, een account maken, een wachtwoord resetten, inloggen met Google en het bijhouden van de status van een gebruiker.

Daarnaast wordt de variabele auth geïmporteerd. Deze komt uit het ander bestand firebase-config.js waarin jouw projectinstellingen staan.

Wachten tot de pagina klaar is

Met de functie $(document).ready() wordt ervoor gezorgd dat de rest van het script pas wordt uitgevoerd als de hele webpagina is geladen.

Account aanmaken

Als iemand op de knop signup-btn klikt, pakt het script de ingevulde e-mail en het wachtwoord uit de invoervelden.
Met de functie createUserWithEmailAndPassword die je hierboven hebt geimporteerd wordt een account aangemaakt in Firebase.
Daarna wordt automatisch met sendEmailVerification een mail gestuurd zodat de gebruiker zijn e-mailadres kan bevestigen.

Inloggen met e-mail en wachtwoord

Als iemand op de knop login-btn klikt, haalt het script de ingevulde gegevens op.
Met de functie signInWithEmailAndPassword probeert Firebase de gebruiker in te loggen.
Er wordt meteen gecontroleerd of het e-mailadres geverifieerd is. Zo ja, dan wordt de showUser-functie (helemaal onderaan het script) aangeroepen en ziet de gebruiker zijn eigen sectie. Zo niet, dan krijgt de gebruiker een melding en wordt hij direct weer uitgelogd met signOut.

Inloggen met Google

Als iemand klikt op google-login-btn, wordt er een GoogleAuthProvider aangemaakt.
Met de functie signInWithPopup opent er een Google-venster waarin de gebruiker kan kiezen met welk account hij wil inloggen. Na een succesvolle login wordt opnieuw showUser aangeroepen.

Uitloggen

Bij een klik op logout-btn wordt signOut gebruikt om de gebruiker uit te loggen.

Automatisch status bijhouden

De functie onAuthStateChanged wordt altijd uitgevoerd zodra er iets verandert in de inlogstatus. Bijvoorbeeld: na een herlaad van de pagina.
Als er een gebruiker is ingelogd en die is geverifieerd (of via Google binnengekomen), dan wordt showUser aangeroepen. Anders wordt het inlogformulier weer zichtbaar gemaakt.

Wachtwoord herstellen

Als de gebruiker op de link reset-password-link klikt, wordt eerst gecontroleerd of er een e-mailadres is ingevuld.

Met de functie sendPasswordResetEmail stuurt Firebase daarna een mailtje om het wachtwoord opnieuw in te stellen.

Gebruiker tonen

De functie showUser bepaalt wat er in de interface zichtbaar is. Als iemand ingelogd is, verdwijnt het inlogformulier en komt er een welkomsbericht met het e-mailadres van de gebruiker in beeld.

NB:

Omdat Firebase een streng beveiligde omgeving is, kan het voorkomen dat sommige functies – zoals het resetten van wachtwoorden – niet altijd werken in elke situatie. Vooral bij lokaal testen (op je eigen laptop, via localhost) kunnen bepaalde e-mails of acties geblokkeerd worden. In een online omgeving (gepubliceerde website met HTTPS) werkt dit doorgaans wel goed.

				
					import {
  sendPasswordResetEmail,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  sendEmailVerification,
  signOut,
  onAuthStateChanged,
  signInWithPopup,
  GoogleAuthProvider
} from "https://www.gstatic.com/firebasejs/10.5.2/firebase-auth.js";

import { auth } from "./firebase-config.js";

$(document).ready(function () {
  $('#signup-btn').click(() => {
    const email = $('#email').val();
    const password = $('#password').val();

    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        sendEmailVerification(userCredential.user);
        $('#status-msg').text('Verificatiemail verzonden. Check je inbox!');
      })
      .catch((error) => {
        $('#status-msg').text(error.message);
      });
  });

  $('#login-btn').click(() => {
    const email = $('#email').val();
    const password = $('#password').val();

    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        if (user.emailVerified) {
          showUser(user);
        } else {
          $('#status-msg').text('Bevestig eerst je e-mailadres via de verificatiemail.');
          signOut(auth);
        }
      })
      .catch((error) => {
        $('#status-msg').text(error.message);
      });
  });

  $('#google-login-btn').click(() => {
    const provider = new GoogleAuthProvider();

    signInWithPopup(auth, provider)
      .then((result) => {
        const user = result.user;
        showUser(user);
      })
      .catch((error) => {
        $('#status-msg').text(error.message);
      });
  });

  $('#logout-btn').click(() => {
    signOut(auth);
  });

  onAuthStateChanged(auth, (user) => {
    if (user && (user.emailVerified || user.providerData[0].providerId === "google.com")) {
      showUser(user);
    } else {
      $('#auth-section').show();
      $('#user-section').hide();
    }
  });

  $('#reset-password-link').click((e) => {
    e.preventDefault();
    const email = $('#email').val();

    if (!email) {
      $('#status-msg').text('Vul eerst je e-mailadres in.');
      return;
    }

    sendPasswordResetEmail(auth, email)
      .then(() => {
        $('#status-msg').text('Er is een herstelmail verzonden naar: ' + email);
      })
      .catch((error) => {
        $('#status-msg').text(error.message);
      });
  });

  function showUser(user) {
    $('#auth-section').hide();
    $('#user-section').show();
    $('#user-email').text(user.email);
    $('#status-msg').text('');
  }
});

Voorbeeld

Als alles goed is gegaan, kun je nu een account aanmaken, inloggen en weer uitloggen.

De logische volgende stap is om deze inlogmogelijkheid te koppelen aan jouw eigen script, waarin je de resultaten van je onderzoek naar AI en studiekeuze hebt verwerkt.
Op die manier zorg je ervoor dat alleen ingelogde gebruikers toegang hebben tot de onderzoeksgegevens en dat de informatie veilig en afgeschermd blijft.

Login met Firebase

of

Wachtwoord vergeten?