Аутентификация пользователя без серверной части

У меня есть простое приложение Backbone.js с моделью User с разными ролями, и я использую json-server для эмулировать некоторые основы бэкэнда. Мне нужно выполнить базовую аутентификацию, т.е. мне нужно, чтобы мой пользователь мог войти в систему и где-то сохранить свою сессию (для этого ему не нужно будет входить в систему каждый раз, когда он обновляет свой браузер). У меня есть файл db.json, в котором уже есть несколько пользователей:

{
    "users": [
        {
            "login": "admin",
            "password": "password",
            "role": "admin",
            "id": 1
        }
    ]
}

а вот моя модель User:

var User = Backbone.Model.extend({
    defaults: {
        login: "",
        password: "",
        role: ""
    },
    // Updated
    url: function () {
        return "http://localhost:3000/users?login=" + 
                   this.attributes.login + "&password=" + this.attributes.password;
    }
});

Я не совсем понимаю, как мне управлять аутентификацией (т.е. вводить login и password в форму и сохранять сеанс пользователя без надлежащего бэкэнда). Я подумал о том, чтобы создать поле token в моей модели User и заполнять его каждый раз, когда пользователь входит в систему, и сохранять его в файлах cookie, но я не понимаю, как я мог сделать это в любом случае. Буду очень признателен, если кто-нибудь поможет мне с этой задачей.

ДОБАВЛЕНО На мой взгляд, это моя функция входа в систему:

signIn: function () {
    var login = $('#js-login').val();
    var password = $('#js-password').val();

    if (login && password) {
        var currentUser = new User({
            login: login,
            password: password
        });
        currentUser.fetch({
            success: function () {
                console.log(currentUser.toJSON());
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
}

Но вместо того, чтобы найти пользователя с моего json-сервера, он просто создает нового пользователя со всеми пустыми атрибутами, кроме значений полей ввода #js-login и #js-password

ДОБАВЛЕНО Думаю, мне следует найти пользователей по запросу в url выше в моей коллекции, но я на самом деле не понимаю, как мне это сделать

Репо с моим проектом


person AlexNikolaev94    schedule 13.10.2016    source источник


Ответы (2)


Это упрощенный поток для вашего приложения:

  • Каждый раз, когда пользователь открывает ваш сайт, проверяйте его файлы cookie.

    • Если файлы cookie содержат информацию о пользователе (сохраненное имя пользователя, пароль), проверьте соответствие информации в вашей БД. Если совпадают, перейдите на главную страницу. В противном случае очистите куки, перейдите на страницу входа

    • Если файлы cookie не содержат информацию о пользователе, перейдите на страницу входа

  • На странице входа, после успешного входа пользователя, сохраните информацию о пользователе в файлах cookie для проверки в следующий раз.

Вы можете использовать какой-либо механизм для кодирования информации о пользователе (токены, шифрование...) для защиты информации, хранящейся в файлах cookie/сеансах. Но хранить БД аутентификации в клиенте — очень слабая точка безопасности. Пример кода ниже:

Модель:

var User = Backbone.Model.extend({
    url: function () {
        return "users?login" + this.attributes.login + "&password=" + this.attributes.password;
    },

    isAdmin: function () {
        return (this.get("role") == "admin");
    }
});

На ваш взгляд:

// Load username password from cookie (just simple example)
var username = $.cookie("username"),
    password = $.cookie("password");

if (username && password) {
    var userModel = new User({
        login: username,
        password: password
    });
    userModel.fetch({
        success: function () {
            if (userModel.isAdmin) {
                // e.g. go to admin page
            } else {
                // e.g. go to normal user page
            }

            // Save to cookie/session here
        },
        error: function () {
            // Go to login page
        }
    });
} else {
    // Go to login page
}

О файлах cookie вы можете узнать Как установить/отключить файл cookie с помощью jQuery?

Что касается получения формы ввода имени пользователя/пароля, вы можете просто использовать простой селектор jquery (очень легко найти его в Google, например https://www.formget.com/jquery-login-form/)

person Akivamu    schedule 14.10.2016
comment
Спасибо! Похоже, это именно то, что мне нужно. Но я не очень понимаю, как мне получить логин и пароль пользователя из моей формы входа, найти этого пользователя и сохранить его учетные данные в файлах cookie. Не могли бы вы объяснить это немного подробнее? - person AlexNikolaev94; 15.10.2016
comment
Я обновил ответ. Кстати, ваш вопрос в комментарии очень популярен, лучше поищите, например, в гугле. - person Akivamu; 15.10.2016
comment
Я попробовал ваш вариант, кажется, он создает нового пользователя вместо того, чтобы получить одного из уже существующих :( он просто создает нового пользователя с пустыми свойствами, кроме логина и пароля, которые я ввожу в поля ввода вместо того, чтобы найти его с этими учетными данными - person AlexNikolaev94; 15.10.2016
comment
Внутри success обратного вызова userModel.fetch() поместите эту строку для отладки, если данные, полученные от сервера, верны: console.log(userModel.toJSON()); backbonejs .org/#Model-toJSON - person Akivamu; 17.10.2016
comment
ответ представляет собой новую пустую модель User, единственными свойствами, которые она имеет, являются login и password, которые я ввел в свои поля ввода. - person AlexNikolaev94; 17.10.2016
comment
Убедитесь, что вы можете получить действительный ответ от json-сервера. Каков ответ users?login=admin&password=password? Попробуйте через браузер. - person Akivamu; 17.10.2016
comment
GET /users?login=admin&password=password 200 6.522 ms - 335 это мой ответ от json-сервера, а в браузере это console.log модель User, о которой я говорил выше. - person AlexNikolaev94; 17.10.2016
comment
Если ваш обычный «GET» не может не вернуть правильный ответ, значит, URL-адрес может быть неправильным. Я не использую json-server lib, не могу точно сказать, что не так. Но вы должны убедиться, что URL-адрес правильный в обычном «GET», прежде чем добавлять его в свое приложение. Под обычным «GET» я подразумеваю получение HTTP, или вы можете ввести URL-адрес в адресную строку любого браузера. Как насчет ответа /users/1? - person Akivamu; 17.10.2016
comment
/users/1 ответ правильный и возвращает правильную модель. Я думаю, что я должен найти пользователя по его id перед входом в систему, в соответствии с учетными данными, которые я ввожу, но я не могу точно определить, как - person AlexNikolaev94; 17.10.2016

Здесь вы можете сослаться на этот плагин, который использует в основном функции jquery, как указано в документации здесь

Я бы не стал вдаваться в подробности, так как документация достаточно ясна. Это относится к аутентификации с помощью jquery

Теперь, ЕСЛИ вы хотите аутентифицировать пользователя с помощью backbone.js

Если маршрут возвращается с {loggedIn: false}, магистральный маршрутизатор отправляет пользователя только на страницы входа/регистрации. Но если бы он вернулся с информацией о профиле пользователя, это, очевидно, означало бы, что у него был сеанс.

подключите $.ajax для ответа на коды состояния 401 (Unauthorized).

Также, чтобы упомянуть, как указано в этом потоке stackoverflow

Надеюсь, что это может помочь вам немного.

Вот пошаговое руководство по аутентификации с помощью backbone.js

person Pritish Vaidya    schedule 17.10.2016