Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Ο έλεγχος ταυτότητας είναι βασικό συστατικό της ανάπτυξης εφαρμογών. Βοηθά στην προστασία των δεδομένων χρήστη και στην αποτροπή κακόβουλων δραστηριοτήτων. Με απλά λόγια, καθορίζει την αξιοπιστία της ταυτότητας ενός χρήστη, διασφαλίζοντας ότι μόνο εξουσιοδοτημένοι χρήστες μπορούν να έχουν πρόσβαση σε μια εφαρμογή και στους πόρους της.

Η δημιουργία ενός προσαρμοσμένου συστήματος ελέγχου ταυτότητας μπορεί να είναι μια χρονοβόρα εργασία και εδώ είναι χρήσιμο το NextAuth.js. Παρέχει ασφαλή υποστήριξη ελέγχου ταυτότητας για εφαρμογές που έχουν δημιουργηθεί με το πλαίσιο Next.js.

Τι είναι το NextAuth.js;

NextAuth.js είναι μια ελαφριά βιβλιοθήκη ανοιχτού κώδικα που παρέχει έλεγχο ταυτότητας και εξουσιοδότηση υποστήριξη για εφαρμογές Next.js. Επιτρέπει στους προγραμματιστές να ρυθμίσουν γρήγορα και εύκολα τον έλεγχο ταυτότητας και την εξουσιοδότηση για τις εφαρμογές Next.js. Παρέχει λειτουργίες όπως έλεγχος ταυτότητας με πολλούς παρόχους, email και έλεγχο ταυτότητας χωρίς κωδικό πρόσβασης.

instagram viewer

Πώς λειτουργεί το NextAuth.js στον έλεγχο ταυτότητας;

Η λύση ελέγχου ταυτότητας του NextAuth.js παρέχει ένα API από την πλευρά του πελάτη που μπορείτε ενσωματωθείτε στην εφαρμογή Next.js. Μπορείτε να το χρησιμοποιήσετε για τον έλεγχο ταυτότητας χρηστών με διαφορετικούς παρόχους σύνδεσης με τους οποίους έχουν δημιουργήσει λογαριασμούς.

Κάτω από την κουκούλα, οι χρήστες ανακατευθύνονται στη σελίδα σύνδεσης ενός παρόχου. Μετά τον επιτυχή έλεγχο ταυτότητας, ο πάροχος επιστρέφει δεδομένα περιόδου σύνδεσης που περιέχουν το ωφέλιμο φορτίο του χρήστη. Αυτό το ωφέλιμο φορτίο μπορεί στη συνέχεια να εξουσιοδοτήσει την πρόσβαση στην εφαρμογή και τους πόρους της.

Νέες ενημερώσεις λειτουργιών στο NextAuth.js (v4)

Τον Δεκέμβριο του 2022, το NextAuth.js κυκλοφόρησε την τέταρτη έκδοσή του. Αυτή η έκδοση έχει βελτιωθεί από την προηγούμενη έκδοση, v3, με νέες ενημερώσεις και τροποποιήσεις. Οι αλλαγές επικεντρώνονται κυρίως στη βελτίωση της χρήσης της βιβλιοθήκης στη διαδικασία ελέγχου ταυτότητας.

1. Ενημερώσεις για το useSession Hook

Μπορείτε να χρησιμοποιήσετε το άγκιστρο useSession για να ελέγξετε εάν ένας χρήστης είναι συνδεδεμένος ή όχι. Σε αυτήν τη νέα έκδοση, το άγκιστρο useSession επιστρέφει ένα αντικείμενο που παρέχει έναν πιο απλό τρόπο δοκιμής καταστάσεων, χάρη στην προσθήκη της επιλογής κατάστασης. Δείτε τον κώδικα παρακάτω:

