#GoogleでのSNS認証

この記事では、railsでgoogleでの認証を実装していきます！

##ゴール
googleでサインインできるようになる！
以下の画像ようにgoogleでログインできるよう実装していきます！

#前提
ログイン機能 devise を導入していること
rootページが存在していること

#Google Cloud Platformの登録
Googleで認証できるように、まずは以下のサイトから設定をしましょう！
https://console.cloud.google.com

URLは開発環境の場合、こちらを入力してください
http://localhost:3000/users/auth/google_oauth2/callback
本番環境でも使われる場合は、こちらを入力してください
http://本番環境URL/users/auth/google_oauth2/callback

#実装
まず、deviseの設定ファイルを変更します。
config/initializers/devise.rbを開いて、その270行目付近をみてください。

config/initializers/devise.rb

# ==> OmniAuth
# Add a new OmniAuth provider. Check the wiki for more information on setting
# up on your models and hooks.
# config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'
config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET']

次に、Gemfileを追加していきます。

以下gemの説明
**dotenv-rails：**環境変数の管理用のgem
**omniauth-google-oauth2：**GoogleのAPIを利用して認証を行うgem
omniauth-rails_csrf_protection："OmniAuth" の脆弱性対策を行うgem

gemfile

gem 'dotenv-rails'
gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'

bundle installします。

アプリケーションのルートディレクトリ直下に.envを作成します。

ここで「=」の後のそれぞれの値は先ほどの認証情報で取得したキーに書き換えておいてください（自分が取得したキーは絶対他言しないように！！また数字は個々人によって変わります）。

.env

GOOGLE_CLIENT_ID='クライアントIDを入力'
GOOGLE_CLIENT_SECRET='クライアント シークレット'

以下のクライアントID,クライアントシークレットをコピーして上に貼り付けてください！

　最後に隠しておきたいデータを定義した.envファイルをみんなに公開してしまっては意味が無いのでこのファイルは公開しないようにします。アプリケーションディレクトリにある.gitignoreに下記を追加します。
※もし.gitignoreファイルがない場合はアプリケーションディレクトリーにて作りましょう！

.gitignore

#省略
# 以下を追記
.env

#ルーティングの編集

config/routes.rb

Rails.application.routes.draw do
  # deviseのコントローラを編集するときは以下を記述しないと変更が反映されないので注意

  # 変更前
  devise_for :users
　# ここまで

  # 変更後
  devise_for :users, controllers: {
    # deviseの階層を編集した場合は適宜pathを編集してください
    omniauth_callbacks: "users/omniauth_callbacks"
  }
　# ここまで

  resources :posts

  root 'posts#index'
end

userモデルを編集

user.rbに処理を書いていきます。
ここでの注意点は２点あります！

:validatableの後ろに,「カンマ」を入れることです！（,を入れないとエラーが出てしまいます。）
deviseのuserカラムに name を追加している場合は以下のコメントアウトは外します！
# user.name = auth.info.name

user.rb


class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         # 以下を追加
         # google以外の認証をする場合は %i[twitter, facebook]などとなります
         :omniauthable, omniauth_providers: %i[google_oauth2]

  # クラスメソッドを作成します
  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      # deviseのuserカラムに name を追加している場合は以下のコメントアウトも追記します
      # user.name = auth.info.name
      user.email = auth.info.email
      user.password = Devise.friendly_token[0,20]
    end
  end
end

DBにwhereで検索したオブジェクトが存在しなければ、何も処理を行わず、
DBにwhereで検索したオブジェクトが存在していれば、userオブジェクトにdo以降の処理を入力してDBに保存する処理になってます。

データベースにカラムを追加する

認証に必要なカラムproviderカラムと、uidカラムを作成するためのマイグレーションファイルを作成します

$ rails g migration AddOuthColumnToUsers provider:string uid:string

rails db:migrate

#omniauthの処理を編集します

準備としてcontrollersファイルの配下にusersフォルダを作成しましょう！
そしてそのフォルダの中にomniauth_callbacks_controller.rbを作成します！

controllers/users/omniauth_callbacks_controller.rb

# frozen_string_literal: true

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  # callback for google
  def google_oauth2
    callback_for(:google)
  end

  def callback_for(provider)
    # 先ほどuser.rbで記述したメソッド(from_omniauth)をここで使っています
    # 'request.env["omniauth.auth"]'この中にgoogoleアカウントから取得したメールアドレスや、名前と言ったデータが含まれています
    @user = User.from_omniauth(request.env["omniauth.auth"])
    sign_in_and_redirect @user, event: :authentication
    set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format?
  end

  def failure
    redirect_to root_path
  end
end

#buttonの作成
最後に、sign inページのボタンを実装していきます！

views/users/shared/_links.html.erb

 #変更前
  <%- if devise_mapping.omniauthable? %>
    <%- resource_class.omniauth_providers.each do |provider| %>
      <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post %><br />
    <% end %>
  <% end %>
 #ここまで

 #変更後
  <%- if devise_mapping.omniauthable? %>
　　　<%= button_to 'Sign in with Google', user_google_oauth2_omniauth_authorize_path %>
  <% end %>
 #ここまで

user_google_oauth2_omniauth_authorize_pathは是非rails routesで確認して見てください！

以上でGoogle認証の実装は完了となります！
今回は非常に様々な方の記事を引用させていただきました。ありがとうございます。
参考記事：https://qiita.com/akioneway94/items/35641ad30c2acb23b562

エラーや不手際がありましたら是非連絡ください。