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

: 【未経験からの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を使って秘密鍵を管理する