εισαγωγή { useSession } από"next-auth/react"
εξαγωγήΠροκαθορισμένολειτουργίαΣυστατικό() {
συνθ { δεδομένα: συνεδρία, κατάσταση } = useSession()


αν (κατάσταση "επικυρωμένη") { 
ΕΠΙΣΤΡΟΦΗ<Π>Συνδεθήκατε ως {session.user.email}Π>
 }
ΕΠΙΣΤΡΟΦΗ<Π> Δεν έχετε συνδεθεί Π>
}

2. Το πλαίσιο του SessionProvider γίνεται υποχρεωτικό

Η νέα έκδοση τέσσερα επιβάλλει τη χρήση του περιβάλλοντος του SessionProvider. Αυτό σημαίνει ότι θα πρέπει να τυλίξετε την εφαρμογή σας με τον πάροχο useSession. Το NextAuth.js συνιστά να τυλίξετε την εφαρμογή σας μέσα στο _app.jsx αρχείο.

Επιπλέον, η μέθοδος clientMaxAge έχει αντικατασταθεί με refetchInterval. Αυτό θα διευκολύνει την περιοδική λήψη της περιόδου σύνδεσης στο παρασκήνιο.

εισαγωγή { SessionProvider } από"next-auth/react"
εξαγωγήΠροκαθορισμένολειτουργίαApp({
 Component, pageProps: { session, ...pageProps }, 
}) {
ΕΠΙΣΤΡΟΦΗ ( 
<SessionProviderσυνεδρία={συνεδρία}refetchInterval={5 * 60}>
<Συστατικό {...pageProps} />SessionProvider>
 )
}

3. Εισαγωγή Παρόχων μεμονωμένα

Το NextAuth.js παρέχει πολλές υπηρεσίες παρόχου τις οποίες μπορείτε να χρησιμοποιήσετε για να συνδεθείτε σε έναν χρήστη. Περιλαμβάνουν:

  • Χρήση ενσωματωμένων παρόχων OAuth (π.χ. GitHub, Google).
  • Χρήση του παρόχου email.

Σε αυτήν τη νέα έκδοση, πρέπει να εισάγετε κάθε πάροχο ξεχωριστά.

εισαγωγή Google Provider από"next-auth/providers/google"
εισαγωγή Auth0 Provider από"next-auth/providers/auth0";

4. Άλλες Μικρές Αλλαγές

  • Η εισαγωγή από την πλευρά του πελάτη έχει μετονομαστεί σε next-auth/react από next-auth/client.
  • Αλλαγές στα ορίσματα των μεθόδων επανάκλησης: 
    είσοδος ({ χρήστης, λογαριασμός, προφίλ, email, διαπιστευτήρια })
    συνεδρία ({ session, token, user })
    jwt({ διακριτικό, χρήστης, λογαριασμός, προφίλ, isNewUser })

Ξεκινώντας με το NextAuth.js στον έλεγχο ταυτότητας

Για να ενσωματώσετε το NextAuth.js στις εφαρμογές Next.js, ακολουθήστε τα παρακάτω βήματα:

  1. Δημιουργήστε μια εφαρμογή Next.js εκτελώντας αυτήν την εντολή: npx δημιουργία-επόμενη-εφαρμογή
  2. Τρέξιμο npm εγκατάσταση next-auth στο τερματικό σας για να εγκαταστήσετε το NextAuth.js στην Εφαρμογή Next.js.
  3. Επισκέψου το NextAuth.js επίσημη τεκμηρίωση και επιλέξτε τον/τους πάροχο/ους που προτιμάτε από τη λίστα αυτών που υποστηρίζονται. Στη συνέχεια, δημιουργήστε έναν λογαριασμό στην κονσόλα προγραμματιστή του επιλεγμένου παρόχου/ων και καταχωρήστε την εφαρμογή Next.js.
  4. Στην κονσόλα προγραμματιστή του επιλεγμένου παρόχου/ών σας, καθορίστε το διεύθυνση URL αρχικής διαδρομής και το URL ανακατεύθυνσης επανάκλησης, αποθηκεύστε τις αλλαγές και αντιγράψτε το Ταυτότητα πελάτη και Μυστικό πελάτη.
  5. Στον ριζικό κατάλογο της εφαρμογής Next.js, δημιουργήστε ένα αρχείο .env για να κρατήσετε το ταυτότητα πελάτη και Μυστικό πελάτη.
  6. Τέλος, στον κατάλογο /pages/api, δημιουργήστε έναν νέο φάκελο που ονομάζεται auth. Στον φάκελο auth, δημιουργήστε ένα νέο αρχείο και ονομάστε το [...nextauth].js. Στο αρχείο που δημιουργήθηκε, προσθέστε τον παρακάτω κώδικα. Ο κώδικας εμφανίζει το NextAuth.js API από την πλευρά του πελάτη χρησιμοποιώντας έναν πάροχο Google: 
