Railsアプリケーション用にDeviseとOmniAuthを構成する方法

投稿日: 2019-11-08 2022-04-20
タグ: API, Ruby on Rails, ubuntu

序章

ほとんどのRubyonRailsアプリケーションには、ユーザー登録と認証のメカニズムが必要です。これらを最初から開発するには、多くの時間と労力が必要です。ありがたいことに、Deviseがあります。 Devise gemを使用すると、本格的なユーザー認証システムを数分でセットアップできます。

ただし、新しいアカウントを作成せずにアプリケーションにアクセスできるようにすることで、ユーザーを満足させることができます。既存のFacebook、Twitter、Amazon、またはDigitalOceanアカウントを使用してログインするだけで済みます。実際、一般的なOAuthサービスプロバイダーによる認証をサポートできます。 OAuthサポートはOmniAuthgemによって提供されます。このチュートリアルでは、DeviseとOmniAuthの両方を使用する簡単なアプリケーションを作成します。

前提条件

始める前に、ホストに最新バージョンのRVM、Ruby、およびRailsがインストールされていることを確認してください。そうでない場合は、次の手順に従ってください：RVMを使用してUbuntu12.04LTSにRubyonRailsをインストールする方法

このチュートリアルは、Ruby2.1.2およびRails4.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の宝石が必要になります。さらに、サポートするOAuthサービスプロバイダーごとに個別のgemが必要になります。このチュートリアルでは、DigitalOceanを使用したログインをサポートするため、omniauth-digitaloceangemが必要です。

ファイル~/rails_apps/myapp/Gemfileの最後に次の行を追加します。 nanoをテキストエディタとして使用できます。

gem 'therubyracer'
gem 'devise'
gem 'omniauth'
gem 'omniauth-digitalocean'

他のプロバイダーをサポートするには、同様の宝石が必要になります。たとえば、Facebookをサポートするには、omniauth-facebookが必要です。参考までに、このような宝石をいくつか紹介します。

Twitter-omniauth-twitter
アマゾン-omniauth-amazon
Google-omniauth-google
Github-omniauth-github

新しく追加したgemをインストールします。

bundle install

ステップ3-アプリケーションに基本機能を追加する

テストのために、このアプリケーションに数ページをすばやく追加しましょう。最終的に、これらのページにはログイン後にのみアクセスできるようになります。

これには、Railsのスキャフォールディング機能を使用できます。 rails gscaffold コマンドを使用して、モデルに関する詳細を指定するだけで、RailsはそのモデルでCRUD（Create Read Update Delete）操作を実行するための完全に機能するページを生成します。つまり、関連するすべてのコントローラーとビューが、モデルファイルとともに生成されます。

rails g scaffold Product name:string price:integer description:text
rake db:migrate

次に、このアプリケーションのルートを定義する必要があります。

~/rails_apps/myapp/config/routes.rbを編集し、root 'products#index'という行を追加して、既存のresources行のすぐ下にアプリのルートを指定します。コメントアウトされているすべての行は無視してかまいません。完了すると、ファイル内のアクティブな行は次のようになります。

Rails.application.routes.draw do
  resources :products
  root 'products#index'
end

さあ、今すぐアプリケーションをテストしてください。次のように入力して、開発サーバーを起動します。

rails s

ブラウザからhttp：// localhost ：3000/にアクセスします。リモートで開発している場合は、localhostをドロップレットに適したIPアドレスまたはドメインに置き換えてください。 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

必要に応じて、 rails s コマンドを使用して開発サーバーを再起動し、http://localhost:3000/にアクセスしてこれらの新しく追加されたページを確認できます（ここでも、独自のドメインまたはIPアドレスを使用してください）。次のようなページが表示されます。

http://localhost:3000/users/sign_upにアクセスすると、新規ユーザーとして登録できます。

ステップ5-OmniAuthをサポートするようにユーザーモデルを更新する

サーバーを再起動した場合は、CTRL-Cでサーバーを停止してください。 Deviseが生成したモデルにuidという新しい列を追加します。

rails g migration AddColumnsToUsers provider uid
rake db:migrate

ステップ6-OAuthサービスプロバイダーからクライアントIDとクライアントシークレットを取得する

サービスプロバイダーのWebサイトにアクセスし、そこでアプリケーションを登録します。すべてのサービスプロバイダーは、異なる登録手順を持っています。 DigitalOceanについては、こちらのチュートリアルを参照してください：ユーザーまたは開発者としてDigitalOceanでOAuth認証を使用する方法

登録プロセス中にコールバックURLの入力を求められます。プロバイダーごとに個別のコールバックURLがあります。いくつかの人気のあるサービスプロバイダーのコールバックURLは次のとおりです。

デジタルオーシャン：http：// localhost ：3000 / users / auth / digitalocean / callback
Facebook：http：// localhost ：3000 / users / auth / facebook / callback
アマゾン：http：// localhost ：3000 / users / auth / amazon / callback
Twitter：http：// localhost ：3000 / users / auth / twitter / callback
Google：http：// localhost ：3000 / users / auth / google / callback

localhost を、ドロップレットに解決されるIPアドレスまたはドメインに置き換えてください。登録プロセスの最後に、クライアントIDとクライアントシークレットが提供されます。これらの値は次のステップで使用します。

ステップ7-DeviseInitializerを更新します

~/rails_apps/myapp/config/initializers/devise.rbを編集して、ファイルの下部、end行の直前にクライアントIDとシークレットを追加します。 mailer_senderを独自のサーバー名とユーザーを持つものに更新することもお勧めします。これら2つの項目以外に変更を加える必要はありません。

編集後、ファイルは次のようになります（ファイルにはコメント行も多数あります）。

Devise.setup do |config|
  #Replace example.com with your own domain name
  config.mailer_sender = '[email protected]'

  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が生成したユーザーモデルは、使用するサービスプロバイダーを指定するために変更する必要があります。既存のリストに3つの項目を追加します（：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のサポートを追加するには、 deffacebookを使用してメソッドを定義します。

これで、アプリケーションの準備が整いました。サーバーを再度起動します。

rails s

ホームページにアクセスしてください。ログイン機能をテストしているため、Chromeシークレットウィンドウなど、データが保存されていないセッションでこれを実行することをお勧めします。 Digitaloceanでサインインするリンクが表示されます。クリックして。 DigitalOceanのログインページにリダイレクトされます。ログインに成功すると、自分のアプリケーションにリダイレクトされ、製品ページが表示されます。

結論

これで、アプリの最新のユーザー認証システムができました。ユーザーは、メールアドレス、ソーシャルネットワーキングアカウント、またはその他の一般的なサービスを使用してログインできます。

このアプリをDropletで本番環境に移行することにした場合は、こちらのチュートリアルを参照してください： DigitalOcean One ClickImageを使用してRubyonRailsアプリを起動する方法。アプリを新しいドロップレットに追加する場合は、ステップ6に戻って、本番サーバーのコールバックURLでDigitalOceanAPI設定を更新することを忘れないでください。

getdocs

13036