如何用Passport LocalStrategy实现用户名/邮箱双字段登录？

嘿，这个需求我之前做项目的时候刚好实现过，其实只需要调整下Passport的LocalStrategy验证逻辑就搞定了，不用太复杂～

1. 调整前端登录表单 #

首先把原来的用户名输入框改成通用的，比如命名为loginId，让用户明确知道可以输入用户名或邮箱。示例HTML代码：

<form action="/login" method="post">
  <div>
    <label>用户名/邮箱:</label>
    <input type="text" name="loginId" required placeholder="请输入用户名或邮箱">
  </div>
  <div>
    <label>密码:</label>
    <input type="password" name="password" required>
  </div>
  <button type="submit">登录</button>
</form>

2. 修改Passport的LocalStrategy核心逻辑 #

原来的策略只根据用户名查询用户，现在我们要先判断输入内容是邮箱还是用户名，再去数据库匹配对应的用户。

先写个简单的邮箱格式判断函数，然后在passport.use里调整验证逻辑：

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const User = require('./models/User'); // 你的用户模型（Mongoose/Sequelize等）
const bcrypt = require('bcrypt'); // 假设你用bcrypt存哈希密码

// 简易邮箱格式校验
function isEmail(input) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(input.trim());
}

// 重新配置LocalStrategy
passport.use(new LocalStrategy({
    // 这里要把默认的usernameField改成我们表单里的loginId
    usernameField: 'loginId',
    passwordField: 'password'
  },
  async (loginId, password, done) => {
    try {
      // 根据输入类型查询用户：是邮箱就查email字段，否则查username字段
      const user = isEmail(loginId) 
        ? await User.findOne({ email: loginId.toLowerCase() }) // 邮箱转小写避免大小写问题
        : await User.findOne({ username: loginId });

      // 用户不存在的情况
      if (!user) {
        return done(null, false, { message: '用户名或邮箱不存在' });
      }

      // 验证密码（用bcrypt对比哈希值）
      const isPasswordMatch = await bcrypt.compare(password, user.password);
      if (!isPasswordMatch) {
        return done(null, false, { message: '密码错误' });
      }

      // 验证通过，返回用户对象
      return done(null, user);
    } catch (err) {
      // 处理数据库查询错误
      return done(err);
    }
  }
));

3. 确保登录路由适配 #

你的登录路由基本不用改，只要保证Passport的认证策略对应上就行，示例：

app.post('/login', passport.authenticate('local', {
  successRedirect: '/dashboard', // 登录成功跳转页
  failureRedirect: '/login', // 失败返回登录页
  failureFlash: true // 如果用了express-flash，可以显示错误提示
}));

注意事项 #

• 一定要确保用户模型里的username和email字段都是唯一的，比如Mongoose里给字段加unique: true约束，避免出现不同用户的用户名和邮箱重复，导致查询混淆。
• 邮箱建议转成小写后再查询，因为邮箱一般不区分大小写，避免用户输入大写邮箱找不到账号的问题。
• 密码绝对不能存明文！一定要用bcrypt这类哈希算法存储，这是Web安全的基础要求。

这样调整后，用户就能在同一个输入框里自由输入用户名或邮箱登录啦～

内容的提问来源于stack exchange，提问作者typehint