【Rails】DeviseとOmniauthを使ってGoogle、Twitter、Facebook認証 #Rails

DeviseとOmniauthを使って、Railsアプリにソーシャルログイン機能を実装する方法をまとめます。
例えばGoogleログインだけを使いたい場合は、TwitterとFacebook用の記述は無視してください。

Deviseをインストール

Gemfile

gem 'devise'

$ bundle install
$ rails g devise:install

config/environments/development.rb

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

app/views/layouts/application.html.erb

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Modelを作成

$ rails g devise User
$ rails db:migrate

config/routes.rb

Rails.application.routes.draw do
  devise_for :users # 自動で追加される
end

Viewを作成

$ rails g devise:views users

ログインしないとアクセスできないようにする

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :authenticate_user!
end

ここまでできたらサーバーを再起動。
ログインページや新規登録ページ以外にアクセスしたらログイン画面に飛ばされること、
/users/sign_upにアクセスして、ユーザー登録ができることを確認。

環境変数を設定

Gemfile

gem 'dotenv-rails'

$ bundle install
$ touch .env

.env

HOST='hogehoge.com'
TWITTER_API_KEY=
TWITTER_API_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
FACEBOOK_KEY=
FACEBOOK_SECRET=

IDやSECRET等はあとで取得するので、今は空でOK。

omniauth系のgemをインストール

Gemfile

gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-google-oauth2'

$ bundle install

Userテーブルにomniauth用のカラムを追加

$ rails g migration AddOmniauthToUsers provider:string uid:string
$ rails db:migrate

initializerを編集

config/initializers/devise.rb

config.omniauth :facebook, ENV['FACEBOOK_KEY'], ENV['FACEBOOK_SECRET'], scope: 'email', info_fields: 'email', callback_url: "#{ENV['HOST']}/users/auth/facebook/callback"
config.omniauth :twitter, ENV['TWITTER_API_KEY'], ENV['TWITTER_API_SECRET'], scope: 'email', oauth_callback: "#{ENV['HOST']}/users/auth/twitter/callback"
config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'], scope: 'email', redirect_uri: "#{ENV['HOST']}/users/auth/google_oauth2/callback"
OmniAuth.config.logger = Rails.logger if Rails.env.development?

OmniauthCallbacksControllerを作成

$ mkdir app/controllers/users/
$ touch app/controllers/users/omniauth_callbacks_controller.rb

controllers/users/omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    callback_for(:facebook)
  end

  def twitter
    callback_for(:twitter)
  end

  def google_oauth2
    callback_for(:google)
  end

  # common callback method
  def callback_for(provider)
    @user = User.from_omniauth(request.env["omniauth.auth"])
    if @user.persisted?
      sign_in_and_redirect @user, event: :authentication #this will throw if @user is not activated
      set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format?
    else
      session["devise.#{provider}_data"] = request.env["omniauth.auth"].except("extra")
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end
end

Userモデルを編集

app/models/user.rb

class User < ApplicationRecord
  # デフォルトの設定に、:omniauthable以下を追加
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :omniauthable, omniauth_providers: %i[facebook twitter google_oauth2]
  # omniauthのコールバック時に呼ばれるメソッド
  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.email = auth.info.email
      user.password = Devise.friendly_token[0,20]
    end
  end
end

ルーティングを編集

config/routes.rb

Rails.application.routes.draw do
  devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }
  #省略
end

ログイン画面、サインアップ画面を確認

ソーシャルログイン用のリンクが追加されていることを確認します。

プラットフォームごとの設定

Twitter

以下の記事等を参考に、Twitter DevelopersでAPI keyとAPI key secretを取得して、.envにセット。
https://dev.classmethod.jp/articles/twitter-api-approved-way/

.env

TWITTER_API_KEY='hogetwkeyhoge'
TWITTER_API_SECRET='fugatwsecretfuga'

そしてEdit authentication settingsをいじって、アプリのドメイン/users/auth/twitter/callbackをセットして完成。

Google

この辺の記事を見ながらGCPでアプリを作成し、クライアント IDとクライアントシークレットを取得して、.envにセット
https://qiita.com/nakanishi03/items/2dfe8b8431a044a01bc6#google

.env

OOGLE_CLIENT_ID='hogehogehoge.apps.googleusercontent.com'
GOOGLE_CLIENT_SECRET='dgpV8aMmmDzfugafuga'

承認済みのリダイレクト URIにドメイン/users/auth/google_oauth2/callbackをセット。

Facebook

AppIDとAppSecretを取得して環境変数にセット。

.env

FACEBOOK_KEY='foobarsdsfe'
FACEBOOK_SECRET='bazdejnerf'

Valid OAuth Redirect URIsにドメイン/users/auth/google_oauth2/callbackをセット。