こんにちは、2年目のYukaです。
開発部所属でありながら実は、、
実際に自分で手を動かして開発する機会がなかなかありませんでした。。
しかしついに、、、
開発初心者がRailsでWebアプリの開発に挑戦します！！
今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるように
”devise + omniauth-google-oauth2の組み合わせでログイン画面を作成すること”
っです！
まずはdeviseのインストールからやってみます。
◇Gemfileにdevise用のgem追記し保存
vi Gemfile gem 'devise' gem 'omniauth' gem 'omniauth-google-oauth2'
◇ターミナルにてdeviseインストール
bundle install rails g devise:install rails g devise user
◇データベースに必要なカラムの追加
rails g migration add_omniauth_to_users
rails g migration add_omniauth_to_users
class AddOmniauthToUsers < ActiveRecord::Migration
def change
add_column :users, :provider, :string
add_column :users, :uid, :string
add_column :users, :name, :string
add_column :users, :token, :string
end
end
◇:omniauthableを追記しOmniAuthを有効にし、self.find_for_google_oauth2 メソッドを追加
/app/models/user.rb
class User < ApplicationRecord # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, #:omniauthableを下記に追加 :recoverable, :rememberable, :trackable, :validatable, :omniauthable, :omniauth_providers => [:google_oauth2] #self.find_for_google_oauth2(auth)メソッドを追加 def self.find_for_google_oauth2(auth) user = User.where(email: auth.info.email).first unless user user = User.create(name: auth.info.name, provider: auth.provider, uid: auth.uid, email: auth.info.email, token: auth.credentials.token, password: Devise.friendly_token[0, 20]) end user end end
◇ログイン設定したいHTMLにリンクを設定する
<%= link_to 'Googleでログインする！！', user_omniauth_authorize_path(:google_oauth2) %>
◇Google側での設定
https://console.developers.google.com/project
上記URLにログインする
◇Client IDの取得
1. 新規プロジェクトの作成
2. Google Apps API、Contacts APIを有効にする
3. 認証情報を作成、OAuthクライアントIDを選択
4. アプリケーションの種類、ウェブアプリケーションを選択
5. 承認済みのリダイレクト URIに下記追加
http://localhost:8081/users/auth/google_oauth2/callback
◇Client IDとClient secretを追記する
config/secrets.yml
development: secret_key_base: xxxxxxxxxxxxxxxxxxxx google_client_id: 取得したClient IDを記載する google_client_secret: 取得したClient secretを記載する
config/initializers/devise.rb
config.omniauth :google_oauth2,
Rails.application.secrets.google_client_id,
Rails.application.secrets.google_client_secret
end
◇ルートにもdevise用に定義
config/routes.rb
devise_for :users, controllers: {
:omniauth_callbacks => "users/omniauth_callbacks",
}
◇コールバックで呼び出されるコントローラーの定義
app/controllers/配下にusersディレクトリを作成
app/controllers/users/omniauth_callbacks_controller.rb
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController def google_oauth2 @user = User.find_for_google_oauth2(request.env["omniauth.auth"]) if @user.persisted? flash[:notice] = I18n.t "devise.omniauth_callbacks.success", :kind => "Google" sign_in_and_redirect @user, :event => :authentication else session["devise.google_data"] = request.env["omniauth.auth"] redirect_to new_user_registration_url end end end
◇rails serverを起動
今回はポートを8081に指定して起動する rails s -p 8081
◇ブラウザで対象のページを確認
http://localhost:8081/home/index
Googleのログインページにリダイレクトされる
Googleアカウントでログインしてみる。
デフォルトのviewファイルが呼ばれている！！
カスタマイズしたい。。。。
その場合は、
◇デフォルトのviewをusers配下にコピーする
bundle exec rails generate devise:views users
これで対象のファイルを変更することが可能です！
以上でdeviseを用いてGoogleアカウントでのユーザー認証が可能となります。
