Rails

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

Rails

 

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

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

SNS認証とは

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認証ができると、面倒なログイン機能を省いてユーザー登録ができる実装が可能なので、ぜひこの機会に導入・設定方法をマスターしていきましょう。...

OAuth(オーオース)とは、Webサーバーにあるユーザーのリソースへのアクセス権限を、ユーザーの代理で行うことを許可するための認証用のプロトコルのことである。

OAuthを使用することで、エンドユーザーはクライアントにユーザ名やパスワードを知らせることなく、サーバーリソースへの第三者アクセスを認可することができる。OAuthでは、ログインのために必要なユーザー名とパスワードをユーザー毎に割り当てるトークンと呼ばれる情報に置き換えて使う。このトークンを使うことで外部のサービスにはパスワードを教えることなく、システム間の情報の共有が可能になる。

参考:https://www.weblio.jp/content/OAuth

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」を作成し、以下の記述を貼り付けましょう。

Image from Gyazo

↓ .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

環境変数にきちんとIDとシークレットが設定できているかどうかは「rails c」を用いて確認することができます。使い方の例としては以下のようになります。

↓ ターミナル

$ 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

deviseで作成したテーブルに新たにカラムを追加する場合、ストロングパラメーターでそれらを受け取る記述を追記しなければなりません。

↓ application_controller.rb(例)

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

provider(直訳: 与える者)は、送られてきたAPIのことを指しています。Facebook認証をした場合は「facebook」が、Google認証をした場合は「google」が追加されます。

uid(略: user id)とは、ユーザーを識別するIDのことです。

 

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

↓ ターミナル

$ 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つ実装できるように学習していきましょう。