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

: 【小ネタ】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 &#8 …

: 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を使って秘密鍵を管理する