初心者が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

関連記事
-
-
【小ネタ】JSで要素の組み合わせを列挙する
下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …
-
-
ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築
概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …
-
-
MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか? わた …
-
-
読み方がわからない技術用語 2015
英語圏での読み方を基本的には参考にしています。英語圏でも複数の読み方をしているケースもあるようなので、あくまでも参考程度。2015と書きながら、古い言葉も混じってますが。 async – えーしんく Alt – おると ASUS – えいすーす bower  …
-
-
iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。
はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …
-
-
【未経験からのRuby on Rails – 第3回】変数と定数
こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …
-
-
Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発・保守を担当しています。 エンジニアの皆さん、デザインってどうしてます? わたくしはプライベートでとあるW …
-
-
【小ネタ】タスク管理ツール移行: Trello から Asana
プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、 タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello(トレロ)です。 プロジェクト > タスクグループ > タスク …
-
-
Vagrantの機能を使って開発環境の効率をあげてみた。
プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。 保守の仕事に関わると、 ユーザからのお問い合わせだったり、監視アラートによる検知から システムを調査することがあります。 ログとソースコードを見て、不具合を特定し改修する。 すぐできればカッコいいですが、 「本番環境に反映して別のエ …
-
-
SDKってどうやって作ってるの?【Android編】
こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …
- PREV
- AWSのcredentialsを注意して取り扱う話
- NEXT
- AWS KMSを使って秘密鍵を管理する