εισαγωγή Google Provider από"next-auth/providers/google";
πάροχοι: [
 Google Provider({
ταυτότητα πελάτη: επεξεργάζομαι, διαδικασία.env.GOOGLE_CLIENT_ID,
clientSecret: επεξεργάζομαι, διαδικασία.env.GOOGLE_CLIENT_SECRET
 })
]

Τώρα μπορείτε να προχωρήσετε και να δημιουργήσετε μια σελίδα ελέγχου ταυτότητας σύνδεσης. Ακολουθεί μια απόδοση DOM για ένα στοιχείο σύνδεσης:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { useSession, σύνδεση, αποσύνδεση } από"next-auth/react"
εξαγωγήΠροκαθορισμένολειτουργίαΣυστατικό() {
συνθ { δεδομένα: session } = useSession()


 αν (συνεδρία) {
ΕΠΙΣΤΡΟΦΗ (
<>
<Π> Συνδεθήκατε ως {session.user.email} Π>
<κουμπίστο κλικ={() => signOut()}>Αποσύνδεσηκουμπί>

 )
 }
ΕΠΙΣΤΡΟΦΗ (
<>
<Π> Δεν έχετε συνδεθεί Π>
<κουμπίστο κλικ={() => signIn()}>Είσοδοςκουμπί>

 )
}

ο useSession Το Hook έχει πρόσβαση στο αντικείμενο της τρέχουσας περιόδου λειτουργίας χρήστη. Μόλις ένας χρήστης συνδεθεί και πιστοποιηθεί από την Google, επιστρέφεται ένα αντικείμενο περιόδου σύνδεσης με το ωφέλιμο φορτίο χρήστη. Αυτό επιτρέπει στο Next.js να αποδίδει τα στοιχεία χρήστη στην πλευρά του πελάτη της εφαρμογής, για αυτήν την περίπτωση το email.

Προσαρμοσμένα συστήματα ελέγχου ταυτότητας vs. Λύσεις έτοιμες για χρήση όπως το NextAuth.js

Επιλογή μεταξύ της δημιουργίας ενός προσαρμοσμένου συστήματος ελέγχου ταυτότητας και της ενσωμάτωσης ενός έτοιμου προς χρήση ελέγχου ταυτότητας λύση όπως το NextAuth.js, είναι σημαντικό να λάβετε υπόψη το κόστος, την πολυπλοκότητα και την ασφάλεια του καθενός λύση.

Εάν έχετε τους πόρους και την τεχνογνωσία για να αναπτύξετε ένα προσαρμοσμένο σύστημα ελέγχου ταυτότητας, αυτή μπορεί να είναι η καλύτερη προσέγγιση για εσάς. Ωστόσο, αν ψάχνετε για μια ολοκληρωμένη λύση που είναι εύκολη στην εφαρμογή, ασφαλή και οικονομικά αποδοτική, τότε το NextAuth.js μπορεί να είναι μια καλή επιλογή που πρέπει να εξετάσετε. Τελικά, η επιλογή θα εξαρτηθεί από τις ανάγκες και τις προτιμήσεις σας.