NodeJS Έλεγχος ταυτότητας Google με χρήση Passport και Express

Εάν έχετε χρησιμοποιήσει ποτέ τον λογαριασμό σας Google για να συνδεθείτε σε μια εφαρμογή, ίσως έχετε παρατηρήσει πόσο εύκολο είναι. Χρειάζεται μόνο να κάνετε κλικ σε ένα κουμπί και δεν χρειάζεται να πληκτρολογήσετε το email ή τον κωδικό πρόσβασής σας. Αν και αυτό φαίνεται απλό, αυτό που συμβαίνει κάτω από την κουκούλα είναι αρκετά περίπλοκο. Ωστόσο, εργαλεία όπως το Passport το κάνουν πιο εύκολο.

Σε αυτό το σεμινάριο, θα μάθετε πώς να εφαρμόζετε τον έλεγχο ταυτότητας Google στο Node χρησιμοποιώντας το Passport και το Express.

Τι είναι το Διαβατήριο;

Διαβατήριο (ή το Passport.js) είναι ένα ενδιάμεσο λογισμικό ελέγχου ταυτότητας Node που παρέχει περισσότερες από 500 στρατηγικές για τον έλεγχο ταυτότητας των χρηστών, συμπεριλαμβανομένου του ελέγχου ταυτότητας μέσω κοινωνικού δικτύου χρησιμοποιώντας πλατφόρμες όπως το Google και το Twitter.

θα χρησιμοποιήσετε διαβατήριο-google-oauth2 στρατηγική για τον έλεγχο ταυτότητας των χρηστών στο Google.

Δημιουργία συστήματος ελέγχου ταυτότητας Google στο Node

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

• Όταν ένας χρήστης κάνει κλικ στο κουμπί σύνδεσης, θα αποσταλεί στη σελίδα σύνδεσης Google όπου θα συνδεθεί.
• Η Google θα ανακατευθύνει τον χρήστη στην εφαρμογή σας με ένα διακριτικό πρόσβασης. Το διακριτικό πρόσβασης σάς δίνει την άδεια πρόσβασης στις πληροφορίες προφίλ αυτού του χρήστη.
• Στείλτε το διακριτικό πρόσβασης στην Google για να λάβετε τα δεδομένα προφίλ.
• Δημιουργήστε έναν νέο χρήστη ή ανακτήστε τον υπάρχοντα χρήστη από τη βάση δεδομένων.
• Χρησιμοποιήστε JWT για την προστασία ευαίσθητων διαδρομών.

Πώς να ρυθμίσετε τον έλεγχο ταυτότητας Google στο NodeJS χρησιμοποιώντας το Passport

Ακολουθήστε τα παρακάτω βήματα για να εξουσιοδοτήσετε τους χρήστες με το Google OAuth,

Βήμα 1: Δημιουργήστε ένα Google Client ID και Client Secret

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

Συνδεθείτε στο Κονσόλα Google Cloud και ακολουθήστε τα παρακάτω βήματα για να καταχωρήσετε την εφαρμογή σας.

Δημιουργήστε ένα νέο έργο. Στη γραμμή μενού, επιλέξτε Διαπιστευτήρια και στην αναπτυσσόμενη λίστα, επιλέξτε Αναγνωριστικό πελάτη OAuth.

Για τον τύπο εφαρμογής, επιλέξτε εφαρμογή ιστού. Προσθέστε το προτιμώμενο όνομα για την εφαρμογή σας στο πεδίο Όνομα.

Κάτω από εξουσιοδοτημένα URI ανακατεύθυνσης, χρησιμοποιήστε http://localhost: 3000 και http://localhost: 3000/auth/google/callback για εξουσιοδοτημένα URI ανακατεύθυνσης.

Κάντε κλικ δημιουργώ για να δημιουργήσετε τον πελάτη OAuth. Επειδή τα διαπιστευτήρια της εφαρμογής είναι ευαίσθητα, θα πρέπει να δημιουργήσετε ένα .env αρχείο και προσθέστε το αναγνωριστικό πελάτη και το μυστικό πελάτη σε αυτό.

CLIENT_ID = 
CLIENT_SECRET = 

Βήμα 2: Ρύθμιση διακομιστή κόμβου

Δημιουργήστε ένα φάκελο, user-google-auth, και πλοηγηθείτε σε αυτό.

mkdir χρήστη-google-auth
cd user-google-auth

Αρχικοποίηση npm για να δημιουργήσω πακέτο.json.

npm init -y

Δεδομένου ότι θα χρησιμοποιήσετε express to δημιουργήστε τον διακομιστή, εγκαταστήστε το εκτελώντας την ακόλουθη εντολή.

npm εγκατάσταση express

Ανοίξτε το φάκελο με το πρόγραμμα επεξεργασίας κειμένου που προτιμάτε και δημιουργήστε ένα νέο αρχείο app.js. Θα χρησιμεύσει ως το σημείο εισόδου της αίτησής σας.

Δημιουργήστε τον διακομιστή NodeJS στο app.js.

