如何配置设计和OmniAuth为您的Rails应用程序

介绍

大多数Ruby on Rails应用程序需要用户注册和身份验证机制。从头开始开发这些需要大量的时间和精力-谢天谢地,还有 设计 。使用Devise gem,您可以在几分钟内设置完整的用户身份验证系统。 不过,您可以允许他们在不创建新帐户的情况下访问您的应用程序,从而使您的用户更加快乐。他们可以使用他们现有的Facebook,Twitter,亚马逊或DigitalOcean帐户登录。实际上,您可以支持任何流行的OAuth服务提供商的身份验证。 OAuth支持由OmniAuth gem提供。在本教程中,我们将创建一个使用Devise和OmniAuth的简单应用程序。

先决条件

在开始之前,请确保您已在主机上安装了最新版本的RVM,Ruby和Rails。如果你不这样做,请按照说明操作: 如何在Ubuntu on Rails的安装Ruby 12.04 LTS与RVM 本教程已经使用Ruby 2.1.2和Rails 4.1.5进行测试。

第1步 - 创建一个新的Rails应用程序

建议您将所有Rails应用程序放在单独的目录中。 您现在应该创建一个。
mkdir rails_apps
cd rails_apps
在开始发布Rails命令之前,必须初始化RVM环境。 如果您在遵循本教程时休息,请记住每次重新启动终端会话时都要这样做。
. ~/.rvm/scripts/rvm
rvm use ruby --default
让我们把新的应用程序 的myapp。 创建应用程序后,使用 CD输入应用程序的基本目录。
rails new myapp
cd myapp
注意:所有Rails命令应该从应用程序的目录中运行,在这种情况下是〜/ rails_apps / myapp。

第2步 - 将所需的Gems添加到Gemfile

我们需要Devise和OmniAuth gem。此外,对于您希望支持的每个OAuth服务提供商,您还需要一个单独的gem。在本教程中,我们将支持使用DigitalOcean登录,因此我们需要 omniauth-digitaloceanGem。 添加以下行到文件末尾 ~/rails_apps/myapp/Gemfile 。 您可以使用 nano作为文本编辑器。
gem 'therubyracer'
gem 'devise'
gem 'omniauth'
gem 'omniauth-digitalocean'
您将需要类似的gems来支持其他提供商。例如,为了支持Facebook的,你需要 omniauth Facebook的 。这里有一些这样的Gem供您参考:
  • Twitter - omniauth-twitter
  • 亚马逊 - omniauth-amazon
  • Google - omniauth-google
  • Github - omniauth-github
安装新添加的Gem。
bundle install

第3步 - 向应用程序添加基本功能

让我们快速添加几个页面到这个应用程序进行测试。最终,这些页面只有在登录后才能访问。 我们可以使用Rails的脚手架功能。使用 Rails摹支架的命令,我们只是指定有关模型的细节,和Rails生成全功能的网页来执行CRUD该模型(创建,读取,更新删除)操作。换句话说,生成所有关联的控制器和视图以及模型文件。
rails g scaffold Product name:string price:integer description:text
rake db:migrate
接下来,我们必须定义这个应用程序的根。 编辑 ~/rails_apps/myapp/config/routes.rb ,并添加行 root 'products#index'来指定应用程序的根目录下,就现有的 资源线以下。您可以忽略所有被注释掉的行。完成后,文件中的活动行将如下所示:
Rails.application.routes.draw do
  resources :products
  root 'products#index'
end
继续,现在测试您的应用程序。通过键入以下内容启动开发服务器:
rails s
访问 http://本地主机 :3000 /从你的浏览器。 如果你正在开发远程,请更换相应的IP地址或域名为您Droplet 本地主机 3000是开发服务器的默认端口号。 现在,不需要登录。通过点击“新产品”添加几个产品。一旦您确信应用程序正常工作,请返回终端,然后按Ctrl + C停止服务器。

第4步 - 设置设计

键入以下命令以添加Devise身份验证支持。
rails generate devise:install
rails generate devise User
rake db:migrate
这将添加登录和注册表单以及所有关联的逻辑。 我们的应用程序现在有一个基本的身份验证系统,用户可以注册自己,然后登录。但是,所有的页面仍然可以直接访问。要改变这种情况,编辑 ~/rails_apps/myapp/app/controllers/application_controller.rb并添加 的authenticate_user!作为具有服务的任何页面之前执行的操作。
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :authenticate_user!
end
如果你愿意,你可以与 轨道s命令再次启动开发服务器,并检查了访问这些新添加的网页 http:// localhost :3000/ (再次使用自己的域名或IP地址)。您应该看到如下所示的页面: 登录页面 您可以通过访问一个新的用户注册 http://localhost:3000/users/sign_up

第5步 - 更新用户模型以支持OmniAuth

如果再次启动服务器,请使用CTRL-C停止它。添加一个名为 UID到设计生成的模型新列。
rails g migration AddColumnsToUsers provider uid
rake db:migrate

第6步 - 从OAuth服务提供商获取客户端ID和客户端密钥

访问服务提供商的网站并在那里注册您的应用程序。所有服务提供商都有不同的注册程序。对于DigitalOcean,请参考这里的教程: 如何使用OAuth认证与DigitalOcean作为用户或开发者 在注册过程中将要求您提供回调URL。每个提供程序都有一个单独的回调URL。以下是几个热门服务提供商的回调网址:
  • 数字海洋:HTTP:// 本地主机 :3000 /用户/认证/ digitalocean /回调
  • Facebook的:HTTP:// 本地主机 :3000 /用户/认证/ Facebook的/回调
  • 亚马逊:HTTP:// 本地主机 :3000 /用户/认证/亚马逊/回调
  • 微博:HTTP:// 本地主机 :3000 /用户/认证/微博/回调
  • 谷歌:HTTP:// 本地主机 :3000 /用户/ AUTH /谷歌/回调
请解析为一个DropletIP地址或域名替换 本地主机 。在注册过程结束时,您将获得您的客户端ID和客户端密钥。您将在下一步中使用这些值。

第7步 - 更新设计初始化程序

编辑 ~/rails_apps/myapp/config/initializers/devise.rb只是在之前添加客户端ID和秘密在文件的底部, end线。 这也是更新 mailer_sender的东西,有自己的服务器的名称和用户一个不错的主意。除了这两个项目之外,您不需要进行任何其他更改。 编辑后,您的文件将如下所示(文件中也将有许多带注释的行):
Devise.setup do |config|
  #Replace example.com with your own domain name
  config.mailer_sender = 'mailer@example.com'

  require 'devise/orm/active_record'
  config.case_insensitive_keys = [ :email ]
  config.strip_whitespace_keys = [ :email ]
  config.skip_session_storage = [:http_auth]
  config.stretches = Rails.env.test? ? 1 : 10
  config.reconfirmable = true
  config.expire_all_remember_me_on_sign_out = true
  config.password_length = 8..128
  config.reset_password_within = 6.hours
  config.sign_out_via = :delete

  #Add your ID and secret here
  #ID first, secret second
  config.omniauth :digitalocean, "db381dc9990be7e3bc42503d0", "5b0824c2722b65d29965f1a1df"
end

第8步 - 更新用户模型

必须更改Devise生成的用户模型,以指定我们要使用的服务提供程序。我们增加三个项目到现有列表 (:omniauthable,:omniauth_providers =>![:digitalocean],不要忘了额外的逗号)。 我们还创建了一个名为 from_omniauth提取该认证后获得的信息新方法。 编辑它后,你的 ~/rails_apps/myapp/app/models/user.rb应该是这样的:
class User < ActiveRecord::Base
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,
     :omniauthable, :omniauth_providers => [:digitalocean]

  def self.from_omniauth(auth)
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
        user.provider = auth.provider
        user.uid = auth.uid
        user.email = auth.info.email
        user.password = Devise.friendly_token[0,20]
      end
  end
end
保存文件。

第9步 - 添加控制器以处理回调URL

首先,编辑 ~/rails_apps/myapp/config/routes.rb并更新 devise_for行指定将处理回调控制器的名称。 让我们简单地调用它 的回调 。您的文件现在应该如下(减去已注释的部分):
Rails.application.routes.draw do
  devise_for :users, :controllers => { :omniauth_callbacks => "callbacks" }
  resources :products
  root 'products#index'
end
然后,创建一个新的文件 ~/rails_apps/myapp/app/controllers/callbacks_controller.rb 。 添加以下代码到它:
class CallbacksController < Devise::OmniauthCallbacksController
    def digitalocean
        @user = User.from_omniauth(request.env["omniauth.auth"])
        sign_in_and_redirect @user
    end
end
如果您已使用更多OAuth提供程序,则每个提供程序都需要单独的方法。方法的名称应该与提供程序的名称匹配。例如,要增加对Facebook的,你的方法将使用 Facebook的DEF来定义。 您的应用程序现已准备就绪。再次启动您的服务器:
rails s
访问您的主页。由于我们正在测试登录功能,因此您可能希望在没有存储数据的会话(例如Chrome无痕式窗口)中执行此操作。你应该 在Digitalocean链接查看的 标志 。点击它。您应该被重定向到DigitalOcean的登录页面。成功登录后,您将被重定向回您自己的应用程序,并且将显示产品页面。 使用DigitalOcean登录

结论

您现在拥有一个适用于您的应用的现代用户身份验证系统,用户可以使用电子邮件地址,社交网络帐户或其他热门服务登录。
赞(52) 打赏
未经允许不得转载:优客志 » 系统运维
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