Мультиблог на Ruby on Rails. Создание страниц регистрации и авторизации или как устанавливать дополнения. Урок 7.

Поскольку у нас будет мультиблог, который в свою очередь предполагает наличие возможности различным пользователям создавать свои статьи, то нам никак не обойтись без системы регистрации и авторизации. Несмотря на то, что такой функционал можно написать самостоятельно, гораздо быстрее и эффективнее это будет сделать, если установить готовый gem, который называется Devise.

Но сперва о том, что такое гем и зачем это нужно. Gem - это пакет, который может включать в себя различные компоненты и библиотеки, расширяющие стандартные возможности Руби. И если вы обратили внимание, то Ruby on Rails сам по себе является таким пакетом, так как мы ещё в первом уроке устанавливали данный фреймворк следующим образом: 

gem install rails

Но помимо самого фреймворка есть великое множество других пакетов, которые способны облегчить жизнь разработчику. Мы в данном уроке будем активно использовать гем Devise, но так же установим и другое расширение - devise-bootstrap-views, которое содержит в себе view специально для вёрстки Bootstrap. 

Такого рода дополнения устанавливается либо через консоль, как это было продемонстрировано выше; или все прописываются скопом в файле Gemfile и далее уже пачкой устанавливаются через команду bundle i. Давайте пропишем эти 2 пакета: 

gem 'devise'
gem 'devise-bootstrap-views', '~> 1.0'

И запустим их установку: 

bundle i

После того, как всё будет установлено, необходимо запустить скрипт установки самого пакета Devise, который скопирует в наш проект всё необходимое: 

rails generate devise:install

Базовая настройка гема Devise

После окончания установки, скрипт так же даст несколько рекомендаций:

  1. Скопировать url для отправки писем в файл конфигурации config/environments/development.rb:

    config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

  2. Маршрут для root у нас уже указан, поэтому данную строчку пропускаем. 

  3. Указать переменные для вывода Flash сообщений. Это можно прописать в нашем layout, скопировав эти строки выше секции <%= yield %> 

    <p class="alert alert-success"><%= notice %></p>
<p class="alert alert-danger"><%= alert %></p>

    Здесь я уже проставил параграфам дополнительные классы, в соответствии с нашей вёрсткой. Однако, если обновить главную страницу, то можно увидеть что на том месте, где должны быть эти сообщения, отображаются просто пустые блоки, окрашенные соответственно в зелёный и красный. Поэтому я прописал в стили файла application.css следующее правило: 

    .alert:empty {
  display: none;
}

    которое означает: скрывать блоки, если внутри них нет никакого контента. 

  4. Рекомендации, относительно кастомизации оформления страниц регистрации и авторизации, пропускаем; так как мы будем использовать для генерации view форм в стиле bootstrap, расширение devise-bootstrap-views

Генерация модели User

Для того, чтобы мы могли работать с пользователями, нам необходимо создать модель пользователя. Сделать это можно, опять же, с помощью гема Devise:

rails generate devise User

При этом помимо файлов модели, будет так же сгенерирована миграция и обновится файл с маршрутами. Не забываем применить миграцию:

rails db:migrate

Страницы регистрации и авторизации пользователя

Все необходимые маршруты уже сформированы, сами страницы находятся по следующим адресам:

  • http://127.0.0.1:3000/users/sign_up - регистрация;
  • http://127.0.0.1:3000/users/sign_in - авторизация.

Кастомизация форм в стиле Bootstrap

Если перейти по данным адресам, то можно заметить, что формы там совсем не соответствуют стилистике сайта. Связано это с тем, что мы используем Bootstrap вёрстку, а сам gem выводит форму посредством чистого HTML кода, не привязанного ни к какому фреймворку. Вот поэтому мы вначале и устанавливали дополнение devise-bootstrap-views, которое содержит в себе формы в нужной нам стилистике. Осталось только скопировать соответствующие файлы в папку view, откуда те и будут подхватываться. Сделать это можно с помощью команды:

rails generate devise:views:bootstrap_templates

при этом гем скопирует формы в папку app/views/devise, откуда при необходимости можно будет производить их правку. Теперь если зайти на страницы регистрации и авторизации, то можно увидеть что оформление форм изменилось в более лучшую сторону.

Итог работы

Вот так мы сэкономили кучу времени, создав страницы регистрации и авторизации, просто установив нужный gem. Теперь, если перейти на страницу регистрации и заполнить поля формы необходимыми данными, произойдёт регистрация пользователя. При этом вы будете переброшены на заглавную страницу и автоматически произойдёт авторизация. 

По традиции, все изменения данного урока можно посмотреть в коммите https://github.com/maclen2007/simple_ruby_blog/commit/54b70f6c459a9870b9dac2cf0ae3d05bd5a91b27

Категории