使

使用 Node.js 和 Passport.js 设置社交登录（Google + Microsoft）

2025-05-24

使用 Node.js 和 Passport.js 设置社交登录（Google + Microsoft）

在深入研究代码之前，我们先简单讨论一下Oauth到底是什么？

什么是 Oauth：

OAuth（即开放授权）是应用程序中验证用户身份的方法之一。它使最终用户可以更轻松、更快速地选择社交登录名（Google、Outlook 或 Twitter 等）在应用程序上注册，而不是使用传统的（电子邮件/密码）注册表单。

简单来说，它是一种让第三方网站或应用程序访问用户数据（姓名、电子邮件等）而无需他们共享其凭据的方法。

Oauth抽象视图

OAuth 基础

幕后发生了很多事情，下图提供了详细的解释，说明如何在 Node 应用程序中进行设置。

Oauth 开发者的观点

oauth 复杂

现在让我们首先在 Google 和 Microsoft 控制台上设置我们的应用程序来设置上述登录流程。

步骤 1：Google - 创建客户端 ID 和客户端密钥

  1. 前往Google API 控制台并使用您的电子邮件 ID 登录。
  2. 从项目下拉菜单中填写项目名称和组织（可选）来创建一个新项目。
  3. 在侧边栏的“API 和服务”下，选择“OAuth 同意屏幕”，并选择相应的用户类型基础要求。对于面向公众的应用，请选择“外部”。
  4. 填写应用程序名称、徽标（可选）、支持电子邮件（可选），然后点击保存。
  5. 从侧边栏切换到“凭据”选项卡，然后从“创建凭据”下拉列表中选择“OAuth 客户端 ID”。
  6. 在应用程序类型下，选择 Web 应用程序。
  7. 在授权重定向 URI 中，为开发环境添加http://localhost:5500/auth/google/redirect；对于生产环境，这将是服务器 IP 地址或域名，后跟 /auth/google/redirect
  8. 点击“创建”按钮，复制生成的客户端 ID和客户端密钥。稍后将在 Node 应用中使用。

步骤 2：Microsoft - 创建客户端 ID 和客户端密钥

  1. 前往Microsoft Azure 门户并使用您的电子邮件 ID 登录。
  2. 从搜索栏中搜索应用程序注册。
  3. 从顶部选择新注册并填写您的应用程序名称。
  4. 根据您的需求选择账户类型。对于我们的应用，它将是个人账户 + 组织目录。
  5. 在重定向 URI 中添加http://localhost:5500/auth/microsoft/redirect。
  6. 按下注册按钮来注册您的应用程序。
  7. 从侧边栏中选择“概览”选项卡，然后复制应用程序（客户端）ID。要生成客户端密钥，请前往侧边栏中的“证书和密钥” ，然后在“客户端密钥”部分中点击“新建客户端密钥”。复制生成的密钥以备将来使用。

步骤3：护照设置

它是一个身份验证中间件，可以通过 Express 轻松配置。它提供了一套全面的策略，支持使用用户名和密码、Google、Facebook、Twitter 等进行身份验证。

安装以下软件包：



npm install passport passport-google-oauth20 passport-microsoft --save
Enter fullscreen mode Exit fullscreen mode

步骤4：路线设置

我们将在应用中设置基于令牌的重定向社交登录。当我们现有的应用已包含电子邮件、密码设置，并需要添加社交登录作为增强功能时，此流程非常有用。

使用express-generator为 express 应用程序设置基本样板。

在 index.js 中设置以下路由：



app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'], session: false }));
app.get('/auth/google/redirect', passport.authenticate('google', { session: false, failureRedirect: `https://localhost:3000/login` }), (req, res) => {
  res.redirect(req.user); //req.user has the redirection_url
});

// Microsoft Routes
router.get('/auth/microsoft', passport.authenticate('microsoft', { session: false }));
router.get('/auth/microsoft/redirect', passport.authenticate('microsoft', { session: false, failureRedirect: `https://localhost:3000/login` }), (req, res) => {
  res.redirect(req.user);
});
Enter fullscreen mode Exit fullscreen mode

在这里，当用户在浏览器中点击“使用 Google 或 Microsoft 登录”时，会调用路由/auth/google或/auth/microsoft。在后台，Passport 会与 Google/Microsoft 进行通信，并将用户引导至各自的同意屏幕。

同意屏幕会告知用户谁在请求访问其数据以及应用请求访问哪些类型的数据。语句的后半部分属于scope 对象。在我们的应用中，我们需要访问用户的 Google个人资料和电子邮件地址，因此将其添加到了 scope 对象中。重定向路由将在稍后讨论。

