Πώς γίνεται η διαδικασία πιστοποίησης;

Η διαδικασία πιστοποίησης χρήστη σε μια frontend εφαρμογή αποτελεί γενικά από τα ακόλουθα βήματα:

1. Αίτημα διαπιστευτηρίων: Ο χρήστης εισάγει το όνομα χρήστη και τον κωδικό πρόσβασης σε μια φόρμα στον ιστότοπο ή στην εφαρμογή.
2. Αποστολή δεδομένων στον διακομιστή: Το frontend στέλνει αυτά τα δεδομένα στον διακομιστή (backend) μέσω ενός αιτήματος HTTP (συνήθως POST) σε ένα ειδικό endpoint πιστοποίησης. Τα δεδομένα μπορούν να αποσταλούν σε μορφή JSON ή FormData.
3. Έλεγχος δεδομένων στον διακομιστή: Το backend λαμβάνει τα δεδομένα, τα ελέγχει αν υπάρχουν στη βάση δεδομένων του (π.χ. αν το όνομα χρήστη αντιστοιχεί σε έναν υπάρχοντα χρήστη και αν το hash του εισαγόμενου κωδικού ταιριάζει με το hash στη βάση).
4. Δημιουργία token/συνεδρίας: Αν τα διαπιστευτήρια είναι σωστά, ο διακομιστής δημιουργεί ένα μοναδικό token πιστοποίησης. Αυτό μπορεί να είναι:
   • ID συνεδρίας: Ο διακομιστής δημιουργεί μια συνεδρία και την συνδέει με τον χρήστη, στέλνοντας στον πελάτη τον αναγνωριστικό της συνεδρίας (π.χ. σε ένα cookie HttpOnly).
   • Token (π.χ. JWT): Ο διακομιστής δημιουργεί ένα token που περιέχει πληροφορίες για τον χρήστη και τα δικαιώματά του, υπογράφοντάς το με το μυστικό κλειδί του. Αυτό το token αποστέλλεται στον πελάτη.
5. Αποστολή του token/συνεδρίας στον πελάτη: Ο διακομιστής απαντά στο frontend στέλνοντας το δημιουργημένο token πιστοποίησης.
   • Αν χρησιμοποιείται ID συνεδρίας, αυτό συνήθως αποστέλλεται μέσω της κεφαλίδας Set-Cookie.
   • Αν χρησιμοποιείται token, μπορεί να αποσταλεί στο σώμα της απάντησης (JSON) ή στην κεφαλίδα Authorization (Bearer <token>).
6. Αποθήκευση του token στον πελάτη: Το frontend λαμβάνει το token και το αποθηκεύει για μελλοντικά αιτήματα.
   • Το ID συνεδρίας αποθηκεύεται αυτόματα στα cookies του browser.
   • Το token μπορεί να αποθηκευτεί σε localStorage, sessionStorage ή cookies (HttpOnly flag). Συνιστάται η χρήση HttpOnly cookies για τα tokens πρόσβασης, καθώς μειώνει τον κίνδυνο κλοπής μέσω XSS. Για JWT, μπορεί επίσης να αποθηκευτεί το refresh token σε HttpOnly cookies.
7. Χρήση του token για προστατευμένα αιτήματα: Κατά την εκτέλεση επόμενων αιτημάτων σε προστατευμένους πόρους (που απαιτούν πιστοποίηση), το frontend στέλνει το αποθηκευμένο token σε κάθε αίτημα.
   • Για συνεδρίες, ο browser αποστέλλει αυτόματα τα σχετικά cookies.
   • Για tokens, το frontend πρέπει ρητά να προσθέσει το token στην κεφαλίδα Authorization (Authorization: Bearer <token>).
8. Έλεγχος του token στον διακομιστή: Κατά την λήψη κάθε αιτήματος σε προστατευμένο πόρο, ο διακομιστής εξάγει το token από το αίτημα και το ελέγχει για αυθεντικότητα (π.χ. διάρκεια, υπογραφή, ύπαρξη συνεδρίας με το συγκεκριμένο ID).
9. Εξουσιοδότηση: Αν το token είναι έγκυρο, ο διακομιστής προσδιορίζει τον χρήστη που συνδέεται με αυτό το token και ελέγχει τα δικαιώματά του για τον ζητούμενο πόρο.
10. Εκτέλεση του αιτήματος: Αν ο χρήστης είναι πιστοποιημένος και εξουσιοδοτημένος, ο διακομιστής εκτελεί το αίτημα και στέλνει την απάντηση. Διαφορετικά, στέλνει σφάλμα (401 Unauthorized ή 403 Forbidden).

Τα σχήματα πιστοποίησης διαφέρουν (βάσει συνεδριών, JWT tokens, OAuth2, OpenID Connect κ.ά.), αλλά τα βασικά βήματα για την απόκτηση και χρήση του token για ταυτοποίηση χρήστη παραμένουν παρόμοια.

Παράδειγμα αποστολής δεδομένων στον διακομιστή με fetch API και token:

// Δεδομένα χρήστη
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Αποστολή δεδομένων
fetch('/api/login', { // Το endpoint πιστοποίησης
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Αποτυχία εισόδου');
  }
  return response.json(); // Αναμένουμε JSON με token
})
.then(data => {
  const authToken = data.token; // Λαμβάνουμε το token από την απάντηση
  localStorage.setItem('authToken', authToken); // Αποθηκεύουμε το token
  console.log('Επιτυχής εισοδος, το token αποθηκεύτηκε.');
  // Ανακατεύθυνση χρήστη σε προστατευμένη σελίδα
})
.catch(error => {
  console.error('Σφάλμα πιστοποίησης:', error);
  // Εμφάνιση μηνύματος σφάλματος
});

// Προστατευμένο αίτημα με το αποθηκευμένο token
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Προσθήκη token στην κεφαλίδα
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Το token έχει λήξει ή είναι άκυρο. Ανακατεύθυνση στη σελίδα εισόδου.');
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Αποτυχία λήψης προστατευμένου πόρου');
    }
    return response.json();
  })
  .then(data => {
    console.log('Προστατευμένα δεδομένα:', data);
  })
  .catch(error => {
    console.error('Σφάλμα κατά την λήψη προστατευμένου πόρου:', error);
  });
} else {
  console.log('Δεν βρέθηκε auth token. Ανακατεύθυνση στη σελίδα εισόδου.');
  // window.location.href = '/login';
}

Σημαντικές πτυχές ασφαλείας:

• Χρησιμοποιείτε πάντα HTTPS.
• Αποθηκεύετε τα tokens με ασφάλεια.
• Χρησιμοποιείτε tokens μικρού χρόνου ζωής και ανανεώσιμα tokens.
• Επικυρώνετε όλα τα δεδομένα στον διακομιστή.