NodeJS Xác thực Google bằng Passport và Express
Nếu bạn đã từng sử dụng tài khoản Google của mình để đăng nhập vào một ứng dụng thì bạn có thể nhận thấy nó dễ dàng như thế nào. Bạn chỉ cần nhấp vào một nút và không cần phải nhập email hoặc mật khẩu của mình. Trong khi điều này có vẻ đơn giản, những gì xảy ra dưới mui xe lại khá phức tạp. Tuy nhiên, các công cụ như Passport làm cho nó dễ dàng hơn.
Trong hướng dẫn này, bạn sẽ học cách triển khai xác thực Google trong Node bằng Passport và Express.
Mục Lục
Hộ chiếu là gì?
Passport (hoặc Passport.js) là một phần mềm trung gian xác thực Node cung cấp hơn 500 chiến lược để xác thực người dùng bao gồm xác thực xã hội bằng cách sử dụng các nền tảng như Google và Twitter.
Bạn sẽ sử dụng chiến lược passport-google-oauth2 để xác thực người dùng trên Google.
Tạo Hệ thống xác thực Google trong Node
Đây là tổng quan về hệ thống xác thực mà bạn sẽ tạo:
- Khi người dùng nhấp vào nút đăng nhập, họ sẽ được đưa đến trang đăng nhập Google nơi họ sẽ đăng nhập.
- Google sẽ chuyển hướng người dùng đến ứng dụng của bạn bằng mã thông báo truy cập. Mã thông báo truy cập cho phép bạn truy cập thông tin hồ sơ của người dùng đó.
- Gửi mã thông báo truy cập tới Google để lấy dữ liệu hồ sơ.
- Tạo người dùng mới hoặc truy xuất người dùng hiện có từ cơ sở dữ liệu.
- Sử dụng JWT để bảo vệ các tuyến đường nhạy cảm.
Cách thiết lập Google Authentication trong NodeJS bằng Passport
Làm theo các bước bên dưới để cấp phép cho người dùng với Google OAuth,
Bước 1: Tạo ID khách hàng Google và bí mật khách hàng
Trước khi sử dụng Google để đăng nhập người dùng vào ứng dụng của bạn, bạn cần đăng ký ứng dụng của mình với Google để lấy ID ứng dụng khách và bí mật ứng dụng để sử dụng khi định cấu hình Hộ chiếu.
Đăng nhập vào bảng điều khiển Google Cloud và làm theo các bước sau để đăng ký ứng dụng của bạn.
Tạo một dự án mới. Trong thanh menu, chọn Thông tin xác thực và trên danh sách thả xuống, hãy chọn ID khách hàng OAuth.
Đối với loại ứng dụng, hãy chọn Ứng dụng web. Thêm tên ưa thích cho ứng dụng của bạn trong trường Tên.
Trong URI chuyển hướng được ủy quyền, hãy sử dụng http: // localhost: 3000 và http: // localhost: 3000 / auth / google / callback cho các URI chuyển hướng được ủy quyền.
Nhấp chuột tạo ra để tạo ứng dụng khách OAuth. Vì thông tin đăng nhập ứng dụng là nhạy cảm, bạn sẽ cần tạo .env và thêm ID khách hàng và bí mật của khách hàng vào đó.
CLIENT_ID = <client-id>CLIENT_SECRET = <client-secret>
Bước 2: Thiết lập máy chủ nút
Tạo một thư mục, user-google-auth, và điều hướng đến nó.
mkdir user-google-auth
cd user-google-authKhởi tạo npm để tạo ra package.json.
npm init -yVì bạn sẽ sử dụng express để tạo máy chủ, hãy cài đặt nó bằng cách chạy lệnh sau.
npm install expressMở thư mục bằng trình soạn thảo văn bản ưa thích của bạn và tạo một tệp mới app.js. Nó sẽ đóng vai trò là điểm đầu vào của đơn đăng ký của bạn.
Tạo máy chủ NodeJS trong app.js.
const express = require("express");
const app = express();
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});Bước 2: Thiết lập MongoDB
Bạn sẽ lưu trữ dữ liệu người dùng nhận được từ Google trong cơ sở dữ liệu MongoDB. Trước khi lưu thông tin người dùng, bạn cần xác định cấu trúc mà dữ liệu sẽ được lưu trữ. Mongoose là hoàn hảo cho việc này. Nó cung cấp một cách khá đơn giản để tạo các mô hình dữ liệu.
Cài đặt cầy mangut.
npm install mongooseTạo một tệp mới userModel.jsvà tạo lược đồ người dùng.
const mongoose = require("mongoose");
const { Schema } = mongoose.model;
const UserSchema = new Schema({
google: {
id: {
type: String,
},
name: {
type: String,
},
email: {
type: String,
},
},
});
const User = mongoose.model("User", UserSchema);
module.exports = User;Ở trong userModel.jsbạn đã nhập mongoose và tạo một lược đồ mới.
Lưu ý rằng bạn đang nhóm thông tin từ Google. Điều này đặc biệt hữu ích khi bạn cũng đang sử dụng các phương pháp xác thực khác và một người dùng sử dụng nhiều phương pháp xác thực. Nó làm cho việc ngăn chặn đăng ký hai lần dễ dàng hơn.
Tiếp theo, tạo db.js.
const mongoose = require("mongoose");
mongoose.Promise = global.Promise;
const dbUrl = "mongodb://localhost/user";
const connect = async () => {
mongoose.connect(dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on("error", () => {
console.log("could not connect");
});
db.once("open", () => {
console.log("> Successfully connected to database");
});
};
module.exports = { connect };
Kết nối với cơ sở dữ liệu trong app.js.
const express = require("express");
const app = express();
const PORT = 3000;
const db = require("./db");
db.connect();
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});Bước 3: Thiết lập Hộ chiếu
Cài đặt hộ chiếu và passport-google-oauth2.
npm i passport passport-google-oauth2Tạo một tệp mới, passportConfig.jsvà nhập chiến lược Google từ passport-google-oauth2 và userModel.js.
const GoogleStrategy = require("passport-google-oauth2").Strategy;
const User = require("./userModel");Sử dụng thông tin đăng nhập ứng dụng của bạn để định cấu hình hộ chiếu với Google OAuth.
module.exports = (passport) => {
passport.use(new GoogleStrategy({
clientID: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
callbackURL: "http://localhost:3000/auth/google/callback",
passReqToCallback : true
},
async (request, accessToken, refreshToken, profile, done) => {
try {
let existingUser = await User.findOne({ 'google.id': profile.id });
// if user exists return the user
if (existingUser) {
return done(null, existingUser);
}
// if user does not exist create a new user
console.log('Creating new user...');
const newUser = new User({
method: 'google',
google: {
id: profile.id,
name: profile.displayName,
email: profile.emails[0].value
}
});
await newUser.save();
return done(null, newUser);
} catch (error) {
return done(error, false)
}
}
));
}
Sau khi bạn nhận được thông tin hồ sơ từ Google, hãy kiểm tra xem người dùng có tồn tại trong cơ sở dữ liệu hay không. Nếu họ làm vậy, chỉ cần trả lại người dùng được tìm thấy. Nếu người dùng là người mới, hãy tạo một tài liệu mới trong cơ sở dữ liệu và trả về người dùng đã tạo.
Lưu ý rằng bạn đang làm việc với env các biến vì vậy hãy sử dụng npm Bưu kiện dotenv để truy cập chúng trong ứng dụng của bạn.
Cài đặt dotenv.
npm install dotenvSử dụng dotenv trong app.js.
require("dotenv").config()Ở trong app.js, vượt qua hộ chiếu đến passportConfig.js
const passport = require("passport");
require("./passportConfig")(passport);Bước 4: Tạo các tuyến xác thực
Bạn cần ba tuyến đường để:
- Chuyển hướng người dùng đến trang đăng nhập Google để nhận mã thông báo truy cập.
- Truy xuất dữ liệu người dùng bằng cách sử dụng mã thông báo truy cập đã nhận được.
- Chuyển hướng người dùng đến trang hồ sơ sau khi xác thực thành công.
// Redirect the user to the Google signin page
app.get(
"/auth/google",
passport.authenticate("google", { scope: ["email", "profile"] })
);
// Retrieve user data using the access token received
app.get(
"/auth/google/callback",
passport.authenticate("google", { session: false }),
(req, res) => {
res.redirect("/profile/");
}
);
// profile route after successful sign in
app.get("/profile", (req, res) => {
console.log(req);
res.send("Welcome");
});Bước 5: Bảo vệ các tuyến đường riêng tư
Bây giờ bạn đã đăng nhập với tư cách người dùng, làm cách nào bạn có thể hạn chế một số phần của ứng dụng của mình chỉ với những người dùng đã xác thực? Một cách để thực hiện là sử dụng Mã thông báo web JSON (JWT). JWT cung cấp một cách truyền thông tin an toàn. Để cho phép người dùng sử dụng JWT, ứng dụng của bạn sẽ:
- Tạo mã thông báo bằng cách sử dụng dữ liệu người dùng.
- Chuyển mã thông báo cho người dùng (người dùng sẽ gửi lại mã thông báo với các yêu cầu cần được ủy quyền).
- Xác minh mã thông báo được gửi lại.
- Cấp quyền truy cập cho người dùng nếu mã thông báo được xuất trình là hợp lệ.
Cài đặt jsonwebtoken để làm việc với JWT.
npm install jsonwebtokenỞ trong app.jsnhập khẩu jsonwebtoken.
const jwt = require("jsonwebtoken")Sửa đổi URL gọi lại của Google để ký người dùng và tạo mã thông báo.
app.get(
"/auth/google/callback",
passport.authenticate("google", { session: false }),
(req, res) => {
jwt.sign(
{ user: req.user },
"secretKey",
{ expiresIn: "1h" },
(err, token) => {
if (err) {
return res.json({
token: null,
});
}
res.json({
token,
});
}
);
}
);Nếu bạn đăng nhập, bạn sẽ nhận được mã thông báo.
Tiếp theo, sử dụng passport-jwtmột chiến lược JWT do Passport cung cấp để xác minh mã thông báo và ủy quyền cho người dùng.
npm install passport-jwtỞ trong passportConfig.jsthêm chiến lược JWT.
const JwtStrategy = require("passport-jwt").Strategy;
const { ExtractJwt } = require("passport-jwt");
module.exports = (passport) => {
passport.use(new GoogleStrategy(
// Google strategy
);
passport.use(
new JwtStrategy(
{
jwtFromRequest: ExtractJwt.fromHeader("authorization"),
secretOrKey: "secretKey",
},
async (jwtPayload, done) => {
try {
// Extract user
const user = jwtPayload.user;
done(null, user);
} catch (error) {
done(error, false);
}
}
)
);
}Tại đây, bạn đang trích xuất mã thông báo từ tiêu đề ủy quyền nơi nó được lưu trữ — điều này an toàn hơn nhiều so với việc lưu trữ nó trong phần thân yêu cầu.
Sau khi mã thông báo được xác minh, đối tượng người dùng sẽ được gửi trở lại cơ quan yêu cầu. Để cấp quyền cho người dùng, hãy thêm phần mềm trung gian xác thực JWT hộ chiếu vào các tuyến đường được bảo vệ.
app.get(
"/profile",
passport.authenticate("jwt", { session: false }),
(req, res, next) => {
res.send("Welcome");
}
);Giờ đây, chỉ những yêu cầu cung cấp mã thông báo hợp lệ mới có quyền truy cập.
Bước tiếp theo
Hướng dẫn này đã chỉ cho bạn cách bạn có thể sử dụng Passport để đăng nhập người dùng vào ứng dụng của bạn bằng tài khoản Google của họ. Việc sử dụng Passport đơn giản hơn nhiều so với các hình thức khác và bạn sẽ tiết kiệm được rất nhiều thời gian khi sử dụng.
Passport cũng cung cấp các chiến lược xác thực khác để sử dụng với các nhà cung cấp danh tính khác, như Twitter và Facebook. Vì vậy, bạn cũng nên kiểm tra những thứ đó.
Đọc tiếp
Thông tin về các Tác giả
