Когда я заканчивал проект для моей фазы 3 в школе Flatiron, меня больше всего интересовала часть аутентификации. Используя гем Bcrypt, мы можем выполнить аутентификацию для нашего одностраничного приложения, построенного на Javascript. Я создал репозиторий Rails API на Github с базовой HTML-страницей для внешнего интерфейса и MVC только для 1 таблицы «пользователь». Репозиторий прикреплен в конце этого блога, вы можете использовать его для написания кода.

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

Мы будем вместе, чтобы сделать аутентификацию для нашей страницы. Если кто-то зарегистрируется или войдет в систему с правильной информацией, он увидит секретное сообщение.

На данный момент в моей базе данных есть только одна таблица с именем «пользователи» с атрибутами «имя», «возраст», «электронная почта» без каких-либо данных. Если вы запустите «rails server» внутри каталога «blog-auth-app/backend», вы сможете получить доступ к этому URL-адресу http://localhost:3000/users без пользователя.

Итак, для аутентификации мы будем использовать гем Bcrypt. Итак, перейдите в Gemfile и раскомментируйте эту строку:

gem 'bcrypt', '~> 3.1.7'

Затем пакетная установка. Для работы гема Bcrypt вам необходимо иметь атрибут password_digest для вашей таблицы «users». Мы сохраним хэши паролей в столбце password_digest в базе данных вместо самого пароля.

Итак, запустите в своем терминале:

rails g migration AddPasswordToUsers password_digest

Затем снова запустите «rails db: migrate». Итак, теперь наша схема будет выглядеть так:

В вашей пользовательской модели вам также нужен метод «has_secure_password». Он добавит в нашу модель 2 поля: password и password_confirmation.

В файле «main.js» уже был создан метод createUser. Но в нем отсутствуют атрибуты password и password_confirmation. Вам нужно будет добавить 2 строки ниже к этому методу.

Переменная res_status выше — это ответ, который передается от нашего действия create в пользовательском контроллере. Наш метод создания выглядит следующим образом. Если пользователь создан успешно, он ответит на объект со статусом и информацией о пользователе. Этот объект передается в res_statusvariable выше.

Затем, если новый пользователь не может сохранить, это означает, что он не проходит наши проверки или по каким-то другим причинам. В Rails у нас есть способ зафиксировать все ошибки, выполнив это:

user.errors.full_message

Вы можете видеть выше, он ответит на объект с errors в качестве ключа и передаст его в наш файл js. Тогда теперь res_status.errors будет массивом всех ошибок, мы можем распечатать его для просмотра пользователями. Щас я уже поставил валидации, требующие наличия возраста и емейла. Если я оставлю эти два поля пустой строкой и нажму «Отправить», он уведомит об ошибках, подобных этому.

Интересно, правда? Теперь мы знаем, как мы можем фиксировать ошибки на бэкэнде и отображать их во внешнем интерфейсе. Не стесняйтесь добавлять дополнительные проверки для пользователей.

Для части входа в систему функция в файле main.js почти такая же (вы можете раскомментировать код ниже, чтобы создать часть), за исключением URL-адреса. Вам нужно будет добавить новый маршрут для вашего файла routes.rb. Вы можете назвать URL-ссылку как угодно, просто сделайте ее одинаковой в файлах routes.rb и main.js.

post '/authUser', to: "users#auth"

Когда кто-то публикует информацию (POST REQUEST) по этому URL-адресу http://localhost:3000/users, он выполняет действие auth в пользовательском контроллере. Вот почему нам нужно создать действие auth.

Наше действие auth в пользовательском контроллере выглядит так же, как действие create выше, но оно добавляет метод authenticate для проверки пароля пользователя. Мы можем использовать authenticate метод благодаря Bcrypt gem. Если это правда, мы передадим объект {статус: 200, пользователь: пользователь} нашему интерфейсу. В противном случае он отображает объект, содержащий keymessage: 'Неверный адрес электронной почты или пароль'.

Наконец, это секретное сообщение, которое появится при успешной регистрации или входе в систему.

Репозиторий Github. Не стесняйтесь клонировать и кодировать вместе с этим блогом.

Удачного программирования!