Цвет

Регистрация на NodeJS

159₽ 209₽

Категории:

javascriptnodejsregisterjs

Этот скрипт является продолжением сайта на NodeJS, если вы не проходили его, возможно вам будет сложнее понять смысл этого скрипта.

Итак, в этом скрипте мы научимся создавать регистрацию на NodeJS

Для начала проверьте наличие NodeJS на вашем компьютере. Если нет, установите.

Далее в удобной для вас папке создайте файл app.js и users.json

В качестве текстового редактора будем использовать VSCode.

Пока откройте users.json и впишите туда

[]

Это будет массивом объектов, 1 объект - 1 пользователь.

Теперь как обычно нужно зайти в app.js и подключить нужные модули. В отличии от первого гайда, здесь мы подключим сразу 4 модуля (кроме стандартных).

Через консоль Windows (cmd) зайдите в папку с app.js и users.json и введите туда эти команды

npm install express
npm install sha256
npm install socket.io
npm install fs

для установки нужных модулей.

express - для использования nodejs как сервера
sha256 - для хэша
socket.io - для запросов на сервер со стороны клиента
fs - для работы с файлами

Конечно, при регистрации ещё можно отправлять письмо с подтверждением, а в нем ссылка на подтверждение почты, но это в отдельном скрипте, чтобы не забивать голову.

Итак, подключаем нужные модули в файле app.js

const express = require("express");
const { createServer } = require("node:http");
const { SocketAddress } = require("node:net");
const { join } = require("node:path");
const { Server } = require("socket.io");

const app = express();
const server = createServer(app);
const io = new Server(server);
const sha256 = require("sha256");
const fs = require("fs");
const { stringify } = require("node:querystring");

Теперь добавим ссылку на наш файл register.html

app.get("/register", (req, res) => {
   res.sendFile(join(__dirname, "register.html"));
});

И не забудем написать в конце порт для сервера

server.listen(80, () => {
console.log("server running at http://localhost");
});

Теперь создадим файл register.html по соседству с app.js и создадим в нем 4 поля и кнопку

Сначала естественно напишем стилей

<head>
   <style>
     #myForm{
       width: 30%;
       margin: 10% 0 0 35%;
     }
     #myForm>p>input{
       width: 90%;
       padding: 7px;
     }
   </style>
</head>

Теперь в body создаем импровизированную форму с 4 input и одной кнопкой. Обернем их тегом p для стиля

<body>
   <div id="myForm">
     <p><input id="login" type="text" placeholder="Login"></p>
     <p><input id="password" type="password" placeholder="Password"></p>
     <p><input id="password2" type="password" placeholder="Password again"></p>
     <p><input id="email" type="email" placeholder="Email"></p>
     <button id="btn">Регистрация</button>
   </div>

Теперь подключаем socket.io, как отдельный скрипт, и запишем в переменные наши 4 input'а

<script src="/socket.io/socket.io.js"></script>
<script>

const socket = io();
const login = document.getElementById("login");
const password = document.getElementById("password");
const password2 = document.getElementById("password2");
const email = document.getElementById("email");
const btn = document.getElementById("btn");

Теперь самое интересное. При подключении клиента к серверу нужно написать event handler для кнопки. Когда она будет нажата, мы передадим наши переменные через функцию

//socket.emit("команда", arg1, arg2, arg3...);
socket.on('connect', ()=>{
   btn.addEventListener('click', ()=>{
     socket.emit("register", login.value, password.value, password2.value, email.value);
   }
......

Все вводимые данные пользователем проверяются СТРОГО на стороне сервера и НИКОГДА на стороне клиента.

Заранее пропишем инструкцию получения списка ошибок и успешного выполнения. Пропишем их в консоль.

socket.on('errors', (errors)=>{
   console.log("Ошибки: ");
   console.log(errors);
});
socket.on('success', ()=>{
   console.log("Успешно");
});
)};

Отлично, теперь переходим к серверу.

До метода

server.listen(80, () => {
.....

Пишем следующее

io.on("connection", (socket)=>{

});

Внутри пишем функцию принятия, проверки и обработки данных по команде "register"

socket.on("register", (login, pswrd, pswrd2, email)=>{

} 

Внутри этой функции пишем все, что будет далее. Считываем данные из файла в список Users

data = fs.readFileSync("./users.json", "utf8");
Users = JSON.parse(data);

Создаем список ошибок, куда будем добавлять потенциальные ошибки

errors = [];
 

Переводим логин и email в нижний регистр. Проверяем, есть ли пустые поля.

login = login.toLowerCase();
email = email.toLowerCase();
if(login=="" || pswrd=="" || pswrd2=="" || email==""){
     errors.push("Одно или несколько полей не заполнено.");
}
  

Проверяем тип вводимых данных.

if(typeof login != "string" || typeof pswrd != "string" || typeof pswrd2 != "string" || typeof email != "string"){
     errors.push("Неправильный формат данных.");
}
  

Проверяем на запретные символы и длину строк. Проверяем совпадает ли пароль и повтор пароля.

if(/[^a-zA-Z0-9]/.test(login)){
     errors.push("Неправильный формат логина.");
   }
if(/[^a-zA-Z0-9@.]/.test(email) ||
     !email.includes("@") ||
     !email.includes(".") ||
     email.includes("@.") ||
     email.includes(".@")
   ){
     errors.push("Неправильный формат email.");
}
if(login.length < 4 || login.length > 25){
     errors.push("Длина логина от 4 до 25 символов.");
}
if(pswrd != pswrd2){
     errors.push("Пароли не совпадают.");
}
if(email.length > 50){
     errors.push("Длина email до 50 символов.");
}

Теперь проходимся по всему списку пользователей. Проверяем есть ли уже введённые логин и email в списке.

  
for(let i=0; i < Users.length; i++){
     if(Users[i].login == login){
       errors.push("Логин уже используется.");
    }
     if(Users[i].email == email){
       errors.push("Email уже используется.");
     }
   }

Если ошибки есть, отправляем клиенту инструкцию с помощью socket.emit("errors", errors);

if(errors.length != 0){
   socket.emit("errors", errors);
}

Если ошибок нет, создаем хэш и хэшируем логин и пароль. Хэш логина можно будет вписать в куки и идентифицировать пользователя по нему.

else{
   const keyWord = "my_word123";
   hLogin = sha256(keyWord + login);
   hPassword = sha256(keyWord + pswrd);
  

Создаём новую запись и добавляем в список Users.

const userNew = {
     login: `${login}`,
     hPassword: `${hPassword}`,
     email: `${email}`,
     hLogin: `${hLogin}`,
     activated: false
   };
Users.push(userNew);

Осталось записать данные в файл и отправить клиенту уведомление об успешной регистрации.

jsonString = JSON.stringify(Users, null, 2);
fs.writeFileSync("./users.json", jsonString);
socket.emit("success");
}

Чтобы проверить работу, сохраните все 3 файла: app.js, register.html и users.json

Зайдите через командную строку (в Windows cmd) в нужную папку. Введите

node app.js

и введите в адресной строке браузера:

http://localhost/register

На странице регистрации откройте консоль (F12) и проверяйте результат

Исходник сервера.

Исходник клиента.

За другими скриптами сюда.