const express = απαιτώ ("express");
const app = express();
const PORT = 3000;
app.listen (PORT, () => {
 console.log(`Ακρόαση στη θύρα ${PORT}`);
});

Βήμα 2: Ρύθμιση MongoDB

Θα αποθηκεύσετε τα δεδομένα χρήστη που λαμβάνετε από την Google σε α Βάση δεδομένων MongoDB. Πριν αποθηκεύσετε τις πληροφορίες χρήστη, πρέπει να ορίσετε τη δομή στην οποία θα αποθηκευτούν τα δεδομένα. Το Mongoose είναι τέλειο για αυτό. Παρέχει έναν αρκετά απλό τρόπο δημιουργίας μοντέλων δεδομένων.

Εγκαθιστώ μαγκούστα.

npm εγκατάσταση mongoose

Δημιουργήστε ένα νέο αρχείο userModel.jsκαι δημιουργήστε το σχήμα χρήστη.

const mongoose = απαιτώ ("μαγκούστα");
const { Schema } = mongoose.model;
const UserSchema = νέο σχήμα({
 google: {
 id: {
 τύπος: String,
 },
 όνομα: {
 τύπος: String,
 },
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: {
 τύπος: String,
 },
 },
});
const User = mongoose.model("User", UserSchema);
module.exports = Χρήστης;

Σε userModel.js, έχετε εισαγάγει mongoose και δημιουργήσατε ένα νέο σχήμα.

Σημειώστε ότι ομαδοποιείτε τις πληροφορίες από την Google. Αυτό είναι ιδιαίτερα χρήσιμο όταν χρησιμοποιείτε επίσης άλλες μεθόδους ελέγχου ταυτότητας και ένας χρήστης χρησιμοποιεί περισσότερες από μία. Διευκολύνει την αποτροπή διπλής εγγραφής.

Στη συνέχεια, δημιουργήστε db.js.

const mongoose = απαιτώ ("μαγκούστα");
μαγκούστα. Υπόσχεση = παγκόσμια. Υπόσχεση;
const dbUrl = "mongodb://localhost/user";
const connect = async () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = μαγκούστα.σύνδεση;
 db.on("σφάλμα", () => {
 console.log("δεν ήταν δυνατή η σύνδεση");
 });
 db.once("open", () => {
 console.log("> Επιτυχής σύνδεση με τη βάση δεδομένων");
 });
};
module.exports = { connect };

Συνδεθείτε στη βάση δεδομένων στο app.js.

const express = απαιτώ ("express");
const app = express();
const PORT = 3000;
const db = απαιτούν("./db");
db.connect();
app.listen (PORT, () => {
 console.log(`Ακρόαση στη θύρα ${PORT}`);
});

Βήμα 3: Ρύθμιση διαβατηρίου

Εγκαθιστώ διαβατήριο και διαβατήριο-google-oauth2.

npm i passport passport-google-oauth2

Δημιουργήστε ένα νέο αρχείο, passportConfig.jsκαι εισαγάγετε τη στρατηγική της Google από διαβατήριο-google-oauth2 και userModel.js.

const GoogleStrategy = απαιτείται ("passport-google-oauth2").Στρατηγική;
const Χρήστης = Απαιτείται("./userModel");

Χρησιμοποιήστε τα διαπιστευτήρια της εφαρμογής σας για διαμόρφωση διαβατήριο με το Google OAuth.

module.exports = (διαβατήριο) => {
 passport.use (νέα στρατηγική Google({
 Αναγνωριστικό πελάτη: process.env. ΤΑΥΤΟΤΗΤΑ ΠΕΛΑΤΗ,
 clientSecret: process.env. CLIENT_SECRET,
 URL επιστροφής κλήσης: " http://localhost: 3000/auth/google/callback",
 passReqToCallback: αληθές
 },
 ασυγχρονισμός (αίτημα, AccessToken, refreshToken, προφίλ, ολοκληρωμένο) => {
 προσπαθήστε {
 let existentUser = await User.findOne({ 'google.id': profile.id });
// εάν υπάρχει χρήστης, επιστρέψτε τον χρήστη
 εάν (υπάρχωνΧρήστης) {
 η επιστροφή έγινε (μηδενική, υπάρχων Χρήστης).
 }
// εάν ο χρήστης δεν υπάρχει, δημιουργήστε έναν νέο χρήστη
 console.log('Δημιουργία νέου χρήστη...');
 const newUser = νέος χρήστης({
 μέθοδος: 'google',
 google: {
 id: profile.id,
 όνομα: profile.displayName,
 email: profile.emails[0].value
 }
 });
 await newUser.save();
 η επιστροφή έγινε (null, newUser);
 } catch (σφάλμα) {
 η επιστροφή έγινε (λάθος, λάθος)
 }
 }
 ));
}

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

Σημειώστε ότι εργάζεστε με env μεταβλητές γι' αυτό χρησιμοποιήστε το npm πακέτο dotenv για πρόσβαση σε αυτά στην αίτησή σας.

Εγκαθιστώ dotenv.

npm εγκατάσταση dotenv

Χρήση dotenv σε app.js.

require("dotenv").config()

