【Rails】deviseを用いたSNS認証(Facebook・Google)の導入方法を簡単に解説

今回はdeviseを用いたSNS認証の仕組みと、その導入方法について簡単に解説したいと思います。ユーザー登録の際にSNS認証がないアプリケーションは今時珍しいくらいなので、ぜひこの機会にマスターしましょう。

今回はFacebookとGoogle認証に焦点を当てたいと思います。

SNS認証とは

SNS認証とは、FacebookやTwitterなどSNSのアカウントを利用した認証方法です。

認証の際に、「Facebookでログインする」などの項目を選択すると、SNSのサイトに接続し、SNSの画面で認証を行うことができます。SNSの認証の画面では、SNSに登録しているIDとパスワードを用いて認証を行います。

今回は複数あるSNSの中でもFacebookとGoogleに焦点を当てています。

実装方法

ではここから、FaceboookとGoogleで認証ができるように導入・設定していきましょう。deviseを用いて実装する前提で進めていきます。

OAuth(オーオース)の登録

まずは以下の記事を参考にFacebookとGoogleのアクセストークンを入手します。アクセストークンは、FacebookとGoogleからユーザー情報をもらうための利用許可証だと思っておきましょう。

【Rails, Facebook認証】APIの設定方法・登録手順について簡単にまとめてみた！Facebook認証を行うための、API側の設定方法・登録手順について簡単にまとめました。Facebook認証ができると、面倒なログイン機能を省いてユーザー登録ができる実装が可能なので、ぜひこの機会に導入・設定方法をマスターしていきましょう。...

【Rails, Google認証】APIの設定方法・登録手順について簡単にまとめてみた！Google認証を行うための、API側の設定方法・登録手順について簡単にまとめました。Google認証ができると、面倒なログイン機能を省いてユーザー登録ができる実装が可能なので、ぜひこの機会に導入・設定方法をマスターしていきましょう。...

gemのインストール

続いてOAthuを利用するために必要なgemをインストールします。

↓ Gemfile

gem 'devise'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem "omniauth-rails_csrf_protection"

↓ .envで環境変数を管理する場合に必要になります(.envを使用しない場合は記述しなくて結構です)
gem 'dotenv-rails'

↓ ターミナル

$ bundle install
$ rails g devise:install

環境変数の設定

次に、先ほど生成したFacebookとGoogleのIDとシークレットを環境変数に設定します。設定方法としては以下の3パターンがあるので、開発状況に合った方法で進めていきましょう。

• credentials.yml.encに書き込む
• .envに書き込む
• ~/.bash_profile(~/.zshrc)に書き込む

credentials.yml.encに書き込む場合は、「EDITOR=”vi” bin/rails credentials:edit」を実行して以下のように記述します。

↓ credentials.yml.enc

google:
  client_id: アプリID
  client_secret: app secret

facebook:
  client_id: クライアントID
  client_secret: クライアントシークレット

.envに書き込む場合は、一番上のディレクトリに「.env」を作成し、以下の記述を貼り付けましょう。

↓ .env

FACEBOOK_CLIENT_ID='アプリID'
FACEBOOK_CLIENT_SECRET='app secret'
GOOGLE_CLIENT_ID='クライアントID'
GOOGLE_CLIENT_SECRET='クライアントシークレット'

このままではgitに.envに記載した内容が上がってしまうので、.gitignoreに以下の記述を追記します。

↓ .gitignore

.env

~/.bash_profile(~/.zshrc)に書き込む場合は、以下のように設定していきます。まずはvimコマンドでテキストエディタを開きましょう。

↓ ターミナル

MacのバージョンがMojaveの場合
$ sudo vim ~/.bash_profile

MacのバージョンがCatalinaの場合
$ sudo vim ~/.zshrc

そこにメモしたIDとシークレットを記載しましょう。

↓ ~/.bash_profile(~/.zshrc)

export FACEBOOK_CLIENT_ID='アプリID'
export FACEBOOK_CLIENT_SECRET='app secret'
export GOOGLE_CLIENT_ID='クライアントID'
export GOOGLE_CLIENT_SECRET='クライアントシークレット'

