Мини-чат с рельсами

 $ bundle install 

Теперь мы должны зарегистрировать наш сайт как приложение в Facebook и Twitter. Посетите https://developers.facebook.com/apps и создайте новое приложение здесь. Дайте ему имя в разделе «Настройки» (я назвал это «SitePoint Mini-Chat Demo»). Не забывайте, что это имя будет видно для аутентифицирующего пользователя! Далее нажмите «Добавить платформу» и выберите «Веб-сайт». Заполните «URL сайта» (в моем случае я ввел «http://sitepoint-minichat.herokuapp.com/») и «Домены приложений» (я ввел «sitepoint-minichat.herokuapp.com»). Имейте в виду, этот домен должен быть получен из URL, иначе ваши настройки не будут сохранены. Также укажите «Контактный E-mail» и нажмите «Сохранить». Перейдите к «Status & Review» и переключите «Хотите ли вы сделать это приложение и все его живые функции доступными для широкой публики?» Переключитесь на «Yes».

Для настоящего приложения потратьте некоторое время на настройку параметров другого приложения (например, изображения, описания, слогана и т. Д.). Мы перейдем к разделу «Панель инструментов». Здесь обратите внимание на поля «Идентификатор приложения» и «Секрет приложения» (последнее маскируется). Нажмите «Показать», чтобы открыть Секрет, и введите свой пароль — это ключи, которые нам понадобятся для настройки аутентификации.

Создайте новый файл с именем omniauth.rb в config / initializer и вставьте следующий код:

конфиг / Инициализаторы / omniauth.rb

 Rails.application.config.middleware.use OmniAuth::Builder do provider :facebook, ENV['FACEBOOK_KEY'], ENV['FACEBOOK_SECRET'], scope: 'public_profile', display: 'page', image_size: 'square' end 

Для хранения пары ключей я использую переменные среды Heroku . Как вы, наверное, догадались, FACEBOOK_KEY — это «Идентификатор приложения», а FACEBOOK_SECRET — «Секрет приложения».

Область scope — это список разрешений, которые запрашивает наше приложение. Поскольку мы не будем получать доступ к каким-либо функциям API Facebook, единственным запрашиваемым разрешением является public_profile что означает «получить основные данные пользователя». Узнайте больше о разрешениях Facebook здесь .

display — это еще один параметр, отправляемый Facebook при аутентификации, который управляет тем, как будет выглядеть страница аутентификации. Например, если вы открываете страницу аутентификации в небольшом всплывающем окне, вы можете указать popup в качестве display значения. Узнайте больше здесь .

Последний параметр — это image_size , который контролирует размер аватара пользователя, который мы хотим получить. square означает «изображение 50×50 пикселей».

Теперь нам нужно сделать то же самое для Twitter. Перейдите на https://apps.twitter.com/ и
создать новое приложение. Дайте ему имя, описание и URL. Кроме того, введите URL-адрес обратного вызова в следующем
Формат: « apps’s_URL / auth / twitter / callback». Этот формат определяется OmniAuth и является ресурсом, на который пользователь будет перенаправлен после успешной аутентификации. Мы позаботимся об этом через мгновение.

Далее примите условия и создайте приложение. Возможно, вы захотите потратить некоторое время, настроив другие параметры своего приложения, такие как название организации, значок и т. Д. Кроме того, обратите внимание, что в области сведений вы можете изменить уровень доступа приложения. Мы будем сохранять настройку «Только для чтения» по умолчанию.

Open API Keys — здесь находятся ключ API и секрет API. Вернитесь к файлу omniauth.rb и добавьте еще код:

конфиг / Инициализаторы / omniauth.rb

 Rails.application.config.middleware.use OmniAuth::Builder do provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET'], image_size: 'normal' [...] 

