ino-akiのブログ

ITエンジニアを目指して学習したことをアウトプットするブログ

Gemを用いてSNS認証を実装

Gemを用いてSNS認証を実装


SNS認証のGemをインストール
Gemfile
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem "omniauth-rails_csrf_protection"
gem 'omniauth', '~>2.1.1'

 

FacebookGoogleのomniauthをインストール
Omniauth認証はCSRF脆弱性が指摘されているため、omniauth-rails_csrf_protectionというGemをインストールして対策
% bundle install

 

API登録の際に、取得したIDやシークレットキーを環境変数に設定
% vim ~/.zshrc
# iを押してインサートモードに移行し、下記を追記する。既存の記述は消去しない。
export FACEBOOK_CLIENT_ID='メモしたアプリID'
export FACEBOOK_CLIENT_SECRET='メモしたapp secret'
export GOOGLE_CLIENT_ID='メモしたクライアントID'
export GOOGLE_CLIENT_SECRET='メモしたクライアントシークレット'
# 編集が終わったらescapeキーを押してから:wqと入力して保存して終了

# 編集した.zshrcを読み込み直して、追加した環境変数を使えるようにする
% source ~/.zshrc

 

アプリ側で環境変数を読み込む記述
config/initializers/devise.rbを編集
Devise.setup do |config|
  # 省略
  config.omniauth :facebook,ENV['FACEBOOK_CLIENT_ID'],ENV['FACEBOOK_CLIENT_SECRET']
  config.omniauth :google_oauth2,ENV['GOOGLE_CLIENT_ID'],ENV['GOOGLE_CLIENT_SECRET']
end


SnsCredentialモデルを作成
% rails g model sns_credential

db/migrate/XXXXXXXXXXXXXXXX_create_sns_credentials.rb
class CreateSnsCredentials < ActiveRecord::Migration[6.0]
 def change
   create_table :sns_credentials do |t|
     t.string :provider
     t.string :uid
     t.references :user,  foreign_key: true

     t.timestamps
   end
 end
end
% rails db:migrate

 

UserモデルとSnsCredentialモデルを編集
app/models/user.rb
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :omniauthable, omniauth_providers: [:facebook, :google_oauth2]

 

アソシエーションを組む
app/models/user.rb
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :omniauthable, omniauth_providers: [:facebook, :google_oauth2]

  has_many :sns_credentials

 

app/models/sns_credential.rb
class SnsCredential < ApplicationRecord
 belongs_to :user
end

 

deviseを再設定
% rails g devise:controllers users

config/routes.rb
Rails.application.routes.draw do
 devise_for :users, controllers: {
   omniauth_callbacks: 'users/omniauth_callbacks',
   registrations: 'users/registrations'
 }
  root 'users#index' 
  resources :users, only: :new 
end

 

ここまででSNS認証を実装する準備が終了