rails gem omniauthableを使って、facebookでログインできる機能を作る

```ruby:環境
rail 5.0.2
deviseでログイン機能を作っている。
```

やること
　　facebookのアカウントを使って、アプリにログインできる機能を作る。ログイン機能をdeviseで作っている前提でやる。

ログイン機能でdeviseのやり方
 https://github.com/plataformatec/devise

```ruby:Gemfile
 gem 'omniauth-facebook'
```

この　gemを追加する

```ruby:ターミナル
$rails g migration AddOmniauthToUsers provider:string uid:string
$rake db:migrate
```

```ruby:config/initializers/devise.rb

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


```
 上の"APP_ID", "APP_SECRET"は、　facebookacebookdevelopersから取得する。これは、facebookacebookdeveloperのところで、説明するから後で書く。


```ruby:app/models/user.rb

class User < ApplicationRecord

 devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable, :omniauthable

 .......
 ....
 ..


end

```
devise:のところに、:omniauthableを追加する。

```ruby:config/routes
devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }
```

routesに追加する。

app/controllers/users/omniauth_callbacks_controller.rbを作る。
userフォルダーを作り、コントローラーを作る。

```ruby:app/controllers/users/omniauth_callbacks_controller.rb
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
```

```ruby:app/models/user.rb

class User < ApplicationRecord

 devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable, :omniauthable

 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
 
```

## facebookdevelopersの説明

facebookでログインするために、facebookdevelopersを使う。

[facebookdevelopersのリンク](https://developers.facebook.com/)
　googleでfacebookdevelopersと調べてください

次にfacebookで各自のアカウントで、　facebookにログインしてください

###新しいアプリを作るボタン押す。

トップページの右上にマイアプリのボタンがあるので、おしてください。そうすると、新しいアプリの追加がでてくるので、それをおしてください

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/167576/ede74a52-f3cb-34bc-d670-f766b27a3c7e.png)

###新しいアプリの設定

次の画面が出てきます。
![screenshot 2.png](https://qiita-image-store.s3.amazonaws.com/0/167576/2489f9fa-b3e4-242d-5bc2-14aaf9579c11.png)

表示名は、各自のアプリの名前をつけてください。
メールアドレスは、各自のメールアドレスが出てくる。

カテゴリは、アプリの種類なので、各自のあぷりの種類をえらんでください

そしたら、 アプリIDを作成してくださいのボタンをおしてください

確認のために、上の英文字を打ってください

###　プロダクト画面
![screenshot 3.png](https://qiita-image-store.s3.amazonaws.com/0/167576/69ca5beb-ef96-6d6f-ef35-b179cec6fe6b.png)

この画面が出ます。左上のダッシュボードをおしてください

##プラットフォーム選択する

![screenshot 4.png](https://qiita-image-store.s3.amazonaws.com/0/167576/f477e95b-9b8e-6c73-1b4a-fb6f8e9e369a.png)

そしたら、プラットフォーム作成の青いボタンををおしてください

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/167576/4a0bd8a3-1d7d-4c99-819e-822c26611825.png)
これは、アプリがどんな種類のか登録です。　右の　ウェブサイトを押してください

### 詳細な登録

![screenshot 2.png](https://qiita-image-store.s3.amazonaws.com/0/167576/6574ba17-e388-320b-25f5-6a31f465cbf8.png)

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/167576/ead9934c-0e2f-d32c-201f-c6ddf997d33f.png)

一番下にURLを登録するボタンがあります。ここは、http://localhost:3000/と打ってください。
これで登録は終わりです。

有効なOAuthリダイレクトURIにもhttp://localhost:3000/をやってください

![screenshot 4.png](https://qiita-image-store.s3.amazonaws.com/0/167576/f00896b2-b519-0e24-cb97-058b03318e69.png)

次にこのダッシュボード画面に戻ってください。右上の自分のアプリのボタンをおして、アプリ名前を選択したら、戻れます。

赤い文字で、隠してありますが、上のアプリIDとapp secretを確認してください。
app secretは、facebookのパスワードを入力しないと表示しないです。

```ruby:config/initializers/devise.rb

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


```

アプリIDとapp secretをに記入します。

## facebookボタンのリンクをはる

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

```ruby:app/views/devise/registrations/new.html.erb

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

```

 同様にログインページにも同じリンクを貼ります。

これで終わりです。


感想
　facebookつけるのは、意外と簡単だった。自分は、他のアプリにfacebookを使って登録をすることが多いので、いいと思った。


参考資料
https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview