【SNS認証】Facebook認証、Google認証でのユーザー新規登録を行う

おはようございます。
今日はFacebook認証とGoogle認証でのユーザー新規登録のやり方について記事を書いていきたいと思います。基本的にはTwitter認証でのやり方と同じです。

前提

Twitter認証によるユーザー新規登録ができているものとします。まだできていない場合はまずは、下記事を読んだ上での閲覧をお願いします。

https://shun-0211.hatenablog.com/entry/2020/06/10/110831

実装の流れ

①　必要なgemをインストールする
③　Facebook developerとGoogle developerでAPI使用の登録を行う
②　devise.rbファイルに環境変数とスコープを記載する
④　viewで新規登録用のボタンを作成する
⑤　コントローラーにFacebook、googleの新規登録用メソッドを追加する

以上のステップで実装していきます。Twitter認証機能が実装できていれば10分ほどで実装完了できます。

①　必要なgemをインストールする

毎度おなじみGemfileに必要なgemを記載しbundle installです。
gemfile

gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'

terminal
bundle install

②　Facebook developerとGoogle developerでAPI使用の登録を行う

Twitterでの登録は使用目的など事細かに書く必要がありましたが、FacebookとGoogleに関しては特にありませんでした。下記サイト通りにすれば簡単に登録ができました。一点だけ注意点があるとすると、Facebook developerではリダイレクトURLを記載しなければいけません。ここには、コールバックURLを記載します。自分の場合、http://localhost:3000/users/auth/google_oauth2/callbackでした。

（参考サイト）
Facebook developer　https://qiita.com/mailok1212/items/74e6dae08c1bafb874ec
Google developer　https://qiita.com/bino98/items/596b5cffeca7c104bd90


③　devise.rbファイルに環境変数とスコープを記載する

まずは、環境変数を.envに定義します。環境変数は各種ページからコピーしてきます。Facebookの場合、下画像のアプリIDとapp secretです。

f:id:shun_0211:20200611204147p:plain
Googleの場合、下画像のクライアントIDとクライアントシークレットです。

f:id:shun_0211:20200611204637p:plain
.env

FACEBOOK_API_KEY = 734142477321955
FACEBOOK_API_SECRET = ~~~

GOOGLE_API_KEY = 79047870815-2p41in0b6la2k88po136iv9kfu5t5m1a.apps.googleusercontent.com
GOOGLE_API_SECRET = ~~~

また、deviseでのログインになるので、devise.rbにSNS認証のための環境変数と使用するスコープを記載します。
devise.rb

Devise.setup do |config|
  config.omniauth :facebook, ENV['FACEBOOK_API_KEY'], ENV['FACEBOOK_API_SECRET'], scope: 'email'
  config.omniauth :google_oauth2, ENV['GOOGLE_API_KEY'], ENV['GOOGLE_API_SECRET'], scope: 'email, profile'
end

ここで注意するのはgoogleの方にはscopeにprofileも入れているところです。ユーザー新規登録する際、googleアカウントでの名前を使う場合には記載が必要です。


④　viewで新規登録用のボタンを作成する

viewに新規登録用のボタンを作成していきます。rails routesにはSNS認証で使いそうなパスが2つありますが、user_facebook_omniauth_authorize_pathの方を記載します。このパスで認証を行い、user_facebook_omniauth_callback_pathの方で、データベースに登録しています。
f:id:shun_0211:20200611210206p:plain

new.html.haml

.button__box
# 追記
  = link_to user_facebook_omniauth_authorize_path, class: "facebook__registration__button" do
    %i.fab.fa-facebook-square
     facebookで登録する
  = link_to user_google_oauth2_omniauth_authorize_path, class: "google__registration__button" do
    %i.fab.fa-google
     googleで登録する


⑤　コントローラーにFacebook、googleの新規登録用メソッドを追加する

最後にコントローラーにメソッドを追加します。あとの処理はtwitter認証のときに記載したメソッドがそのまま使えるので、ここで終わりです。
omniauth_callbacks_controller.rb

# 追記
def facebook
  callback_from :facebook
end

def google_oauth2
  callback_from :google_oauth2
end



以上になります。ここまで読んでくださり、ありがとうございました。分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！