RailsにSNS認証を分かりやすく導入する方法~Omniauthの導入~

Railsのアプリを作っている時、他のアプリでも使っているようなSNS認証ができるようになりたいなぁと思い、SNS認証をするためのgemを探したいたらOmniauthが良いとのことだったので導入していきます。
僕は手軽に作りたかったのでdeviseを使っています

目次

目的

簡単にOmniauthを導入する

(前提、環境)

mac
macOS Mojave 10.14.5
ruby 2.5.1
rails 5.2.3
gem ‘devise’ 4.7.1

はじめに

公式

いつも通りまずは一次ソースのgithubを見に行きます。

omniauth
https://github.com/omniauth/omniauth
omniauthで使えるツールの一覧
https://github.com/omniauth/omniauth/wiki/List-of-Strategies

omniauthとは

webアプリケーションの一般的な認証ツールです。
みんな大好きgoogleさんからあまりセキュリティが強く無いアプリまで幅広く抑えているので何かあったらこのgemを使っておけば問題ないです。
ツール一覧から自分が使いたいアプリのgemを入れていきましょう!

導入

deviseの導入

deviseについては長くなるので別途記事書きます

googleの場合

RailsにGoogleのSNS認証を分かりやすく導入する方法~omniauth-google-oauth2~
https://hirocorpblog.com/rails%e3%81%abgoogle%e3%81%aesns%e8%aa%8d%e8%a8%bc%e3%82%92%e5%88%86%e3%81%8b%e3%82%8a%e3%82%84%e3%81%99%e3%81%8f%e5%b0%8e%e5%85%a5%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95omniauth-google-oauth2/

facebookの場合

RailsにfacebookのSNS認証を分かりやすく導入する方法~omniauth-facebook~
https://hirocorpblog.com/post-284/

twitterの場合

こちら別途記事を書きます!

共通している導入方法

①gemをインストールしてAPIを取得する。

それぞれAPIの取り方が異なるので僕が使ったやつだけ上にリンク貼ります。

②routes.rbにルーティングをセット

今回は例としてsessionコントローラーがある前提です!

# in config/routes.rb
get '/auth/:provider/callback', to: 'sessions#create'

③コントローラーに記述

以下のような感じで記述します。(大分抽象化しているものがgithubにあったのでそのまま持ってきました。)

# in app/assets/controllers/~~~controller.rb
class SessionsController < ApplicationController
  def create
    @user = User.find_or_create_from_auth_hash(auth_hash)
    self.current_user = @user
    redirect_to '/'
  end

  protected

  def auth_hash
    request.env['omniauth.auth']
  end
end

④config/initializersの直下にomniauth.rbを作成して記述

omnuauth.rbを作成してアプリごとにenvで呼んでください。
※僕はRails5.2系なのでcredential.ymlで呼びました。
credential.ymlがわからない方はcredential.ymlの使い方を参照ください!

# in config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :developer unless Rails.env.production?
  provider :app名, ENV['app名_KEY'], ENV['app名_SECRET']
end

終わりに

この記事は単にomniauthの紹介のための記事になってしまいました笑
新しい認証を試したら追記していこうと思います!

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!
目次
閉じる