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', то попробуйте это решение.
 

Вложения

Последнее редактирование:
Нажмите, чтобы раскрыть...
ahynak сказал(а):
Помоги не отображается авторизация, все проверил.
Нажмите, чтобы раскрыть...
Должно работать. Его запускали уже десятки раз разными людьми. Код из архива брал?
Попробуй пересмотреть видео, там буквально каждая строчка объясняется.
 
Это уже совсем другая история. Что из себя представляет худ? Это просто html с какими-то данными. Подключить html не проблема. Тут нужно разобраться какие данные нужны в интерфейсе и передавать их с сервера.
 
Lev Angel сказал(а):
Сейчас мы инициируем показ окна входа с сервера. Если делать это сразу на клиенте, то окно будет выскакивать быстрее.
Как вариант еще поискать на вики, может быть функция которая отключает авто спавн.
Нажмите, чтобы раскрыть...
а как например сделать чтобы был виден не персонаж, а пейзаж к примеру этот. Координаты: X: -1796.63 Y: -855.89 Z: 9.20 окно рега.png
 
kylie сказал(а):
а как например сделать чтобы был виден не персонаж, а пейзаж к примеру этот. Координаты: X: -1796.63 Y: -855.89 Z: 9.20
Нажмите, чтобы раскрыть...
Вижу давно тебе уже не отвечают, ну отвечу я. Я совсем не опытный в этом деле, поэтому к сожалению оптимальное решение поставленной задачи дать не смогу. Но на крайний случай думаю можно было бы просто поиграться с невидимостью игрока), например использовать в серверной части player.alpha = 0;
Нажмите, чтобы раскрыть...
 
Привет, благодарю за подробный гайд, но есть у меня 1 ошибка, пишет document is not defined,вот код
var name_ = document.getElementById("nameReg").value;
 
Объект document есть в браузерном окружении (в CEF). Возможно ты пытаешься использовать его в клиентском скрипте, где этого объекта не будет.
 
Приветствую всех. Помогите пожалуйста, возникла проблема. При регистрации аккаунта все проходит нормально. Но при попытке логина даже если вводишь верный пароль то появляется ошибка о том что пароль не верный. Я уже скопировал оригинальный код автора и вставил в свой файл, и изменил тип данных пароля на LONGTEXT, все равно ничего не работает. В консоль выводил ошибки из колбэка bcrypt и query, ошибок нет. Вот код:


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

    db.connection.query(
        'SELECT * FROM accounts WHERE login = ? LIMIT 1',
        [data.login],
        function(error, result) {
            if (result.length == 0) {
                return player.call(
                    'showAuthError',
                    ['Неверный логин или пароль']
                );
            }

            const password = result[0].password;

            bcrypt.compare(data.password, password).then(function(error, isMatched) {
                if (isMatched) {
                    return player.call('hideForm');
                }

                player.call(
                    'showAuthError',
                    ['Неверный логин или пароль']
                );
            });
        }
    );
});
 
Kean сказал(а):
изменил тип данных пароля на LONGTEXT, все равно ничего не работает
Нажмите, чтобы раскрыть...
А ты случайно не пробуешь заходить под юзером которого создал до смены типа поля? Если так, то под ним уже не зайдешь, т .к. в базе у него пароль обрезанный. Надо нового создать.
 
Lev Angel сказал(а):
А ты случайно не пробуешь заходить под юзером которого создал до смены типа поля? Если так, то под ним уже не зайдешь, т .к. в базе у него пароль обрезанный. Надо нового создать.
Нажмите, чтобы раскрыть...
Прошу прощения за ещё один ответ, но я делал уже всё. Я проверял все айдишники, имена триггеров, ивентов, создавал нового юзера, очищал таблицу. Может проблема в модифицированном коде регистрации и модифицированной таблице? Вот код и скрин:1700978182683.png

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

    db.connection.query(
        'SELECT * FROM accounts WHERE login = ? LIMIT 1',
        [data.login],
        function(error, result) {
            if (result.length == 0) {
                return player.call(
                    'showAuthError',
                    ['Неверный логин или пароль']
                );
            }

            const password = result[0].password;

            bcrypt.compare(data.password, password).then(function(error, isMatched) {
                if (isMatched) {
                    return player.call('hideForm');
                }

                player.call(
                    'showAuthError',
                    ['Неверный логин или пароль']
                );
            });
        }
    );
});

mp.events.add('onRegisterAttempt', (player, data) => {
    let socialClubID = player.rgscId;
    data = JSON.parse(data);

    db.connection.query(
        'SELECT static FROM accounts WHERE login = ?',
        [data.login],
        function(error, result) {
            if (result.length > 0) {
                return player.call(
                    'showAuthError',
                    ['Этот логин уже занят']
                );
            }

            bcrypt.hash(
                data.password,
                saltRounds,
                function(error, hash) {
                    db.connection.query(
                        'INSERT INTO accounts SET socialclub = ?, login = ?, password = ?',
                        [socialClubID, data.login, hash],
                        function(error, result) {
                            player.call('hideForm');
                        }
                    );
                }
            );
        }
    );
});
 
Ошибка 'Неверный логин или пароль' может быть также связана с тем, что по переданному логину не нашло запись в базе данных. Проверь в какую ветку логики заходит в твоем случае и действительно ли там приходит все что ты ожидаешь.
 
сделал все по туториалу, но при попытке авторизации выдает ошибку ReferenceError: mp is not defined, я поставил var mp = window.mp; Выдает ошибку TypeError: Cannot read properties of undefined (reading 'trigger') помогите пожалуйста
 
Lertex сказал(а):
сделал все по туториалу, но при попытке авторизации выдает ошибку ReferenceError: mp is not defined, я поставил var mp = window.mp; Выдает ошибку TypeError: Cannot read properties of undefined (reading 'trigger') помогите пожалуйста
Нажмите, чтобы раскрыть...
Получилось решить проблему?
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх