JS Регистрация и авторизация на CEF + MySQL

  • Автор темы Автор темы Lev Angel
  • Дата начала Дата начала
  • Featured
Сегодня мы с Вами напишем с нуля полноценный скрипт регистрации и авторизации для сервера rage mp. В качестве интерфейса мы не будем использовать команды, а сразу сделаем "красиво" на CEF. В качестве базы данных будем использовать MySQL.


Видео версия как обычно на youtube канале:
Видео версия урока​

Для начала я нашел в Интернете простенький HTML шаблон страницы авторизации: https://codepen.io/colorlib/pen/rxddKy
Помещаем его в папку cef нашего клиентского скрипта accounts. Туда же ложим стили (style.css) и браузерные скрипты (script.js), которые мы напишем дальше.
Я немного модифицировал шаблон:
1. Добавил фоновую картинку
2. Расставил id для полей ввода, чтобы было удобнее работать с ними.
3. Убрал неиспользуемые стили
4. Добавил блок для вывода ошибок
5. Перевел на русский язык.

В итоге html файл выглядит так:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="package://accounts/cef/style.css">
</head>
<body>

<div class="login-page">
    <div class="form">
        <div id="error"></div>
        <form class="register-form" id="register">
            <input id="reg-login" type="text" placeholder="Логин"/>
            <input id="reg-password" type="password" placeholder="Пароль"/>
            <input id="reg-password-confirm" type="password" placeholder="Повторите Пароль"/>
            <button type="button" onclick="registerAttempt()">Регистрация</button>
            <p class="message">Уже зарегистрированы? <a href="#" onclick="showLogin()">Войти</a></p>
        </form>
        <form class="login-form" id="login">
            <input id="log-login" type="text" placeholder="Логин"/>
            <input id="log-password" type="password" placeholder="Пароль"/>
            <button type="button" onclick="loginAttempt()">Войти</button>
            <p class="message">Не зарегистрированы? <a href="#" onclick="showRegister()">создать аккаунт</a></p>
        </form>
    </div>
</div>


<script src="package://accounts/cef/script.js"></script>

</body>
</html>

Чтобы показать этот интерфейс игроку при входе на сервер, будем дергать с сервера на клиент событие showLoginDialog.
JavaScript: 
mp.events.add("playerReady", player => {
    player.call('showLoginDialog');
});

На клиентской стороне добавим обработчик этого события
Код: 
let loginBrowser;

mp.events.add('showLoginDialog', () => {
    loginBrowser = mp.browsers.new('package://accounts/cef/index.html'); // инициализируем браузер и отображаем страничку входа
    loginBrowser.execute("mp.invoke('focus', true)"); // показываем курсор
    mp.gui.chat.activate(false); // блокируем открытие чата при вводе текста в поля формы
});

Теперь при входе игрока на сервер ему будет показываться на форма входа.

form.jpg

Вернемся теперь к index.html и браузерной части. У нас есть две формы (register и login). Форма login отображается по-умолчанию, а register скрыта в стилях. Внизу каждой формы есть ссылка на другую и при помощи функций showLogin() и showRegister() мы будем переключаться между ними. Также для кнопок входа и регистрации добавлен вызов функций registerAttempt() и loginAttempt(), которые будут вызываться по событию onclick

В script.js добавим реализацию этих функций. С переключением между формами все просто:
JavaScript: 
function showRegister(){
    document.getElementById('login').style.display = 'none';
    document.getElementById('register').style.display = 'block';
}

function showLogin(){
    document.getElementById('login').style.display = 'block';
    document.getElementById('register').style.display = 'none';
}

При отправке запроса на вход или регистрацию нам нужно считать содержимое полей формы, выполнить их базовые проверки и передать в клиент rage mp
JavaScript: 
function registerAttempt(){
    // считываем содержимое полей
    const login = document.getElementById('reg-login').value;
    const password = document.getElementById('reg-password').value;
    const passwordConfirm = document.getElementById('reg-password-confirm').value;
    resetError();

    // Проверяем чтобы поля были заполнены, они были нужной длинны и пароли совпадали
    if(!login || login.length < 3){
        return showError('Введите логин');
    }

    if(!password || password.length < 6){
        return showError('Введите пароль');
    }

    if(password != passwordConfirm){
        return showError('Пароли не совпадают');
    }

    // Отправляем логин и пароль на клиент
    mp.trigger('registerAttempt', JSON.stringify({ login, password }) );
}

function loginAttempt(){
    const login = document.getElementById('log-login').value;
    const password = document.getElementById('log-password').value;
    resetError();

    if(!login || login.length < 3){
        return showError('Введите логин');
    }

    if(!password || password.length < 6){
        return showError('Введите пароль');
    }

    mp.trigger('loginAttempt', JSON.stringify({ login, password }) );
}

mp.trigger позволяем нам отправить из браузера на клиент только один дополнительный параметр. И это может быть только строка или число. Нам же нужно отправить два значения. Мы не можем отправить напрямую массив или объект, но мы можем преобразовать наш объект с логином и паролем в json строку JSON.stringify({ login, password }). И теперь эту строку мы легко передаем в одном аргументе.

Также в коде Вы наверное заметили функции связанные с выводом ошибок в форму на нашей страничке. Здесь все просто. У нас есть div блок с id error. Он находится выше наших форм и поэтому может показываться независимо от того на какой форме сейчас пользователь.

JavaScript: 
function showError(message){
    const errorBlock = document.getElementById('error');
    errorBlock.innerText = message;
    errorBlock.style.display = 'block';
}

function resetError(){
    const errorBlock = document.getElementById('error');
    errorBlock.innerText = '';
    errorBlock.style.display = 'none';
}

В клиентской части добавим обработчики событий loginAttempt и registerAttempt, которые будут вызываться из браузерного скрипта.
JavaScript: 
mp.events.add('loginAttempt', (data) => {
    mp.events.callRemote('onLoginAttempt', data);
});

mp.events.add('registerAttempt', (data) => {
    mp.events.callRemote('onRegisterAttempt', data);
});

Они максимально простые и просто передают данные с браузера дальше на сервер при помощи callRemote. Напоминаю что в качестве data у нас JSON строка с логином и паролем. В таком виде мы передаем ее дальше, поскольку callRemote также позволяет нам передавать только простые строки и числа.

На серверной стороне прежде чем обработать события onLoginAttempt и onRegisterAttempt нужно кое-что подготовить:
  1. Добавить пакет mysql и настроить подключение к серверу MySQL. Структура базы данных и само подключение будет таким же, как и в уроке по подключению MySQL. У нас будет 1 таблица accounts с тремя столбцами: id, login и password
  2. Добавить пакет bcrypt для генерации хэша паролей и его проверки.
JavaScript: 
mp.events.add('onLoginAttempt', (player, data) => {
    data = JSON.parse(data); // преобразовуем данные из json в объект
    DB.query('SELECT * FROM accounts WHERE login = ? LIMIT 1', [data.login], function (error, results) { // ищем аккаунт по логину
        if(results.length == 0) return player.call('showAuthError', ['Неверный Логин и/или Пароль']); // если аккаунт с таким логином не найден, то возвращаем на клиент текст ошибки

        const passwordHash = results[0].password; // если же аккаунт есть, то берем его хеш пароля
        bcrypt.compare(data.password, passwordHash, function(err, isMatched) { // сравниваем хэши паролей из базы данных и того что указал пользователь
            if( isMatched ) return player.call('hideLoginDialog');  // если пароли не совпадают, значит пользователь авторизовался успешно
            player.call('showAuthError', ['Неверный Логин и/или Пароль']); // если же пароли не совпали, то опять таки возвращаем на клиент текст ошибки при помощи события showAuthError
        });
    });
});

На клиенте событие showAuthError просто показывает текст ошибки в форме.
JavaScript: 
mp.events.add('showAuthError', (errorMessage) => {
    loginBrowser.execute(`showError("${errorMessage}")`);
});

А при успешном входе мы скрываем окно авторизации и считаем что игрок авторизовался
JavaScript: 
mp.events.add('hideLoginDialog', () => {
    loginBrowser.execute("mp.invoke('focus', false)");
    loginBrowser.active = false;
    mp.gui.chat.activate(true);
});

Для регистрации на серверной стороне обработчик onRegisterAttempt будет немного сложнее. Прежде чем добавить аккаунт нам нужно проверить его на уникальность и его такой логин уже есть в базе данных, то выдавать ошибку.

