LoginSignup
39
37

More than 5 years have passed since last update.

[deviseなし]OmniAuthを利用して「Googleアカウントでログイン」を実装する

Last updated at Posted at 2018-02-11

やること

Railsで作ったWebアプリケーションにソーシャルログイン機能(ソーシャルアカウントを持っていればすぐに利用開始させてあげるタイプ)を付ける。
プロバイダーはGoogle。
deviseは使っていない。

OmniAuth

Webアプリケーションのマルチプロバイダ認証を標準化するライブラリ

Gemfile

omniauth-google-oauth2だけ書いておけばOmniAuth Gemも自動的に依存を判断してインストールされる。

gem 'omniauth-google-oauth2'

Google APIのセットアップ

  • https://console.developers.google.com/ に行く
  • プロジェクトを選択する(なければ作る)
  • 「APIとサービスの有効化」からGoogle+ APIを有効化する
  • 認証情報を作成>OAuth 2.0 クライアント IDを選択する
  • アプリケーションの種類「ウェブ アプリケーション」を選択する
  • 名前を適当に付ける
  • 承認済みのリダイレクト URIに[アプリのroot]/auth/google_oauth2/callbackを追加する

たとえば、ローカルの開発環境とHerokuにデプロイした本番アプリの両方で機能させたければ、承認済みのリダイレクトURIは2つ登録が必要。

OmniAuth利用設定

config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET']
end

環境変数GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETには先ほど作成した認証情報のクライアントIDとクライアントシークレットを設定する。
これらの環境変数を直接使用する以外の方法にEncrypted Credentialsを利用するやり方がある(Rails5.2以上)。その場合は以下のようなコードになる

config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :google_oauth2,
  Rails.application.credentials.google_oauth2[:key],
  Rails.application.credentials.google_oauth2[:secret]
end

これらの値の本体はcredentials.yml.encに書いておく。このファイルは暗号化されており rails credentials:edit コマンドを使って編集する。

credentials.yml.enc
google_oauth2:
  key: "ここにクライアントID"
  secret: "ここにクライアントシークレット"

このファイルの復号化にはconfig/master.keyの内容が使用される。これは必ずバージョン管理から除外しておき(自動でgitignoreに追加された気もする)、本番環境では環境変数RAILS_MASTER_KEYにmaster.keyの内容を設定しておく。

ログインリンク設置

somewhere_view.html.erb
<%= link_to '/auth/google_oauth2' %>

コールバックのルーティング

どのコントローラのどのアクションに担当させるかを設定

routes.rb
get    '/auth/:provider/callback', to: 'foo#bar'

認証情報

認証に成功するとfooコントローラのbarアクションでrequest.env['omniauth.auth']から認証情報が取り出せる。
ハッシュの形式は以下に全貌が載っている。
https://github.com/zquestz/omniauth-google-oauth2#auth-hash

一例として、メールアドレスを取り出したいならrequest.env['omniauth.auth']['info']['email']

あとは上記の要領でいくつか欲しい情報を取得してユーザー新規作成なりログインなりをしてあげる。

広く公開するようなサービスを作る場合、ここで何の情報を取得しているかプライバシーポリシーに書いたりする必要があると思う。

39
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
37