Help us understand the problem. What is going on with this article?

Railsでfacebook認証の実装方法(初心者向け)簡単!

初めに

ポートフォリオを作成する際に、『deviseでのログイン方法』+『facebook認証を利用したログイン方法』を実装したのでメモを残します。

環境

・Ruby '2.3.8'
・Rails '5.2.3'

deviseの導入

Gemfile
gem 'devise'
$ bundle install
$ rails g devise:install
$ rails g devise user
$ rails db:migrate

以上でdeviseの導入は完了です。

カラムの追加

usersテーブル以下のカラムを追加します。
 1. uid = facebookログイン時に取得してくるデータ
 2. provider = ログインに使用したプロバイダーを取得する(facebook、google、line等)

$ rails g migration AddColumnsToUsers uid:string provider:string

作成されたdb/migrate/xxxxxxxxxxxadd_columns_to_users.rbを確認し、内容に間違えがなければrails db:migrateを実行します。

facebook側の設定

1.facebookに接続し、新しいアプリを追加します。
表示名はアプリの名前です。
2.設定>ベーシックを選択後、ページの一番下のプラットフォームを追加するをクリックし、ウェブサイトを選択する。
サイトURLにhttp://localhost:3000/を入力する。
3.プロダクト+をクリックし、Facebookログインを選択する。
対応アプリを聞かれるので、ウェブを選択する。
4.有効なOauthリダイレクトURIにhttps://localhost:3000/users/auth/facebook/callbackを記載する。スクリーンショット 2019-08-25 1.16.57.png

認証系gemの導入

Gemfile
gem 'omniauth'
gem 'omniauth-facebook'
$ bundle install

Rails側の設定

1.config設定

config/insitializers/devise.rbの一番下に以下を記述します。

devise.rb
 config.omniauth :facebook, FACEBOOK_ID='aaaaaaaa', FACEBOOK_SECRET_KEY='bbbbbbbbb'
end

aaaaaaaaにはfacebook_IDを入力します。
bbbbbbbbにはfacebook_secret_keyを入力します。
IDとsecret_keyは設定>ベーシックで確認出来ます。
※IDがアプリID、secret_keyがapp Secretです。
スクリーンショット 2019-08-25 1.32.33.png

2.deviseにメソッド追加

app/model/user.rbを以下の様に変更します。

user.rb
devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :omniauthable

3.Userモデルにfindメソッド実装

先ほどのapp/model/user.rbを以下の記述をに追加します。

user.rb
  def self.find_for_oauth(auth)
    user = User.where(uid: auth.uid, provider: auth.provider).first

    unless user
      user = User.create(
        uid:      auth.uid,
        provider: auth.provider,
        email:    auth.info.email,
        password: Devise.friendly_token[0, 20]
      )
    end
    user
  end
end

この記載により、facebook認証実施済みユーザはそのままログイン出来る様になります。
facebook認証する際には、uidとproviderとemailとpasswordを取得してきます。
パスワードはDevise.friendly_token[0, 20]により生成されます。そのパスワードはランダムに決まった数字20桁の為、登録したユーザには分かりません。

4.コールバック処理の実装

app/controllersusersファイルを作成し、その中にomniauth_callbacks_controller.rbを作成します。
そして、以下の記述をします。

omniauth_callbacks_controller.rb
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    callback_from :facebook
  end

  private
  def callback_from(provider)
    provider = provider.to_s

    @user = User.find_for_oauth(request.env['omniauth.auth'])

    if @user.persisted?
      flash[:notice] = I18n.t('devise.omniauth_callbacks.success', kind: provider.capitalize)
      sign_in_and_redirect @user, event: :authentication
    else
      session["devise.#{provider}_data"] = request.env['omniauth.auth']
      redirect_to new_user_registration_url
    end
  end

end

5.ルーティング設定

config/route.rbに以下を追加します。

route.rb
devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

6.リンクの記載

リンクは以下の様になります。

'''ruby:new.html.erb
<%= link_to "facebook", user_facebook_omniauth_authorize_path %>
'''

参考資料

【開発メモ】RailsアプリでFacebookログインの認証機能を実装させる方法
Railsでomniauth(google/facebook/)実装方法

注意事項

facebookはHTTPSしか有効なOAuthリダイレクトURIに登録出来ません。
なので、開発環境なら誰でも使用出来ますがデプロイ後はHTTPSに変更する必要があります。

体験談

私はgoogle、facebook、LINEの認証を実装しました。
googleは特に変更することなくデプロイ後も使用できます。
LINEはemail情報を取得するのに申請を出さなければいけない為、前準備に時間が掛かります(約3週間)
twitterも同様に申請が必要です。

デプロイすることを考慮するとgoogle認証が一番簡単でした。

最後に

たったこれだけでfacebookでの認証が出来る様になります。
よければ参考にしてみて下さい。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away