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
Последнее редактирование модератором:

Dihan48

Middle Developer
в тебя в data приходит undefined
1615107373870.png

это стандартная ошибка для таких случаев

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

Hansson

Trainee
в тебя в data приходит undefined
Посмотреть вложение 229
это стандартная ошибка для таких случаев

эвент playerJoin является зарезервированным, вызывается игрой автоматически и у него в передаваемых параметрах есть только player
если хочешь самостоятельно вызывать эвенты и контролировать их параметры то надо указывать любое другое название например "playerJoinCustom". при этом эвент не будет вызываться автоматически а только в том случае в котором ты это напишешь
Спасибо, ошибку вроде как убрало, но все равно условие, то есть вывод ника игрока, как логина в базе данных не выполняет.
 

Lev Angel

Developer
Команда форума
@Hansson показывай актуальную версию своего кода. То что в предыдущем посте было я так понимаю уже поменяли. Ты пытаешся сделать авто логин по нику?
 

Alonze

Trainee
root у меня и так стоял,но все равно ошибка, я пытался найти ответы на различных форумах,делал что там написано все равно ничего не помогает
 

Lev Angel

Developer
Команда форума
А как у тебя установлен сервер mysql? Как в туториале используешь Open Server или что-то другое?
 

Lev Angel

Developer
Команда форума
Убедись что параметры доступа верные. Пользователь mysql это дефолт для open server. В xampp может быть другой юзер и пароль, нужно смотреть документацию.
Через navicat ты подключаешься к базе? Имя базы database?
 

Lev Angel

Developer
Команда форума
Возможно что-то с правами доступа пользователя. Попробуй создать нового пользователя и дать ему полный доступ к этой базе.
Пользователь root кстати может иметь ограничение на подключения.
 

lektor

Trainee
Доброго времени суток! Можете объяснить почему не работает кнопка 'Вход' и 'Регистрации'?
 

Lev Angel

Developer
Команда форума
Доброго времени суток! Можете объяснить почему не работает кнопка 'Вход' и 'Регистрации'?
Привет! Мало данных, чтобы что-то посоветовать. В видео я рассказал и показал как это работает. Видимо что-то сделал не так ;)
 

lektor

Trainee
Привет! Мало данных, чтобы что-то посоветовать. В видео я рассказал и показал как это работает. Видимо что-то сделал не так ;)
Я скачал zip архив из вложений и сравнил со своим. Всё вроде бы такое же. Когда я нажимаю на смену с Входа на регистрацию всё работает а сами кнопки не работают подсвечиваются но действие не происходит.
 

Lev Angel

Developer
Команда форума
Я скачал zip архив из вложений и сравнил со своим. Всё вроде бы такое же. Когда я нажимаю на смену с Входа на регистрацию всё работает а сами кнопки не работают подсвечиваются но действие не происходит.
Смотри может есть какие-то ошибки в консоли сервера или клиента (F11).
 

lektor

Trainee
Смотри может есть какие-то ошибки в консоли сервера или клиента (F11).
Вроде бы всё в порядке. Могу скинуть скрин кода, всё что угодно. Ещё когда нажимаешь на кнопу без введённых данных должна вылезать красная ошибка но её почему-то нет(такое чувство что просто кнопка не действительна).Ещё может я дурак:) и не правильно закинул в проект саму панель. Как я понял ты просто создал пустой html файл и закинул туда код с сайта и потом модифицировал, и также сделал с css файлом или это нужно делать как-то по другому?
 

lektor

Trainee
Смотри может есть какие-то ошибки в консоли сервера или клиента (F11).
Вроде бы всё в порядке. Могу скинуть скрин кода, всё что угодно. Ещё когда нажимаешь на кнопу без введённых данных должна вылезать красная ошибка но её почему-то нет(такое чувство что просто кнопка не действительна).Ещё может я дурак:) и не правильно закинул в проект саму панель. Как я понял ты просто создал пустой html файл и закинул туда код с сайта и потом модифицировал, и также сделал с css файлом или это нужно делать как-то по другому?
 

Lev Angel

Developer
Команда форума
В html файле подключаем скрипт js чтобы интерфейс работал
HTML:
<script src="package://accounts/cef/script.js"></script>
Убедись что он у тебя есть и лежит в нужной папке.
 
Яндекс.Метрика
Верх