25
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-08-24

初めに

ポートフォリオを作成する際に、『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.リンクの記載

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

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での認証が出来る様になります。
よければ参考にしてみて下さい。

25
29
6

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
  3. You can use dark theme
What you can do with signing up
25
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?