JavaScript: 
mp.events.add('onRegisterAttempt', (player, data) => {
    data = JSON.parse(data);

    DB.query('SELECT id FROM accounts WHERE login = ?', [data.login], function (error, results) {  // Проверяем уникальность логина
        if(results.length > 0) return player.call('showAuthError', ['Аккаунт с таким Логином уже существует']); // Если такой логин уже есть, то возвращаем ошибку

        bcrypt.hash(data.password, saltRounds, function(err, passwordHash) { // Создаем хэш пароля
            DB.query('INSERT INTO accounts SET login = ?, password = ?', [data.login, passwordHash], function (error, results) { // Добавляем аккаунт в базу данных
                player.call('hideLoginDialog'); // Скрываем окно авторизации
            });
        });
    });

});


Для тех кто захочет дальше ковырять эту форму, напишу парочку идей того, что можно улучшить и доработать:
1. Добавить защиту от перебора паролей. Кикать после 3 неправильных вводов.
2. Написать функцию isPlayerLoggedIn() которая будет возвращать true если игрок авторизовался и false если еще нет.
3. Добавить столбец position в таблицу accounts. Записывать туда позицию игрока при выходе с сервера.
4. Добавить возможность восстановить пароль. Для этого понадобиться добавить поле для email аккаунта и какой-то способ чтобы отправлять электронные письма с сервера.

Решение задач от пользователя @geneff
Задачи 1-3
Задача 4 (восстановление пароля)

Если при установке библиотеки bcrypt появляется ошибка 'undefined symbol: napi_module_register', то попробуйте это решение.
 

Вложения

Последнее редактирование:
Нажмите, чтобы раскрыть...
veyyn сказал(а):
Решил установкой bcryptjs

Для тех, у кого возникает такая же проблема (ошибок таких в интернете много):

1.Обновите node js
2. Удалите bcrypt (если устанавливали)
Код: 
npm uninstall bcrypt
3.Установите bcryptjs
Код: 
npm install bcryptjs
4.Пропишите подключение скрипта в нужном файле сервера:
Код: 
 const bcrypt = require('bcryptjs');
Нажмите, чтобы раскрыть...
Спасибо что поделился решением (y) Добавил ссылку в первый пост.
 
Вот хоть убей, сделал все так же, но координаты при выходе все равно не пишутся почему то.
Код: 
mp.events.add('playerReady', player => {
    player.logged = false;
    player.isPlayerLogged = () => player.logged;
    player.call('showLoginDialog');
});


mp.events.add("playerQuit", player => {
    if (player.isPlayerLogged()) {
        DB.connection.query('UPDATE accounts SET lastPosX = ?, lastPosY = ?, lastPosZ = ? WHERE login = ? LIMIT 1',
        [player.position.x, player.position.y, player.position.z, player.login], err => {
            if (err) {
                console.log('Ошибка добавления позиции');
            } else {
                console.log('Позиции обновлены');
            }
        });
    }
});

Что не так сделал? Причем в консоль тоже ничего не выводится. Ни если выйти из игры через меню, ни если закрыть через диспетчер задач.
 
Во-первых учитывай бывает что рейдж не сразу "замечает" выход игрока, а с задержкой 10-20 секунд. Соответственно playerQuit тоже сработает не сразу.
Во-вторых нужно проверить что при выходе игрока player.logged действительно true
 
Lev Angel сказал(а):
Во-первых учитывай бывает что рейдж не сразу "замечает" выход игрока, а с задержкой 10-20 секунд. Соответственно playerQuit тоже сработает не сразу.
Во-вторых нужно проверить что при выходе игрока player.logged действительно true
Нажмите, чтобы раскрыть...
Разобрался со скриптом. Но работает все равно не так. Например, если закрыть совсем игру, то координаты не пишутся в БД. Пишутся только если подключиться к другому серверу. Есть идеи, как реализовать это? Конечно можно каждые несколько секунд писать в базу и обновлять координаты. Но при большом онлайне сервер просто ляжет от такого количества запросов.
 