Σε app.js,πέρασμα διαβατήριο προς την passportConfig.js

const passport = απαιτείται ("passport");
απαιτείται("./passportConfig")(passport);

Βήμα 4: Δημιουργήστε διαδρομές ελέγχου ταυτότητας

Χρειάζεστε τρεις διαδρομές για:

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

// Ανακατευθύνετε τον χρήστη στη σελίδα σύνδεσης Google
app.get(
 "/auth/google",
 passport.authenticate("google", { scope: ["email", "profile"] })
);
// Ανάκτηση δεδομένων χρήστη χρησιμοποιώντας το διακριτικό πρόσβασης που ελήφθη
app.get(
 "/auth/google/callback",
 passport.authenticate("google", { session: false }),
 (απαιτ., ανταπ.) => {
 res.redirect("/profile/");
 }
);
// διαδρομή προφίλ μετά την επιτυχή είσοδο
app.get("/profile", (reg, res) => {
 console.log (req);
 res.send("Καλώς ήρθατε");
});

Βήμα 5: Προστατέψτε τις ιδιωτικές διαδρομές

Τώρα που έχετε συνδεθεί ως χρήστης, πώς μπορείτε να περιορίσετε ορισμένα τμήματα της εφαρμογής σας μόνο σε πιστοποιημένους χρήστες; Ένας τρόπος για να το κάνετε είναι να χρησιμοποιήσετε τα JSON Web Tokens (JWT). Τα JWT προσφέρουν έναν ασφαλή τρόπο μετάδοσης των πληροφοριών. Προς την εξουσιοδότηση χρηστών χρησιμοποιώντας JWT, η εφαρμογή σας θα:

• Δημιουργήστε ένα διακριτικό χρησιμοποιώντας τα δεδομένα χρήστη.
• Δώστε το διακριτικό στον χρήστη (ο χρήστης θα στείλει πίσω το διακριτικό με αιτήματα που χρειάζονται εξουσιοδότηση).
• Επαληθεύστε το διακριτικό που εστάλη πίσω.
• Παραχωρήστε πρόσβαση στον χρήστη εάν το διακριτικό που παρουσιάζεται είναι έγκυρο.

Εγκαθιστώ jsonwebtoken να συνεργαστεί με JWT.

npm εγκατάσταση jsonwebtoken

Σε app.js, εισαγωγή jsonwebtoken.

const jwt = απαιτείται ("jsonwebtoken")

Τροποποιήστε τη διεύθυνση URL επανάκλησης Google για να υπογράψετε τον χρήστη και να δημιουργήσετε ένα διακριτικό.

app.get(
 "/auth/google/callback",
 passport.authenticate("google", { session: false }),
 (απαιτ., ανταπ.) => {
 jwt.sign(
 { χρήστης: req.user },
 "μυστικό κλειδί",
 { expiresIn: "1h" },
 (λάθος, διακριτικό) => {
 αν (λάθος) {
 επιστροφή res.json({
 διακριτικό: μηδενικό,
 });
 }
 res.json({
 ένδειξη,
 });
 }
 );
 }
);

Εάν συνδεθείτε, θα λάβετε το διακριτικό.

Στη συνέχεια, χρησιμοποιήστε διαβατήριο-jwt, μια στρατηγική JWT που παρέχεται από το Passport για την επαλήθευση του διακριτικού και την εξουσιοδότηση των χρηστών.

npm εγκατάσταση διαβατηρίου-jwt

Σε passportConfig.js, προσθέστε τη στρατηγική JWT.

const JwtStrategy = απαιτείται("passport-jwt").Strategy;
const { ExtractJwt } = require("passport-jwt");
module.exports = (διαβατήριο) => {
 passport.use (νέα GoogleStrategy(
// Στρατηγική της Google
 );
 passport.use(
 νέα στρατηγική Jwt(
 {
 jwtFromRequest: ExtractJwt.fromHeader("εξουσιοδότηση"),
 secretOrKey: "secretKey",
 },
 async (jwtPayload, ολοκληρωμένο) => {
 προσπαθήστε {
// Εξαγωγή χρήστη
 const user = jwtPayload.user;
 έγινε (μηδενικό, χρήστης) 
 } catch (σφάλμα) {
 έγινε (λάθος, λάθος)
 }
 }
 )
 );
}

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

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

app.get(
 "/Προφίλ",
 passport.authenticate("jwt", { session: false }),
 (απαίτηση, ανταπόκριση, επόμενο) => {
 res.send("Καλώς ήρθατε");
 }
);

Τώρα, μόνο τα αιτήματα που παρέχουν ένα έγκυρο διακριτικό θα έχουν πρόσβαση.

Επόμενα βήματα

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

Το Passport παρέχει επίσης άλλες στρατηγικές ελέγχου ταυτότητας για χρήση με άλλους παρόχους ταυτότητας, όπως το Twitter και το Facebook. Αξίζει, λοιπόν, να τα ελέγξετε και αυτά.

Έλεγχος ταυτότητας χρήστη στο NodeJS με χρήση Passport και MongoDB

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα