初心者がRailsで開発 – deviseでユーザー認証設定 -

2017/03/15 - プログラミング手法, プログラム言語, 開発ツール devise, Rails, Ruby, 開発

こんにちは、2年目のYukaです。

開発部所属でありながら実は、、

実際に自分で手を動かして開発する機会がなかなかありませんでした。。

しかしついに、、、

開発初心者がRailsでWebアプリの開発に挑戦します！！

今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるように

”devise + omniauth-google-oauth2の組み合わせでログイン画面を作成すること”

っです！

まずはdeviseのインストールからやってみます。

◇Gemfileにdevise用のgem追記し保存

vi Gemfile
gem 'devise'
gem 'omniauth'
gem 'omniauth-google-oauth2'

vi Gemfile

gem 'devise'

gem 'omniauth'

gem 'omniauth-google-oauth2'

◇ターミナルにてdeviseインストール

bundle install
rails g devise:install
rails g devise user

bundle install

rails g devise:install

rails g devise user

◇データベースに必要なカラムの追加

rails g migration add_omniauth_to_users

1	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

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

◇: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

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

◇ログイン設定したいHTMLにリンクを設定する

<%= link_to 'Googleでログインする！！', user_omniauth_authorize_path(:google_oauth2) %>

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に下記追加

http://localhost:8081/users/auth/google_oauth2/callback

1	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を記載する

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

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",
}

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

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

◇rails serverを起動

今回はポートを8081に指定して起動する
rails s -p 8081

◇ブラウザで対象のページを確認

http://localhost:8081/home/index

Googleのログインページにリダイレクトされる

Googleアカウントでログインしてみる。

デフォルトのviewファイルが呼ばれている！！

カスタマイズしたい。。。。

その場合は、

◇デフォルトのviewをusers配下にコピーする

bundle exec rails generate devise:views users

1	bundle exec rails generate devise:views users

これで対象のファイルを変更することが可能です！

以上でdeviseを用いてGoogleアカウントでのユーザー認証が可能となります。

参考URL

https://github.com/plataformatec/devise

http://www.ohmyenter.com/rails-4-1-devise-omniauth-google-oauth2-%E3%81%A7%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B/

: クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。そこで問題になるのが、障害などによる深夜対応・・・。データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に電話連絡をもらっていたのですが、クラウド環境では …

: ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要こんにちは、システム開発部の中村です。今回は、Facebook Messenger APIを利用して、画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。尚、ディープラーニングやTensorFlowそのものの解説というより、「エンジンとしてディープ …

: 【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる（Mac）

こんにちは。新卒1年目のmatsuariです。前回はRubyとは何か、簡単にご紹介をしましたが、今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。はじめに、Rubyのプログラムを書くためのファイルを …

: 【小ネタ】JSで要素の組み合わせを列挙する

下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …

: 【HTML5】4ツール出力ファイルサイズ比較

こんにちは、近江です。前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。何故ファイルサイズの比較をするかと言 …

: Vagrantの機能を使って開発環境の効率をあげてみた。

プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。保守の仕事に関わると、ユーザからのお問い合わせだったり、監視アラートによる検知からシステムを調査することがあります。ログとソースコードを見て、不具合を特定し改修する。すぐできればカッコいいですが、「本番環境に反映して別のエ …

: gulp.jsで広告タグの開発環境を整える

SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …

: Angular.jsのvalueとfactoryの違いを考える

次のようなHTMLがあったとする。 valueとfactoryの違いを考える valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplus …

: iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。今回 …

: 【小ネタ】タスク管理ツール移行: Trello から Asana

プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello（トレロ）です。プロジェクト > タスクグループ > タスク …

PREV: AWSのcredentialsを注意して取り扱う話
NEXT: AWS KMSを使って秘密鍵を管理する

Tom-N@ck	etrojan	skryo
taisuke-oomi	ryo	matsuari
忍ゑ	takusan	kazrin3
sae	jotaka	Rhiannon
tomoaki-ueda	yosuke-fukumoto	KTBT
hama	Mike	ダーハラ
yuka	yamaken	k-hal
kumata	SHIN-ICHI	鈴幸
shingo-tateishi	T氏	gicogico
pi★shi	OKAMOTO, Nau	shunpei-ishida
たにぐち	ウッディー	waku
matsudasyo	kaho-ikeda	Oyaman
Kiyoshi Ohno	aki	クラヴマガ