Войдите с именем пользователя или электронной почтой, используя узел, и отреагируйте

Я создаю страницу входа, которая должна войти в систему, если мы введем имя пользователя или адрес электронной почты и пароль. серверная часть (nodejs) работает, но у меня проблема с интерфейсом. Я сделал часть имени пользователя, но понятия не имею, как сделать электронную почту. Было бы хорошо, если бы кто-нибудь помог мне. Мой код включает в себя:

серверная часть: сервер.js

app.post('/users/login', (req, res) => {
    const userInfo = req.body  
    if (req.body.username){
    Register.findOne(
      { username: userInfo.username }, function (err, user) {
      if (err) {
        res.status(500).send(err)
      } else {
        console.info(user)
        if (user !== null) {
          if (user.password === userInfo.password) {
              res.status(201).json({success: true, user: user, message: 'LOGGED_IN'})             
          } else {
            res.status(201).json({success: false, message:'WRONG_PASSWORD'})
          }
        }} else {
          res.status(201).json({success: false, message: 'NOT_FOUND'})
        }
      }
    })}
    else if (req.body.email){
      Register.findOne(
        { email: userInfo.email }, function (err, user) {
        if (err) {
          res.status(500).send(err)
        } else {
          console.info(user)
          if (user !== null) {
             if (user.password === userInfo.password) {
              res.status(201).json({success: true, user: user, message: 'LOGGED_IN'})             
          } else {
            res.status(201).json({success: false, message:'WRONG_PASSWORD'})
          }
        }} else {
          res.status(201).json({success: false, message: 'NOT_FOUND'})
        }
      }
    })}
  })

ваше единственное имя пользователя, поэтому вам действительно нужно изменить запрос, если это продолжение, findOne имеет функциональность или, поэтому вы можете сопоставить как поле имени пользователя, так и адрес электронной почты, остальное - просто дублирование

— 17.03.2022 21:43

Не могли бы вы указать больше, я отправляю и электронную почту, и имя пользователя, и это зависит от того, что вводит пользователь, я протестировал бэкэнд с почтальоном, и он работает, проблема в интерфейсе, он работает только для имени пользователя, я пытался сделать то же самое для электронной почты, но ничего не помогло

— 17.03.2022 22:06

Я хочу разрешить пользователю входить в систему либо с именем пользователя, либо с почтой во внешнем интерфейсе, не заставляя его входить только с именем пользователя или только с электронной почтой.

— 17.03.2022 22:22

node.js reactjs

17.03.2022 21:31

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я хотел начать с того, что сообщил вам, что у вас есть несколько проблем с доступом, а также проблемы с безопасностью. Но сначала давайте поработаем :)

Когда у вас есть только одно поле ввода для имени пользователя/электронной почты, вам нужно проверить одну переменную на сервере, если это электронная почта, выполните поиск электронной почты. Если это не электронная почта, проверьте имя пользователя.

const isEmail = (str) => {
  // return true when str is an email
  // return false when str is not an email
};

app.post("/users/login", (req, res) => {
  const { username, password } = req.body;

  const callback = (err, user) => {
    if (err) {
      res.status(500).send(err);
      return;
    }

    if (user) {
      res.status(201).json({ success: true, message: "LOGGED_IN" });
    } else {
      res
        .status(201)
        .json({ success: false, message: "USER_AND_OR_PASSWORD_WRONG" });
    }
  };

  if (isEmail(username)) {
    Register.findOne({ email: username, password: password }, callback);
  } else {
    Register.findOne({ username: username, password: password }, callback);
  }
});

Итак, теперь об анти-шаблонах внутри вашего кода.

Как правило, выдавать информацию «Пользователь не найден» — плохая практика. Эта информация может быть использована злонамеренно, так как это дает другим людям возможность проверить, зарегистрирована ли электронная почта на вашем сайте или нет. Поэтому вам следует сообщать только информацию о том, что «пользователь и/или пароль неверны», и даже не сообщать информацию, если вы не нашли данный адрес электронной почты, если он не существует.
Кнопка, которую вы используете для отправки формы, должна быть просто type = "submit" (по умолчанию). Затем у вас должен быть прослушиватель onSubmit в теге формы. Это позволяет вам использовать проверку HTML 5, которая запускается только при отправке формы. Имея прослушиватель событий на кнопке вместо формы, вы сводите на нет этот эффект.
У вас должны быть метки для ваших полей ввода (и нет, заполнители не являются метками). Использование заполнителей в качестве меток, к сожалению, является широко распространенным антипаттерном. См. это как дополнительную информацию Заполнитель VS Label для ввода в HTML5 (и об этом много много сообщений)
И, пожалуйста, убедитесь, что ваши пароли не являются открытым текстом внутри вашей базы данных.

Если у вас есть какие-либо вопросы о том, почему, я буду рад помочь :)

Спасибо за всю эту информацию, и это работает.

— 18.03.2022 11:48

17.03.2022 23:56