search
LoginSignup
22

More than 1 year has passed since last update.

posted at

updated at

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

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

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

ソーシャルログイン用のリンクが追加されていることを確認します。
 2020-12-25 12.27.45.png
 2020-12-25 12.27.51.png

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

Twitter

以下の記事等を参考に、Twitter DevelopersでAPI keyAPI 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をセットして完成。
 2020-12-30 18.21.57.png

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をセット。
 2020-12-30 18.38.52.png

Facebook

AppIDAppSecretを取得して環境変数にセット。

.env
FACEBOOK_KEY='foobarsdsfe'
FACEBOOK_SECRET='bazdejnerf'

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
22