Вставьте свои ключи непосредственно в этот файл или используйте какой-либо другой способ для их хранения (что рекомендуется — они не должны быть видны всем). Опция image_size предоставляет аватар пользователя в виде изображения размером 48×48 пикселей. Полный список доступных опций смотрите в документации .

 [...] get '/auth/:provider/callback', to: 'sessions#create' get '/auth/failure', to: 'sessions#auth_fail' get '/sign_out', to: 'sessions#destroy', as: :sign_out [...] 

 class SessionsController < ApplicationController def create user = User.from_omniauth(request.env['omniauth.auth']) cookies[:user_id] = user.id flash[:success] = "Hello, #{user.name}!" redirect_to root_url end def destroy cookies.delete(:user_id) flash[:success] = "See you!" redirect_to root_url end def auth_fail render text: "You've tried to authenticate via #{params[:strategy]}, but the following error occurred: #{params[:message]}", status: 500 end end 

 render text: request.env['omniauth.auth'].to_yaml 

 class User < ActiveRecord::Base class << self def from_omniauth(auth) provider = auth.provider uid = auth.uid info = auth.info.symbolize_keys! user = User.find_or_initialize_by(uid: uid, provider: provider) user.name = info.name user.avatar_url = info.image user.profile_url = info.urls.send(provider.capitalize.to_sym) user.save! user end end end 

 :urls => { :Twitter => "https://twitter.com/johnqpublic" } 

 $ rails g model Comment body:text user:references $ rake db:migrate 

 [...] has_many :comments, dependent: :delete_all [...] 

 [...] resources :comments, only: [:new, :create] root to: 'comments#new' [...] 

 class CommentsController < ApplicationController def new @comment = Comment.new end def create end end 

 [...] gem 'bootstrap-sass' [...] 

 @import 'bootstrap'; @import 'bootstrap/theme'; 

 [...] <body> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <%= link_to 'Mini-chat', root_path, class: 'navbar-brand' %> </div> </div> </div> <div class="container"> <% flash.each do |key, value| %> <div class="alert alert-<%= key %>"> <%= value %> </div> <% end %> <%= yield %> </div> </body> [...] 

 <div class="jumbotron"> <h1>Welcome to our mini-chat!</h1> <p class="lead">Please sign in via one of the social networks to start chatting</p> <%= link_to '', '/auth/twitter', class: 'social twitter' %> <%= link_to '', '/auth/facebook', class: 'social facebook' %> </div> 

 [...] .social { background: image-url('logos.png') no-repeat transparent; display: inline-block; &.twitter { width: 50px; height: 42px; background-position: 0 -52px; } &.facebook, &.facebook:active { width: 50px; height: 50px; background-position: 0 0; } } 

 def current_user @current_user ||= User.find_by(id: cookies[:user_id]) if cookies[:user_id] end helper_method :current_user 

 [...] <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <%= link_to 'Mini-chat', root_path, class: 'navbar-brand' %> </div> <% if current_user %> <ul class="nav navbar-nav navbar-right"> <li><%= image_tag current_user.avatar_url %></li> <li><%= link_to 'Sign out', sign_out_path %></li> </ul> <% end %> </div> </div> [...] 

 <% if current_user %> <div class="page-header"> <h1>Join the discussion!</h1> </div> <%= render 'form' %> <% else %> <%= render 'welcome' %> <% end %> 

 <div class="jumbotron"> <h1>Welcome to our mini-chat!</h1> <p class="lead">Please sign in via one of the social networks to start chatting</p> <%= link_to '', '/auth/twitter', class: 'btn social twitter' %> <%= link_to '', '/auth/facebook', class: 'btn social facebook' %> </div> 

 <div class="well"> <%= form_for @comment do |f| %> <div class="form-group"> <%= f.label :body, 'Enter your comment:' %> <%= f.text_area :body, rows: 3, class: 'form-control', required: true, maxlength: 2000 %> <small class="label label-warning">Cannot be blank or contain more than 2000 symbols.</small> </div> <%= f.submit 'Post', class: 'btn btn-primary btn-lg' %> <% end %> </div> 

 [...] validates :body, presence: true, length: {maximum: 2000} [...] 

 [...] def create if current_user @comment = current_user.comments.build(comment_params) if @comment.save flash[:success] = 'Your comment was successfully posted!' else flash[:error] = 'Your comment cannot be saved.' end end redirect_to root_url end private def comment_params params.require(:comment).permit(:body) end [...] 

 [...] def new @comment = Comment.new @comments = Comment.order('created_at DESC') end [...] 

 <% if current_user %> <div class="page-header"> <h1>Join the discussion!</h1> </div> <%= render 'form' %> <div class="panel panel-default" id="comments"> <div class="panel-body"> <ul class="media-list"> <%= render @comments %> </ul> </div> </div> <% else %> <%= render 'welcome' %> <% end %> 

 <li class="media comment"> <%= link_to image_tag(comment.user.avatar_url, alt: comment.user.name, class: "media-object"), comment.user.profile_url, target: '_blank', class: 'pull-left' %> <div class="media-body"> <h4 class="media-heading"><%= link_to comment.user.name, comment.user.profile_url, target: '_blank' %> says <small class="text-muted">[at <%= comment.created_at.strftime('%-d %B %Y, %H:%M:%S') %>]</small></h4> <p><%= comment.body %></p> </div> </li> 

 [...] #comments { max-height: 500px; overflow: auto; } 

 $ heroku addons:add scheduler:standard 

 desc "This task is called by the Heroku scheduler add-on" task remove_excessive_comments: :environment do puts "Removing excessive comments now..." Comment.remove_excessive! end 

 [...] class << self def remove_excessive! if all.count > 100 order('created_at ASC').limit(all.count - 50).destroy_all end end end [...] 

 $ heroku run rake remove_excessive_comments 

 $ heroku addons:open scheduler 

 [...] gem 'jquery-turbolinks' [...] 

 [...] //= require jquery.turbolinks //= require turbolinks 

 <%= form_for @comment, remote: true do |f| %> 

 [...] def create respond_to do |format| if current_user @comment = current_user.comments.build(comment_params) if @comment.save flash.now[:success] = 'Your comment was successfully posted!' else flash.now[:error] = 'Your comment cannot be saved.' end format.html {redirect_to root_url} format.js else format.html {redirect_to root_url} format.js {render nothing: true} end end end [...] 

 <% if @comment.new_record? %> alert('Your comment cannot be saved.'); <% else %> $('#comments').find('.media-list').prepend('<%= j render @comment %>'); $('#comment_body').val(''); <% end %>