yagyar001 сказал(а):
Разобрался со скриптом. Но работает все равно не так. Например, если закрыть совсем игру, то координаты не пишутся в БД. Пишутся только если подключиться к другому серверу. Есть идеи, как реализовать это? Конечно можно каждые несколько секунд писать в базу и обновлять координаты. Но при большом онлайне сервер просто ляжет от такого количества запросов.
Нажмите, чтобы раскрыть...
:unsure: я это особо не тестил, но мне с этим тоже нужно разобраться))
Как вариант можно попробовать записывать координаты по таймеру не в БД, а просто в объект игрока player на сервере. При выходе брать координаты не из player.position, а из того что сам записал. Не факт что сработает, но я бы попробовал. Главное чтобы playerQuit срабатывал.
 
Sakura_ сказал(а):
Всем привет. Возникла вот такая ошибка. Посмотреть вложение 401
Нажмите, чтобы раскрыть...
В папке server-files нажми одновременно CTRL + SHIFT + ПКМ. Открой git bush или PowerShell. Введи команду "npm i bcrypt". Если устанавливал уже, тогда сначала введи "npm uninstall bcrypt", а потом "npm i bcrypt". Ошибку прочитай, он же пишет, что не может найти модуль bcrypt.
 
Lev Angel сказал(а):
:unsure: я это особо не тестил, но мне с этим тоже нужно разобраться))
Как вариант можно попробовать записывать координаты по таймеру не в БД, а просто в объект игрока player на сервере. При выходе брать координаты не из player.position, а из того что сам записал. Не факт что сработает, но я бы попробовал. Главное чтобы playerQuit срабатывал.
Нажмите, чтобы раскрыть...
Попробую в ближайшее время реализовать, отпишусь)
 
Lev Angel сказал(а):
:unsure: я это особо не тестил, но мне с этим тоже нужно разобраться))
Как вариант можно попробовать записывать координаты по таймеру не в БД, а просто в объект игрока player на сервере. При выходе брать координаты не из player.position, а из того что сам записал. Не факт что сработает, но я бы попробовал. Главное чтобы playerQuit срабатывал.
Нажмите, чтобы раскрыть...
Вообще в программировании не сильно силен, js изучал давно. А cef так вообще первый раз открыл)) А интересно, есть такая возможность на клиентской стороне записать в localStorage координаты? И вообще в базу не писать их, а оттуда доставать при подключении?
 
yagyar001 сказал(а):
Вообще в программировании не сильно силен, js изучал давно. А cef так вообще первый раз открыл)) А интересно, есть такая возможность на клиентской стороне записать в localStorage координаты? И вообще в базу не писать их, а оттуда доставать при подключении?
Нажмите, чтобы раскрыть...
В теории да. Можно попробовать https://wiki.rage.mp/index.php?title=Storage.data
но только если данные шифруются на клиенте, иначе это будут абузить)))
 
yagyar001 сказал(а):
Разобрался со скриптом. Но работает все равно не так. Например, если закрыть совсем игру, то координаты не пишутся в БД. Пишутся только если подключиться к другому серверу. Есть идеи, как реализовать это? Конечно можно каждые несколько секунд писать в базу и обновлять координаты. Но при большом онлайне сервер просто ляжет от такого количества запросов.
Нажмите, чтобы раскрыть...
Ивент playerQuit работает в том моменте когда игрок сам выходит с сервера/игры, или вылетает игра, и при этом консоль сервера запущена, так что если у тебя работает сохранение после перезахода верез F1, могу тебя поздравить, всё отлично, ибо когда консоль закрывается, скрипты не работают.
 
seaniwe сказал(а):
Ивент playerQuit работает в том моменте когда игрок сам выходит с сервера/игры, или вылетает игра, и при этом консоль сервера запущена, так что если у тебя работает сохранение после перезахода верез F1, могу тебя поздравить, всё отлично, ибо когда консоль закрывается, скрипты не работают.
Нажмите, чтобы раскрыть...
Вот если F1 нажать и закрыть игру (на крестик), то не пишется в БД ничего. А вот через F1 если подключиться к другому серверу, то пишется.
 
Ну если в консоле сервера нет ошибок, то может быть в спам попало.
 
Помоги пожалуйста, сделали все как у тебя, не вылазиет окно при входе.
 
kylie сказал(а):
Там в консоли ошибок нет, так же в консоли не показывает отправку письма и ошибку отправки письма
Спам проверял там ничего нет..
Нажмите, чтобы раскрыть...
Тогда надо дебажить🤷‍♂️ Может там и не доходит до отправки письма, а где-то раньше есть ошибка.
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх