#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行目付近をみてください。
# ==> 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
gem 'dotenv-rails'
gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'
bundle installします。
アプリケーションのルートディレクトリ直下に.envを作成します。
ここで「=」の後のそれぞれの値は先ほどの認証情報で取得したキーに書き換えておいてください（自分が取得したキーは絶対他言しないように！！また数字は個々人によって変わります）。
GOOGLE_CLIENT_ID='クライアントIDを入力'
GOOGLE_CLIENT_SECRET='クライアント シークレット'
以下のクライアントID,クライアントシークレットをコピーして上に貼り付けてください！
最後に隠しておきたいデータを定義した.envファイルをみんなに公開してしまっては意味が無いのでこのファイルは公開しないようにします。アプリケーションディレクトリにある.gitignoreに下記を追加します。
※もし.gitignoreファイルがない場合はアプリケーションディレクトリーにて作りましょう！
#省略
# 以下を追記
.env
#ルーティングの編集
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
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を作成します！
# 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ページのボタンを実装していきます！
#変更前
<%- 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
エラーや不手際がありましたら是非連絡ください。