【Rails】アプリ作成の流れ⑤【SNS認証機能】

前回は

パスワード認証機能を実装しました。

目次

1. SNS認証機能

SNS認証機能

• SNS認証機能はSNSに登録されているユーザー情報を取得して、自分で作ったアプリにログインさせるといった機能。
• SNSによって取得できる情報は違う。

gem 'omniauth'を使うことで実装できる。

• omniauthを使うことで、異なる形式を一つの統一された形式に変換してくれる。

【参考記事】
https://qiita.com/kazuooooo/items/47e7d426cbb33355590e
https://qiita.com/zenizh/items/94aec2d94a2b4e9a1d0b
https://qiita.com/Hassan/items/176bc2c6fd75a3e00111

必要なgemの導入

Gemfile

gem 'omniauth'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-google-oauth2'

ターミナル

% bundle install

Omniauthに必要なカラムをUserテーブルに追加

ターミナル

% rails g migration AddOmniauthToUsers provider:string uid:string
% rails db:migrate

initializerにomniauthの設定

initializers/devise.rb

config.omniauth :facebook, ENV['FACEBOOK_KEY'], ENV['FACEBOOK_SECRET'], scope: 'email', info_fields: 'email', callback_url: "#{ENV['HOST']}/users/auth/facebook/callback"
config.omniauth :twitter, ENV['TWITTER_API_KEY'], ENV['TWITTER_API_SECRET'], scope: 'email', oauth_callback: "#{ENV['HOST']}/users/auth/twitter/callback"
config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'], scope: 'email', redirect_uri: "#{ENV['HOST']}/users/auth/google_oauth2/callback"

後々、秘密鍵をcredentials.ymlに変更する。

Userモデルの編集をする。

• omniauthableの追記する。
• from_omniauthを追加する。

models/user.rb

  class User < ApplicationRecord
    devise :omniauthable, omniauth_providers: %i[facebook twitter google_oauth2]
    # omniauthのコールバック時に呼ばれるメソッド
    def self.from_omniauth(auth)
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
        user.email = auth.info.email
        user.password = Devise.friendly_token[0,20]
      end
    end
  end

ルーティングを設定する

config/routes.rb

devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

Usersコントローラにコールバック処理を実装

• app/controllers/users以下に
• omniauth_callbacks_controller.rbを作成
• そのファイルを編集

omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController

  # callback for facebook
  def facebook
    callback_for(:facebook)
  end

  # callback for twitter
  def twitter
    callback_for(:twitter)
  end

  # callback for google
  def google_oauth2
    callback_for(:google)
  end

  # common callback method
  def callback_for(provider)
    @user = User.from_omniauth(request.env["omniauth.auth"])
    if @user.persisted?
      sign_in_and_redirect @user, event: :authentication #this will throw if @user is not activated
      set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format?
    else
      session["devise.#{provider}_data"] = request.env["omniauth.auth"].except("extra")
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end

end

各プラットフォーム毎に設定する

Facebook

• Facebook APIの導入

• Facebook for Developersの「設定」→「ベーシック」
  ここで「アプリID」と「app secret」が確認できる。

• 「Facebookログイン」→「設定」→「有効なOAuthリダイレクトURI」
  ここでURLを保存する。
  ※まだしていない。

• 本番で利用するときは
  プライバシーポリシーページを作成して、StatusをONにする。

Twitter

• Twitter APIの導入 https://dev.classmethod.jp/articles/twitter-api-approved-way/#pl2
• Twitter Developerの画面右上の「申し込む」 「Twitterユーザー向けの構築ツール
• APIキーとシークレットキーを取得
• callbackurlを指定
• privacy policy
• terms of service
• permissionはread only
• Request email addresses from usersにチェックを入れる

Google

• 新しいプロジェクトを作成
• PeopleAPI認証の有効にする
• 認証情報を作成する→「OAuthクライアントIDの作成」
• クライアントIDとクライアントシークレットをメモする まだしていない
• リダイレクトURIを設定する まだしていない
• Google+のAPIを有効にしておく

まとめ

まだ実装はできていない。
- まずはAPIの取得が大変
- APIキーとシークレットキーの管理が大変