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

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

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

Χρησιμοποιώντας το NextAuth, μπορείτε να μετατοπίσετε την εστίασή σας στη δημιουργία των βασικών χαρακτηριστικών. Διαβάστε παρακάτω για να μάθετε πώς να ενσωματώνετε την κοινωνική σύνδεση Google στην εφαρμογή σας χρησιμοποιώντας το NextAuth.

instagram viewer

Πώς λειτουργεί το NextAuth

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

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

Χρησιμοποιώντας τα δεδομένα ωφέλιμου φορτίου, το NextAuth δημιουργεί μια περίοδο λειτουργίας για κάθε χρήστη με έλεγχο ταυτότητας και αποθηκεύει το διακριτικό περιόδου λειτουργίας σε ένα ασφαλές cookie μόνο HTTP. Το διακριτικό περιόδου λειτουργίας χρησιμοποιείται για την επαλήθευση της ταυτότητας του χρήστη και τη διατήρηση της κατάστασης ελέγχου ταυτότητας. Αυτή η διαδικασία ισχύει και για άλλους παρόχους με μικρές διαφοροποιήσεις στην υλοποίηση.

Καταχωρίστε την εφαρμογή Next.js στην Κονσόλα προγραμματιστή Google

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

Για να το κάνετε αυτό, μεταβείτε στο Google Developer Console. Στη συνέχεια, συνδεθείτε με τον λογαριασμό σας Google για πρόσβαση στην κονσόλα. Μόλις συνδεθείτε, δημιουργήστε ένα νέο έργο.

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

Κάνε κλικ στο Δημιουργία διαπιστευτηρίων κουμπί για να δημιουργήσετε το Client ID και το Client Secret. Στη συνέχεια, καθορίστε τον τύπο της εφαρμογής από τις συγκεκριμένες επιλογές και, στη συνέχεια, δώστε ένα όνομα για την αίτησή σας.

Στη συνέχεια, καθορίστε τη διεύθυνση URL αρχικής διαδρομής της εφαρμογής σας και, τέλος, καθορίστε το εξουσιοδοτημένο URI ανακατεύθυνσης για την εφαρμογή σας. Για αυτήν την περίπτωση, θα έπρεπε να είναι http://localhost: 3000/api/auth/callback/google όπως ορίζεται από τις ρυθμίσεις παρόχου Google του NextAuth.

Μετά την επιτυχή εγγραφή, η Google θα σας παράσχει ένα Client ID και Client Secret για χρήση στην εφαρμογή σας.

Ρύθμιση της εφαρμογής NextJS

Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js τοπικά:

npx create-next-app next-auth-app

Μετά την ολοκλήρωση της εγκατάστασης, μεταβείτε στον νέο κατάλογο του έργου και εκτελέστε αυτήν την εντολή για να περιστρέψετε τον διακομιστή ανάπτυξης.

npm εκτέλεση dev

Ανοίξτε το πρόγραμμα περιήγησής σας και μεταβείτε σε http://localhost: 3000. Αυτό θα πρέπει να είναι το αναμενόμενο αποτέλεσμα.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Ρύθμιση του αρχείου .env

Στον ριζικό φάκελο του έργου σας, δημιουργήστε ένα νέο αρχείο και ονομάστε το .env για να κρατήσετε το Client ID, το Secret και τη βασική διεύθυνση URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'ταυτότητα πελάτη'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'μυστικό'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

Η διεύθυνση URL NextAUTH χρησιμοποιείται για τον καθορισμό της βασικής διεύθυνσης URL της εφαρμογής σας, η οποία χρησιμοποιείται για την ανακατεύθυνση των χρηστών μετά την ολοκλήρωση του ελέγχου ταυτότητας.

Ενσωματώστε το NextAuth στην εφαρμογή Next.js σας

Πρώτα, εγκαταστήστε τη βιβλιοθήκη του NextAuth στο έργο σας.

npm εγκατάσταση next-auth

Στη συνέχεια, στο /pages κατάλογο, δημιουργήστε έναν νέο φάκελο και ονομάστε τον api. Αλλάξτε τον κατάλογο στο api φάκελο και δημιουργήστε έναν άλλο φάκελο που ονομάζεται auth. Στον φάκελο auth, προσθέστε ένα νέο αρχείο και ονομάστε το [...nextauth].js και προσθέστε τις ακόλουθες γραμμές κώδικα.

