Когда я заканчивал проект для моей фазы 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_status
variable выше.
Затем, если новый пользователь не может сохранить, это означает, что он не проходит наши проверки или по каким-то другим причинам. В 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. Не стесняйтесь клонировать и кодировать вместе с этим блогом.
Удачного программирования!