在 Express.js 中使用 Passport.js 进行 Google 身份验证的完全指南-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，身份验证是一个不可或缺的组件。而 Google 身份验证是一个流行的身份验证方式，因为大多数人都有 Google 帐户，并且可以使用它来登录到应用程序。在本文中，我们将讨论如何使用 Passport.js 在 Express.js 中实现 Google 身份验证。

什么是 Passport.js？

Passport.js 是一个 Node.js 应用程序的身份验证中间件。它允许您使用多种身份验证策略（例如 Google、Facebook、Twitter 等）来保护您的应用程序。Passport.js 采用策略模式，这意味着您可以根据需要添加或删除身份验证策略。

为什么要使用 Google 身份验证？

Google 身份验证是一种流行的身份验证方式，因为它具有以下优点：

大多数人都有 Google 帐户，因此他们不需要创建新的帐户来登录您的应用程序。
Google 身份验证是安全的，因为它使用 OAuth 2.0 协议来授权访问您的应用程序。
Google 身份验证是方便的，因为它允许您使用 Google API 来获取用户的信息，例如他们的电子邮件地址和头像。

实现 Google 身份验证的步骤

在本节中，我们将讨论如何使用 Passport.js 在 Express.js 中实现 Google 身份验证。我们将按照以下步骤进行：

创建 Google API 凭据
安装 Passport.js 和相关的依赖项
配置 Passport.js
创建路由和控制器
测试身份验证

步骤 1：创建 Google API 凭据

要使用 Google 身份验证，您需要创建一个 Google API 凭据。请按照以下步骤操作：

转到 Google Cloud Console。
点击“选择项目”下拉菜单，然后点击“新建项目”。
输入项目名称，然后点击“创建”。
在左侧导航菜单中，点击“API 和服务”，然后点击“凭据”。
点击“创建凭据”，然后选择“OAuth 客户端 ID”。
选择“Web 应用程序”，然后输入以下详细信息：
- 名称：输入您的应用程序名称。
- 授权 JavaScript 来源：输入您的应用程序的 URL。
- 授权重定向 URL：输入您的应用程序的授权回调 URL。
点击“创建”，然后复制您的客户端 ID 和客户端密钥。

步骤 2：安装 Passport.js 和相关的依赖项

在本节中，我们将安装 Passport.js 和相关的依赖项。请按照以下步骤操作：

在终端中，导航到您的应用程序目录。
运行以下命令来安装 Passport.js 和相关的依赖项：
```
npm install passport passport-google-oauth20 express-session connect-mongo
```
- passport 是 Passport.js 的核心库。
- passport-google-oauth20 是 Google OAuth 2.0 身份验证策略。
- express-session 是用于在 Express.js 中启用会话的中间件。
- connect-mongo 是用于将会话存储在 MongoDB 中的中间件。

步骤 3：配置 Passport.js

在本节中，我们将配置 Passport.js。请按照以下步骤操作：

在您的应用程序中创建一个名为 config.js 的文件，并添加以下代码：

// javascriptcn.com 代码示例
module.exports = {
  google: {
    clientID: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    callbackURL: '/auth/google/callback'
  },
  session: {
    secret: 'YOUR_SESSION_SECRET',
    resave: false,
    saveUninitialized: false
  }
};

将 YOUR_CLIENT_ID 替换为您的 Google API 客户端 ID。
将 YOUR_CLIENT_SECRET 替换为您的 Google API 客户端密钥。
将 YOUR_SESSION_SECRET 替换为您的会话密钥。

在您的应用程序中创建一个名为 passport.js 的文件，并添加以下代码：

// javascriptcn.com 代码示例
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const config = require('./config');
const UserModel = require('./models/user');

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  UserModel.findById(id, (err, user) => {
    done(err, user);
  });
});

passport.use(new GoogleStrategy(
  {
    clientID: config.google.clientID,
    clientSecret: config.google.clientSecret,
    callbackURL: config.google.callbackURL
  },
  (accessToken, refreshToken, profile, done) => {
    UserModel.findOne({ googleId: profile.id }, (err, user) => {
      if (err) {
        return done(err);
      }
      if (!user) {
        user = new UserModel({
          googleId: profile.id,
          name: profile.displayName,
          email: profile.emails[0].value,
          photo: profile.photos[0].value
        });
        user.save((err) => {
          if (err) {
            console.log(err);
          }
          return done(err, user);
        });
      } else {
        return done(err, user);
      }
    });
  }
));

