railsでomniauth-facebookを使ってFacebookログインを実装する方法

#やりたいこと
ruby on railsでFacebookログインを実装したい。

実際に検索してみると多くの記事が出てくるがFBの仕様が変更していたりしていてそのまま使える記事がないように思えるので、今回その辺りも踏まえ、手順通りにやれば誰でも簡単にできるようにまとめてみる。

#Facebook側の設定

前提：先にFacebook for developersの登録を完了させておいてください。

その後[このURL](https://developers.facebook.com/quickstarts)からウェブサイトを選択。
![スクリーンショット 2018-03-01 12.52.58.png](https://qiita-image-store.s3.amazonaws.com/0/240838/31ce762c-2619-d454-1f46-f8119b0a835c.png)


次に表示名は適当で良いのでウェブサイトのクイックスタートを実行。**ウェブサイトURLにサイトのURLを入力**し次へを選択。

![スクリーンショット 2018-03-01 12.54.04.png](https://qiita-image-store.s3.amazonaws.com/0/240838/4bbd3460-3b53-6589-19bd-71b6d26cc7f1.png)

Finished!を確認したらSkip to Developer Dashboard を選択してください。

![スクリーンショット 2018-03-01 12.55.17.png](https://qiita-image-store.s3.amazonaws.com/0/240838/29ff5649-e639-dd4e-0b6f-1a84116aed0d.png)

ダッシュボードにいったら後々必要になる手順をやってしまいます。

![スクリーンショット 2018-03-01 12.56.34.png](https://qiita-image-store.s3.amazonaws.com/0/240838/22860f74-8e3b-31a5-ca87-166944b47cdb.png)

設定のベーシックをクリックし、**プライバシーポリシーのURL**を入れてください（適当なURLでも大丈夫です）

次にアプリレビューをクリックし、**「〇〇（アプリ名）を公開しますか？」とあるので公開**します。（これによって開発者モードから切り替わります）

次に設定のベーシックから**「アプリドメイン」を追加**します。

最後に**プロダクトをクリックし、Facebookログインを追加**します。その後5手順くらいなんだか説明が出てきますが無視して、プロダクトの設定から**有効なOAuthリダイレクトURLを追加**してください。（ルートディレクトリは必須で入力が必要です）

**※Facebookの仕様変更によって追加したURLの後ろに/users/auth/facebook/callbackをつける必要があるみたいです。**

![スクリーンショット 2018-03-01 13.01.49.png](https://qiita-image-store.s3.amazonaws.com/0/240838/580ad63d-5763-2dfe-1d84-2b07d8af0027.png)


#コーディング

1. 「devise facebook gem」などとGoogleで検索してみて欲しい。するとこのURL([OmniAuth: Overview](https://github.com/plataformatec/devise/wiki/omniauth:-overview))にたどりつく。あとは基本的にはGitHub内に書いてあるドキュメントを見ながらやっていく。


2. gemのインストール
下記のコードをgemfileに記載

```ruby
gem 'omniauth-facebook'
```


3.ターミナルで以下を実行

```ruby
rails g migration AddOmniauthToUsers provider:string uid:string image:string name:string
rake db:migrate
```


4.config/initializers/devise.rbに以下をコピペ

※APP_IDとAPP_SECRETは自分のもの（設定のベーシックから見れます）

```ruby
config.omniauth :facebook, "APP_ID", "APP_SECRET", scope: 'email', info_fields: 'email,name'

```


5.app/models/user.rbに以下をコピペ

```ruby
:omniauthable
```
![スクリーンショット 2018-03-01 13.04.54.png](https://qiita-image-store.s3.amazonaws.com/0/240838/bae5742e-7511-6bc3-00d1-d17c209fedc6.png)


6.FBログインのリンクを適当なところに書く

```ruby
<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path %>
```


7.config/routes.rbにコピペ

```ruby
devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }
```


8.app/controllers/users/にomniauth_callbacks_controller.rbを作成し、以下をコピペ

```ruby
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    # You need to implement the method below in your model (e.g. app/models/user.rb)
    @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: "Facebook") if is_navigational_format?
    else
      session["devise.facebook_data"] = request.env["omniauth.auth"]
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end
end

```


9.app/models/user.rbに以下をコピペ

```ruby
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]
    user.name = auth.info.name   # assuming the user model has a name
    user.image = auth.info.image # assuming the user model has an image
    # If you are using confirmable and the provider(s) you use validate emails, 
    # uncomment the line below to skip the confirmation emails.
    # user.skip_confirmation!
  end
end

```

#感想

ドキュメントだけだと不十分だったり若干変更している点があって苦戦しましたがなんとかFBログインを実装することができました。

#修正

・有効なOauthリダイレクトURLのところの記述を修正
**※Facebookの仕様変更によって追加したURLの後ろに/users/auth/facebook/callbackをつける必要があるみたいです。**