Запрос POST для входа с использованием AJAX через Node.js - PullRequest
Новая
       13

Запрос POST для входа с использованием AJAX через Node.js

0 голосов
/ 27 мая 2020

Я пытаюсь отправить запрос AJAX POST для страницы входа, используя javascript через Node.js, однако я действительно не знаю, как это сделать. Извините, что я новичок в этом. Вот мой код:

In HTML: 

<form>
  <label for="email"><b>Email Address</b></label><br>
  <input type="text" name="email"><br>
  <label for="password"><b>Password</b></label><br>
  <input type="text" name="password"><br><br>
  <input type="submit" class = "button" value="Login" onclick= "submitlogin()">
</form>

In JS: 

function submitlogin(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState ==4 && this.status == 200){
        console.log("success");
} else if (this.readyState == 4 && this.status == 401) {
        console.log("Failed");
}
};
xhttp.open("POST","/login",true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify({ email: this.email, password: this.password }));
}

Маршрут: 

var user = [{
            EmailAddress: 'anne@gmail.com',
            Password: 'first'
        }]

router.post('/login', function(req, res, next) {
if((req.body.email === user[0].EmailAddress) && user[0].Password === req.body.password){
  res.status(200).send();
} else {
  res.status(401).send();
}
});

Что следует go в xhttp.send ()? Что я делаю не так? Кто-нибудь может мне с этим помочь? (желательно просто javascript не jQuery) Спасибо!

1 Ответ

1 голос
/ 27 мая 2020

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

В вашем коде есть много вещей, которые нужно улучшить, но я не буду сосредоточьтесь на этом прямо сейчас. Итак, прежде всего, если вы обратите внимание на то, что происходит в вашем браузере сразу после нажатия кнопки отправки, по URL-адресу вы можете увидеть введенные данные в формате строки запроса. И это не относится к описанному маршруту / login.

Что-то вроде:

http://localhost:3000/?email=marcelobraga%40hotmail.com&password=agoodpassword

Это произошло потому, что элемент Form по умолчанию использует параметры для общаться со своим сервером. Не объект "Body", который вы ожидаете получить через объект HTTP-запроса.

Если вы действительно хотите получить доступ к данным для входа, переданным в качестве параметров URL, вам нужно просто исправить свой код на передней панели и бэкэнд, чтобы правильно передать объект и подготовить ваш сервер к чтению его в нужном месте.

Я настоятельно рекомендую вам не использовать таким образом элемент формы html. Либо используйте XMLHttpRequest. Я предлагаю использовать Ax ios для обработки HTTP-запросов и отправки информации Body, чтобы избежать явной такой конфиденциальной информации, как логины. Другая причина использовать Ax ios - простой синтаксис и чистый код.

Посмотрите, как я сделал это с помощью ax ios:

In HTML ( Я вставлю все HTML, чтобы вы увидели импорт тега Ax ios Lib): 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- importing axios to this document -->
    <title>Document</title>
</head>
<body>
    <label for="email"><b>Email Address</b></label><br>
    <input type="text" id="email" name="email"><br>
    <label for="password"><b>Password</b></label><br>
    <input type="text" id="password" name="password"><br><br>
    <input type="submit" class="button" value="Login" onclick="submitlogin()">
</body>
</html>

В JS файл: 

        const emailInput = document.getElementById("email").value //getting the value from input typed
        const passwordInput = document.getElementById("password").value //getting the value from input typed

        axios.post('/login', 
        {
            email: emailInput,
            password: passwordInput
        }
    )};

В express js: 

const express = require("express")
const app = express();
const path = require('path');

app.use(express.json()); 
app.use(express.urlencoded({ extended: true }));

app.post('/login', (req, res) => {
    console.log(req.body); //console to verify the body data received on this endpoint request

    const user = [{
        EmailAddress: 'anne@gmail.com',
        Password: 'first'
    }];

    if((req.body.email === user[0].EmailAddress) && user[0].Password === req.body.password){
        res.status(200).send("Success");
        console.log("Success");
      } else {
        res.status(401).send("Wrong email or password");
        console.log("Wrong email or password");
      }
});

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Заключение

То, как вы это делали, сделало данные недоступными на бэкэнде. Серверная часть ожидала получения информации для продолжения проверки данных тела запроса. И вы передавали его как параметр запроса.

Вы можете передавать информацию с помощью параметров или параметров запроса в бэкэнд, но информация для входа в систему должна быть более защищенной. Отправляя его в свое тело, избегайте, чтобы люди могли найти эти данные, например, в вашей истории. Это не самый безопасный способ, потому что кто-то может поймать эти данные по середине. Но в любом случае это то, что вам следует знать.

Надеюсь, я смогу вам помочь.

...