serializeUser 和 deserializeUser 方法用于在请求之间序列化和反序列化用户对象。
GoogleStrategy 是 Google OAuth 2.0 身份验证策略。
config 是我们刚刚创建的 config.js 文件。
UserModel 是一个 Mongoose 模型，用于保存用户数据。
accessToken 和 refreshToken 是 Google OAuth 2.0 的访问令牌和刷新令牌。
profile 包含 Google OAuth 2.0 返回的用户资料。

步骤 4：创建路由和控制器

在本节中，我们将创建路由和控制器。请按照以下步骤操作：

在您的应用程序中创建一个名为 routes.js 的文件，并添加以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const passport = require('passport');
const config = require('./config');

const router = express.Router();

router.get('/auth/google', passport.authenticate('google', {
  scope: ['profile', 'email']
}));

router.get('/auth/google/callback', passport.authenticate('google', {
  successRedirect: '/',
  failureRedirect: '/login'
}));

router.get('/logout', (req, res) => {
  req.logout();
  res.redirect('/');
});

router.use((req, res, next) => {
  if (!req.user) {
    res.redirect('/login');
  } else {
    next();
  }
});

router.get('/', (req, res) => {
  res.render('home', { user: req.user });
});

router.get('/profile', (req, res) => {
  res.render('profile', { user: req.user });
});

module.exports = router;

passport.authenticate 是 Passport.js 的身份验证中间件。
successRedirect 和 failureRedirect 是在身份验证成功或失败后重定向的 URL。
req.logout() 用于注销用户。
req.user 是当前登录用户的对象。
res.render 用于呈现视图。

在您的应用程序中创建一个名为 views 的文件夹，并创建以下两个视图文件：

home.ejs：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <% if (user) { %>
      <h1>Welcome <%= user.name %>!</h1>
      <a href="/profile">Profile</a>
      <a href="/logout">Logout</a>
    <% } else { %>
      <a href="/auth/google">Login with Google</a>
    <% } %>
  </body>
</html>

profile.ejs：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Profile</title>
  </head>
  <body>
    <h1>Profile</h1>
    <img src="<%= user.photo %>" alt="<%= user.name %>">
    <p>Name: <%= user.name %></p>
    <p>Email: <%= user.email %></p>
    <a href="/">Home</a>
    <a href="/logout">Logout</a>
  </body>
</html>

在您的应用程序中创建一个名为 server.js 的文件，并添加以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const session = require('express-session');
const MongoStore = require('connect-mongo')(session);
const mongoose = require('mongoose');
const passport = require('passport');
const config = require('./config');
const routes = require('./routes');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
app.use(session({
  secret: config.session.secret,
  resave: config.session.resave,
  saveUninitialized: config.session.saveUninitialized,
  store: new MongoStore({ mongooseConnection: mongoose.connection })
}));
app.use(passport.initialize());
app.use(passport.session());
app.use('/', routes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`);
});

express 是 Express.js 的核心库。
session 是用于在 Express.js 中启用会话的中间件。
MongoStore 是用于将会话存储在 MongoDB 中的中间件。
mongoose 是 MongoDB 的对象建模库。
app.set 用于设置视图引擎。
app.use 用于添加中间件。
passport.initialize 和 passport.session 用于启用 Passport.js。
routes 是我们刚刚创建的 routes.js 文件。

步骤 5：测试身份验证

在本节中，我们将测试身份验证。请按照以下步骤操作：

在终端中，导航到您的应用程序目录。
运行以下命令来启动应用程序：
```
node server.js
```
在浏览器中打开以下 URL：
```
http://localhost:3000
```
点击“Login with Google”按钮，然后使用您的 Google 帐户登录。
您将被重定向到主页，其中显示欢迎消息和注销链接。
点击“Profile”链接，然后查看您的个人资料信息。
点击“Logout”链接，然后注销您的帐户。

总结

在本文中，我们讨论了如何使用 Passport.js 在 Express.js 中实现 Google 身份验证。我们讨论了 Passport.js 的优点、Google 身份验证的优点和步骤，以及如何测试身份验证。我们还提供了示例代码和视图文件，以便您可以轻松地实现身份验证。希望这篇文章对您有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ef595d2f5e1655d748945