「i」でインサートモード(記述可能なモード)に切り替え、記述が終わったら「:wq」で保存します。

変更後はこれらの設定を反映させるため、以下のコマンドを打ち込みます。

↓ ターミナル

$ source ~/.bash_profile

もしくは

$ source ~/.zshrc

環境変数の読み込み

続いて、先ほど環境変数に設定したIDとシークレットをdevise側で読み込む設定を行います。credentials.yml.encと.env(~/.bash_profile)に記載した場合で異なるので注意しましょう。

devise.rbを以下のように編集しましょう。

↓ devise.rb

Devise.setup do |config|
  # 省略

  # ↓credentials.yml.encに記載した場合
  config.omniauth :google_oauth2, Rails.application.credentials.google[:client_id], Rails.application.credentials.google[:client_secret],scope: %w(email)
  config.omniauth :facebook, Rails.application.credentials.facebook[:client_id], Rails.application.credentials.facebook[:client_secret], scope: %w(email)
  
  # ↓.envや~/.bash_profileに記載した場合
  config.omniauth :facebook,ENV['FACEBOOK_CLIENT_ID'],ENV['FACEBOOK_CLIENT_SECRET']
  config.omniauth :google_oauth2,ENV['GOOGLE_CLIENT_ID'],ENV['GOOGLE_CLIENT_SECRET']

  # 省略
end

$ rails c
> Rails.application.credentials.google[:client_id]
> グーグルで登録したIDが表示される

> ENV['FACEBOOK_CLIENT_SECRET']
> Facebookで登録したシークレットが表示される

テーブルの作成

次にユーザー情報を保存するためのテーブルと、API(今回はFacebookとGoogle)から送られてくる情報を保存するためのテーブルをそれぞれ作成します。

以下のコマンドでusersテーブルsns_credentialsテーブルを作成しましょう。

↓ ターミナル

$ rails g devise user
$ rails g model sns_credential

続いて、作成したマイグレーションファイルに追加したいカラムを記述します。

↓ XXXXXXXX_devise_create_users.rb

class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      # このようにテーブルに加えたい情報を追記
      t.string :nickname, null: false, default: ''
      ・
      ・
      ・
  end
end

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?
  protect_from_forgery with: :exception
  
  private

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
  end
end

↓ XXXXXXXX_create_sns_credentials.rb

class CreateSnsCredentials < ActiveRecord::Migration[5.2]
  def change
    create_table :sns_credentials do |t|
      t.string :provider, null: false
      t.string :uid, null: false
      t.references :user, null: false, forign_key: true
      t.timestamps
    end
  end
end

編集が完了したら、忘れずにマイグレートしておきましょう。

↓ ターミナル

$ rails db:migrate

モデルの編集

最後に、モデルにOAuthを使用するためのオプションとアソシエーションを追記します。

↓ user.rb

class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         # Omniauthを使用するためのオプション
         :omniauthable, omniauth_providers: %i[facebook google_oauth2]

  # アソシエーション
  has_many :sns_credential, dependent: :destroy

  # 以下省略
end

↓ sns_credential.rb

class SnsCredential < ApplicationRecord
  belongs_to :user, optional: true
end

ここまでで、deviseを用いたSNS認証の導入・設定が完了しました。ルーティングやコントローラなど、残りはそれぞれでカスタマイズしていきましょう。

まとめ

• SNS認証とは、FacebookやTwitterなどSNSのアカウントを利用した認証方法である
• OAuth(オーオース)とは、Webサーバーにあるユーザーのリソースへのアクセス権限を、ユーザーの代理で行うことを許可するための認証用のプロトコルのこと
• 環境変数としてFacebookとGoogleのキーを入力し、アプリケーション側でそれを読み込む記述をする
• providerとは送られてきたAPIのことを指す
• uidはユーザーを識別するIDのことである

今回はdeviseを用いたSNS認証の仕組みと、その導入方法について簡単に解説しました。SNS認証はどのAPIでも大体同じ仕組みなので、まずは1つ実装できるように学習していきましょう。