步骤 5：Google 和 Microsoft 策略设置

在项目根目录中创建一个新文件（google_oauth.js）并添加以下代码。



const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const jwt = require('jsonwebtoken');
passport.use(new GoogleStrategy({
  callbackURL: `http://localhost:5500/auth/google/redirect`,  //same URI as registered in Google console portal
  clientID: process.env.GOOGLE_CLIENT_ID, //replace with copied value from Google console
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
},
  async (accessToken, refreshToken, profile, done) => {
    try {
      let user_email = profile.emails && profile.emails[0].value; //profile object has the user info
      let [user] = await db('users').select(['id', 'name', 'email']).where('email', user_email); //check whether user exist in database
      let redirect_url = "";
      if (user) {
        const token = jwt.sign(user, process.env.JWT_SECRET, { expiresIn: '1h' }); //generating token
        redirect_url = `http://localhost:3000/${token}` //registered on FE for auto-login
        return done(null, redirect_url);  //redirect_url will get appended to req.user object : passport.js in action
      } else {
        redirect_url = `http://localhost:3000/user-not-found/`;  // fallback page
        return done(null, redirect_url);
      }
    } catch (error) {
      done(error)
    }
  }
));
Enter fullscreen mode Exit fullscreen mode

以类似的方式，创建一个新文件（microsoft_oauth.js）并复制粘贴上述代码。只需对其进行以下更改：



const MicrosoftStrategy = require('passport-microsoft').Strategy;
passport.use(new MicrosoftStrategy({  
callbackURL: `http://localhost:5500/auth/microsoft/redirect`,  
clientID: process.env.MICROSOFT_CLIENT_ID,  
clientSecret: process.env.MICROSOFT_CLIENT_SECRET,  
scope: ['openid', 'profile', 'email']  
}
Enter fullscreen mode Exit fullscreen mode

回调函数中参数的简单解释：

  1. accessToken用于代表用户发出 API 请求。我们的应用不需要此令牌。
  2. 通常，访问令牌的有效期是有限的，因此可以使用refreshToken来获取新的访问令牌。
  3. profile将包含服务提供商提供的用户个人资料信息。
  4. done 是回调函数，它在查询成功后被调用，并将已通过身份验证的用户传递给 Passport。done 的第一个参数是错误对象，在我们的代码中它为 null，这告诉 Passport 一切正常，没有错误。

当最终用户在同意屏幕中批准我们的应用程序时，将调用重定向 api（ /auth/google/redirect或/auth/microsoft/redirect ）， req.user对象已通过护照设置为适当的重定向 URL，并且用户将登陆该页面。

由于我们不通过 Cookie 维护会话，因此传递了一个额外的session: false键。如果我们必须使用 Cookie 设置应用程序，则不会传递此键。此外，我们需要引用cookie-session并使用 Passport 的serializeUser和deserializeUser函数，以便根据 Google/Microsoft 唯一的配置文件 ID有效地管理已保存的 Cookie 。不过，建议使用数据库中现有的用户 ID 。在index.js
中引用上述两个文件，并在本地测试应用程序。

可选：应用验证

尽管如果敏感范围未被访问，则这不是强制性的。对于生产应用程序，无论请求的范围如何，都应该这样做。

对于Microsoft来说，验证我们的应用程序非常容易，前往 Azure 门户，然后从侧边栏进入品牌部分。

您可以在此处上传应用徽标。如有需要，请添加服务条款和隐私声明链接。要验证发布者域名，只需将microsoft-identity-association.json文件上传到您网站 S3 存储桶的.well-known文件夹中即可。

对于谷歌来说，事情有点棘手。不过这里提供了一些解释。
我们可以在OAuth 同意屏幕（谷歌控制台门户）提供相应的授权域名、主页、服务条款和隐私政策链接后，提交我们的应用进行验证。如果没有请求敏感范围，该过程大约需要4-5 天。如果需要，谷歌团队会发送几轮后续邮件，仅此而已。

除了获得验证之外，这样做的好处是用户可以在同意屏幕上看到我们的应用程序徽标和应用程序名称，这使其更加专业。

感谢您的阅读，并祝贺您坚持到了最后。

干杯！！

文章来源：https://dev.to/asim_ansari7/setting-up-social-logins-with-node-js-and-passport-js-1m16
Devto 翻译
PREV
DeepSeek-R1 671B：完整硬件要求
NEXT
在 AWS 上部署 REACT + NODE 应用到生产环境