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

Сегодня мы с Вами напишем с нуля полноценный скрипт регистрации и авторизации для сервера 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 (восстановление пароля)
 

Вложения

  • mysql-reg.zip
    404,8 КБ · Просмотры: 129
Последнее редактирование модератором:

Lev Angel

Developer
Команда форума
Ясно. Ты полностью используешь код из туториала или где-то что-то менял или сам набирал?

Может быть в script.js перепутаны id полей формы в loginAttempt() или в html разметке что-то менялось.
 

Lev Angel

Developer
Команда форума
Проверил - код рабочий. Скачал архив и запустил на пустом сервере. Регистрация и авторизация работают. Воспроизвести ошибку не удалось.
 

Proger

Trainee
Не понимаю все сделал по видосику... Но то бд не сразу конектится то перезапускать по тому что не работает сразу... Что сделать чтобы все хорошо было
 

Hansson

Trainee
лПроверил - код рабочий. Скачал архив и запустил на пустом сервере. Регистрация и авторизация работают. Воспроизвести ошибку не удалось.
У меня стоит мод Freeroam, вроде как не должно влиять, тем более, что мод запустился без ошибок, следовательно это никак не влияет. Попробую переустановить мод заново.
 

Lev Angel

Developer
Команда форума
У меня стоит мод Freeroam, вроде как не должно влиять, тем более, что мод запустился без ошибок, следовательно это никак не влияет. Попробую переустановить мод заново.
Проверь еще таблицу accounts. Для поля password должна быть достаточная длинна, чтобы туда поместился весь хэш пароля. У меня сейчас там 128 символов.
1614166923185.png

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

Hansson

Trainee
Проверь еще таблицу accounts. Для поля password должна быть достаточная длинна, чтобы туда поместился весь хэш пароля. У меня сейчас там 128 символов.
Посмотреть вложение 224
Я встречал случаи когда при вставке в базу данный, если поле короче чем вставляемая в него строка, то строка просто обрезалась до длинны поля. И это даже может не вызывать никаких ошибок (зависит от настроек и способа проверки).
Это вызовет похожую проблему когда аккаунт создается, но при попытке входа у нас всегда неправильный пароль, т. к. хэш пароля обрезало.
Кажется это и есть проблема. Я поставил 24 символа, так как не вспомнил про шифровку и не учел максимальную длину. Как только будет возможность, я протестирую, исправив проблему. Спасибо заранее.
 

Brian_Galaxy

Trainee
Я вас категорически приветствую господа - товарищи. Возникла такая проблемка - При нажатии кнопочек в CEF происходит ровным счетом ничего, код оригинальный с базой и криптой. Ошибок в консоли не возникает, кроме того что порты закрыты и мастерлист бесится.
 

Voldemor

Senior Developer
Я вас категорически приветствую господа - товарищи. Возникла такая проблемка - При нажатии кнопочек в CEF происходит ровным счетом ничего, код оригинальный с базой и криптой. Ошибок в консоли не возникает, кроме того что порты закрыты и мастерлист бесится.
Я могу предположить что не срабатывает триггер, попробуй сделать консоль лог где после нажатия на кнопку или другое действие.
 

Brian_Galaxy

Trainee
Я могу предположить что не срабатывает триггер, попробуй сделать консоль лог где после нажатия на кнопку или другое действие.
Если не затруднительно, есть ли какой-нибудь пример, а то я только заползаю в сию стихию.
 

Voldemor

Senior Developer
Начнём.
Для начала нужно проверить файл script.js, и проверить есть ли там слеующий код:

JavaScript:
Считывает содежримое полей по ИД, если название поля указано не верно то будет БЕДА. (Ошибка)
 
const login = document.getElementById('reg-login').value;
    const password = document.getElementById('reg-password').value;
    const passwordConfirm = document.getElementById('reg-password-confirm').value;
    resetError();
}

Рекомендую перепроверить ваш HTML код и совпадают ли названия ИД с которых мы что то пидаемся вытащить.
Пример названия div по id - <div id="login"></div>

reg-login, reg-password - имена ИД в HTML

В последующих проверка изпользуются именно они.
 

Brian_Galaxy

Trainee
Начнём.
Для начала нужно проверить файл script.js, и проверить есть ли там слеующий код:

JavaScript:
Считывает содежримое полей по ИД, если название поля указано не верно то будет БЕДА. (Ошибка)

const login = document.getElementById('reg-login').value;
    const password = document.getElementById('reg-password').value;
    const passwordConfirm = document.getElementById('reg-password-confirm').value;
    resetError();
}

Рекомендую перепроверить ваш HTML код и совпадают ли названия ИД с которых мы что то пидаемся вытащить.
Пример названия div по id - <div id="login"></div>

reg-login, reg-password - имена ИД в HTML

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

Voldemor

Senior Developer
Проверил наличие, такой есть. Поиграл с id, логин вроде бы работает.Проверить точно нет возможности, регистрация остается бревном.
Автор показал как легко сделать подобное, по этому всё в твоих руках, СДЕЛАЙ лучше)
 

Lev Angel

Developer
Команда форума
@Brian_Galaxy если брал полностью мой код, то должно работать. Смотри может что-то не так с базой данных. Или какие-то ошибки есть в консоли.
 

Brian_Galaxy

Trainee
если брал полностью мой код, то должно работать. Смотри может что-то не так с базой данных. Или какие-то ошибки есть в консоли.
Ты оказался совершенно прав (y), проблема оказалось в БД, что странно - Создавал по гайду. Проблема утекла после найденного резерва старой базы.
 

Lev Angel

Developer
Команда форума
Супер ;) Надо наверное было добавить в урок дамп базы. Но все равно отлично что разобрались и заработало(y)
 

Hansson

Trainee
Проверь еще таблицу accounts. Для поля password должна быть достаточная длинна, чтобы туда поместился весь хэш пароля. У меня сейчас там 128 символов.
Посмотреть вложение 224
Я встречал случаи когда при вставке в базу данный, если поле короче чем вставляемая в него строка, то строка просто обрезалась до длинны поля. И это даже может не вызывать никаких ошибок (зависит от настроек и способа проверки).
Это вызовет похожую проблему когда аккаунт создается, но при попытке входа у нас всегда неправильный пароль, т. к. хэш пароля обрезало.
Попробовал, и получилось, спасибо! Я продолжаю разработку, но столкнулся с тем, что когда пытаюсь при подключении игрока сменить его ник на ник из базы данных, то ничего не выходит и вылазит вот такая вот ошибочка:
[N] Incoming connection from 127.0.0.1
undefined:1: SyntaxError: Unexpected token u in JSON at position 0
undefined

(ник соответственно не меняется)

Вот код:
JavaScript:
mp.events.add('playerJoin', (player, data) => {
    data = JSON.parse(data);
    player.customData = {};

    mp.players.forEach(_player => {
        if (_player != player)
            _player.call('playerJoinedServer', [player.id, player.name]);
    });

    player.spawn(spawnPoints[Math.floor(Math.random() * spawnPoints.length)]);

    player.model = skins[Math.floor(Math.random() * skins.length)];
    player.health = 100;
    player.armour = 100;
    DB.query('SELECT login FROM accounts WHERE id = ? LIMIT 1', [data.id], function(err, results){
        if(results){
            player.name = results;
        }
    });
});

Мод freeroam с форума. Заранее спасибо.
 
Яндекс.Метрика
Верх