【Ruby on Rails5】一から会員登録認証(Facebook,Twitter)機能をつくる

Ruby on Railsの環境

・ruby 2.5.0p0
・Rails 5.1.5
・Twitter,FacebookAPIのAPIキーを取得している状態

1. GemFileの設定

hogeappディレクトリを作成し中にbundle initでGemFileを作成します。

2. Railsフレームワークを入れる

なにか質問されたら「Y」でRailsフレームワークをインストールします。
Overwrite /Users/hoge/hogeapp.com/Gemfile? (enter "h" for help) [Ynaqdh] Y

「-d」は「–database」を示しています。デフォルトの設定が「sqLite」なので「mysql」に変更します。

3. データベース(MySQL)の設定をする

データベース(MySQL)を作っておきます。(作り方は割愛します)
ぼくはMySQLに「hogeapp」という名前のデータベースを作成しました。

config/database.ymlを修正します。

MySQLのログインするときの「username」「password」を設定し作成したDB(データベース)を指定します。開発環境で作成するため「host」は「localhost」にしています。今回はdevelopment(開発環境)のみしか実行しませんのでtest,productionの設定はとくに触る必要はありません。defaultに共通の設定を書いて「development」「test」「production」に個別の設定を書きます。個別の設定が優先されて上書きされます。今回は面倒なのでほとんどdefaultに書いてます。

を実行しDBに「ar_internal_metadata」「schema_migrations」テーブルが作成できていればデータベースの設定は成功しています。

deviseのインストール

Gemfileに下記を追記してbundle installします。

deviseの機能をインストールします。

実行すると次になにをするべきか案内してくれます。

deviseの設定

アクションメーラーの追加・設定

config/environments/development.rbにアクションメーラーの設定を追記します。

【追記】
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }を追記します。
Rails.application.configure doの中にかかないとエラーになるので要注意です。

ビュー(view)の追加・設定

下記コマンドを実行してviewを作成します。

viewsに認証に必要なビューを作成します。app/views/deviseが作られます。

モデルとマイグレーションの追加・設定

下記コマンドを実行してモデルとマイグレーションを作成します。

app/models/user.rbファイルが作成されます。
app/models/user.rbに追記します。

db/migrate/にできたマイグレーションを変更します。

下記部分のコメントアウトを外します。

下記部分を追加します。

マイグレーションを実行します。

認証に必要なusersテーブルが作成されます。

コントローラーの設定

下記コマンドを実行してコントローラーを作成とルートの設定をします。

ルート(routes)の設定

app/config/routes.rbにルートの設定を追記します。

app/controllers/users/omniauth_callbacks_controller.rbを作成し下記コードを追加します。

Twitter,FacebookのAPIキー設定

Twitter,Facebook API取得するURL
Twitter https://apps.twitter.com/
Facebook https://developers.facebook.com/

Twitter,Facebookの取得方法は長くなるため割愛しています。Twitter,FacebookのAPIキーの取得方法やTwitter,Facebook側の設定方法は調べておいてください。

1. config/initializers/devise.rbにアクションメーラーの設定を追記します。
Devise.setup do |config|の中にかかないとエラーになるので要注意です。

viewsの設定

ログイン画面を作成します。

下記コマンドでcontrollerを追加します。

app/config/routes.rbが自動的に
get 'home/index'が追加されるため削除します。

app/views/home/index.html.rbを下記のように修正します。

作成したログインページにアクセスする

でrailsを起動してhttp://127.0.0.1:3000/にアクセスすれば表示されます。
TwitterかFacebookのログイン認証ができてusersテーブルに認証されたデータが残ります。

devise設定時の注意点

app/config/routes.rb
devise_for :usersがふたつあるとArgumentError: Invalid route name, already in use: 'new_user_session' エラーが発生するためdeviseの手順に要注意です。