初心者がRailsで開発 – deviseでユーザー認証設定 –
こんにちは、2年目のYukaです。
開発部所属でありながら実は、、
実際に自分で手を動かして開発する機会がなかなかありませんでした。。
しかしついに、、、
開発初心者がRailsでWebアプリの開発に挑戦します!!
今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるように
”devise + omniauth-google-oauth2の組み合わせでログイン画面を作成すること”
っです!
まずはdeviseのインストールからやってみます。
◇Gemfileにdevise用のgem追記し保存
1 2 3 4 |
vi Gemfile gem 'devise' gem 'omniauth' gem 'omniauth-google-oauth2' |
◇ターミナルにてdeviseインストール
1 2 3 |
bundle install rails g devise:install rails g devise user |
◇データベースに必要なカラムの追加
1 |
rails g migration add_omniauth_to_users |
1 2 3 4 5 6 7 8 9 10 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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にリンクを設定する
1 |
<%= 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に下記追加
1 |
http://localhost:8081/users/auth/google_oauth2/callback |
◇Client IDとClient secretを追記する
config/secrets.yml
1 2 3 4 5 |
development: secret_key_base: xxxxxxxxxxxxxxxxxxxx google_client_id: 取得したClient IDを記載する google_client_secret: 取得したClient secretを記載する |
config/initializers/devise.rb
1 2 3 4 |
config.omniauth :google_oauth2, Rails.application.secrets.google_client_id, Rails.application.secrets.google_client_secret end |
◇ルートにもdevise用に定義
config/routes.rb
1 2 3 |
devise_for :users, controllers: { :omniauth_callbacks => "users/omniauth_callbacks", } |
◇コールバックで呼び出されるコントローラーの定義
app/controllers/配下にusersディレクトリを作成
app/controllers/users/omniauth_callbacks_controller.rb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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配下にコピーする
1 |
bundle exec rails generate devise:views users |
これで対象のファイルを変更することが可能です!
以上でdeviseを用いてGoogleアカウントでのユーザー認証が可能となります。
参考URL
https://github.com/plataformatec/devise

関連記事
-
-
【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)
こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …
-
-
Scala実践「Either型を使ってimmutable(不変)なコードを書こう!」
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Scalaでイケてるコードを書きたい! 背景 わたくしはDACに入社してからScala …
-
-
Vagrantの機能を使って開発環境の効率をあげてみた。
プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。 保守の仕事に関わると、 ユーザからのお問い合わせだったり、監視アラートによる検知から システムを調査することがあります。 ログとソースコードを見て、不具合を特定し改修する。 すぐできればカッコいいですが、 「本番環境に反映して別のエ …
-
-
Android 非同期処理についてまとめてみた
Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …
-
-
Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発・保守を担当しています。 エンジニアの皆さん、デザインってどうしてます? わたくしはプライベートでとあるW …
-
-
AWSにRailsアプリをデプロイする(公開編)
次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるので とりあえずこれを設定していきます。 アプリのsecret_key_baseの設定 [crayon-603b666a4c8ba753926 …
-
-
いまさらですが… GNU screen チートシート
最近はローカル環境で開発するようになってきたので、screen コマンドを使う機会も少なくなって来たような気がします。で、使ってないと忘れてしまうので、チートシートを作ってみました。 参照サイト GNU screen [quick_reference] 起動 コマンド 動作 screen -S &l …
-
-
GoogleスプレッドシートからTreasureDataへデータを取り込む
AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …
-
-
【クラウド初心者向け】Google Cloud Platform(GCP)でWebサイトを公開してみよう!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 背景 わたくしは最近プライベートで開発したWebサービスをインターネット上に公開しまし …
-
-
ECMAScript6を使ってみた ~「Promise」編
ECMAScript6とは 一応ちょっとだけ説明しておくと、 ECMAScript(エクマスクリプト)は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。(以下、ES6と呼びます) ES6ではcon …
- PREV
- AWSのcredentialsを注意して取り扱う話
- NEXT
- AWS KMSを使って秘密鍵を管理する