εισαγωγή ΕπόμενοAuth από"επόμενο-auth/next";
εισαγωγή Google Provider από"next-auth/providers/google";
εξαγωγήΠροκαθορισμένο NextAuth({
 πάροχοι:[
 Google Provider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Αυτός ο κωδικός διαμορφώνει την Google ως τον πάροχο ελέγχου ταυτότητας. Η συνάρτηση NextAuth ορίζει το αντικείμενο διαμόρφωσης παρόχου Google που λαμβάνει δύο ιδιότητες: ένα Client ID και ένα Client Secret που προετοιμάζει τον πάροχο.

Στη συνέχεια, ανοίξτε το σελίδες/_app.js αρχείο και κάντε τις ακόλουθες αλλαγές στον κώδικα.

εισαγωγή"../styles/globals.css"
εισαγωγή { SessionProvider } από"next-auth/react"
λειτουργίαMyApp({ Component, pageProps: { session, ...pageProps } }) {
ΕΠΙΣΤΡΟΦΗ (


 </SessionProvider>
 )
}
εξαγωγήΠροκαθορισμένο MyApp

NextAuth's SessionProvider στοιχείο παρέχει λειτουργικότητα διαχείρισης κατάστασης ελέγχου ταυτότητας στην εφαρμογή Next.js. Χρειάζεται α συνεδρία στήριγμα που περιέχει τα δεδομένα περιόδου σύνδεσης ελέγχου ταυτότητας που επιστρέφονται από το API της Google, το οποίο περιλαμβάνει στοιχεία χρήστη όπως το αναγνωριστικό, το ηλεκτρονικό ταχυδρομείο και το διακριτικό πρόσβασης.

Τυλίγοντας το MyApp στοιχείο με το στοιχείο SessionProvider, διατίθεται το αντικείμενο περιόδου λειτουργίας ελέγχου ταυτότητας με στοιχεία χρήστη σε όλη την εφαρμογή, επιτρέποντας στην εφαρμογή να διατηρείται και να αποδίδει σελίδες με βάση την κατάσταση ελέγχου ταυτότητας.

Διαμορφώστε το Αρχείο index.js

Ανοιξε το pages/index.js αρχείο, διαγράψτε τον κωδικό του boilerplate και προσθέστε τον παρακάτω κώδικα για να δημιουργήσετε ένα κουμπί σύνδεσης που οδηγεί τους χρήστες σε μια σελίδα σύνδεσης.

εισαγωγή Κεφάλι από'επόμενο/κεφάλι'
εισαγωγή στυλ από"../styles/Home.module.css"
εισαγωγή { useRouter } από'επόμενο/δρομολογητής';
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ router = useRouter();

ΕΠΙΣΤΡΟΦΗ (





Δημιουργία επόμενης εφαρμογής<<span>/title></span><br> <meta name="<span">"description" content=<span>"Δημιουργήθηκε από τη δημιουργία επόμενης εφαρμογής"</span> /> <br> "εικονίδιο" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Καλώς ήρθατε στο <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> Ξεκινήστε με την είσοδο <span>in</span>{<span>' ' </span>}<br> <span>με</span> τον Λογαριασμό σας Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Είσοδος<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Αυτός ο κώδικας χρησιμοποιεί το άγκιστρο Next.js <strong>useRouter</strong> για να χειριστεί τη δρομολόγηση εντός της εφαρμογής ορίζοντας ένα αντικείμενο δρομολογητή. Όταν κάνετε κλικ στο κουμπί σύνδεσης, η συνάρτηση χειριστή καλεί τη μέθοδο <strong>router.push</strong> για ανακατεύθυνση ο χρήστης στη σελίδα σύνδεσης.</p> <h3 id="create-a-login-authentication-page">Δημιουργήστε έναν έλεγχο ταυτότητας σύνδεσης. Σελίδα</h3> <p>Στον κατάλογο <strong>σελίδες</strong>, δημιουργήστε ένα νέο αρχείο <strong>Login.js</strong> και, στη συνέχεια, προσθέστε τις ακόλουθες γραμμές κώδικα.</p> <pre> <code><span>εισαγωγή</span> { useSession, signIn, signOut } <span>από</span> <span>"next-auth/react"</span><br><span>εισαγωγή</span> { useRouter } <span>από</span> <span>'next /router'</span>;<br><span>εισαγωγή</span> στυλ <span>από</span> <span>'../styles/Login.module.css'</span><p><span>εξαγωγή</span> <span>προεπιλεγμένη</span> <span><span>λειτουργία</span> < span>Σύνδεση</span>() {<br> <span>const</span> { <span>data</span>: session } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Δημιουργία επόμενης εφαρμογής<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Υπογεγραμμένο < span>σε <span>ως</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Προφίλ χρήστη<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Έξοδος<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>return</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Δημιουργία επόμενης εφαρμογής<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Δεν έχετε συνδεθεί <span>σε</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Σύνδεση <span>σε</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  Τα <p><strong>useSession</strong>, <strong>signIn</strong> και <strong>signOut</strong> είναι άγκιστρα που παρέχονται από το <strong>next-auth</strong>. Το άγκιστρο <strong>useSession</strong> χρησιμοποιείται για πρόσβαση στο αντικείμενο της τρέχουσας περιόδου σύνδεσης χρήστη μόλις συνδεθεί ο χρήστης και επαληθευτεί με επιτυχία από Google.</p> <p>Αυτό επιτρέπει στο Next.js να διατηρήσει την κατάσταση ελέγχου ταυτότητας και να αποδώσει τα στοιχεία χρήστη στην πλευρά του πελάτη της εφαρμογής, σε αυτήν την περίπτωση, email.</p> <p>Επιπλέον, χρησιμοποιώντας το αντικείμενο συνεδρίας, μπορείτε εύκολα να δημιουργήσετε προσαρμοσμένα προφίλ χρήστη για την εφαρμογή σας και να αποθηκεύσετε τα δεδομένα σε μια βάση δεδομένων όπως ως PostgreSQL. Μπορείτε να <span>συνδέσετε μια βάση δεδομένων PostgreSQL με την εφαρμογή Next.js χρησιμοποιώντας το Prisma</span>.</p> <p>Το άγκιστρο αποσύνδεσης επιτρέπει σε έναν χρήστη να αποσυνδεθεί από την εφαρμογή. Αυτό το άγκιστρο θα διαγράψει το αντικείμενο συνεδρίας που δημιουργήθηκε κατά τη διαδικασία σύνδεσης και ο χρήστης θα αποσυνδεθεί.</p> <p>Προχωρήστε και γυρίστε τον διακομιστή ανάπτυξης στο ενημερώστε τις αλλαγές και μεταβείτε στην εφαρμογή Next.js που εκτελείται στο πρόγραμμα περιήγησης για να δοκιμάσετε τη λειτουργία ελέγχου ταυτότητας.</p> <pre> <code>npm εκτέλεση dev</code> </pre> <p>Επιπλέον, μπορείτε να <span>χρησιμοποιήσετε το Tailwind CSS με την εφαρμογή Next.js</span> για να διαμορφώσετε τα μοντέλα ελέγχου ταυτότητας.</p> <h2 id="authentication-using-nextauth"> Έλεγχος ταυτότητας με χρήση του NextAuth  h2> </h2>
<p>NextAuth υποστηρίζει πολλαπλές υπηρεσίες ελέγχου ταυτότητας που μπορούν εύκολα να ενσωματωθούν στις εφαρμογές σας Next.js για χειρισμό από την πλευρά του πελάτη έλεγχος ταυτότητας.</p> <p>Επιπλέον, μπορείτε να ενσωματώσετε μια βάση δεδομένων για την αποθήκευση των δεδομένων των χρηστών σας και το διακριτικό πρόσβασης για την υλοποίηση από την πλευρά του διακομιστή έλεγχος ταυτότητας για επόμενα αιτήματα ελέγχου ταυτότητας, καθώς το NextAuth παρέχει υποστήριξη για διαφορετικές ενσωματώσεις βάσεων δεδομένων.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>