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

: 意外と知らないかも？ Chrome DevTools の機能10選

みんな使っている Chrome DevTools。 Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。ここでは、その中か …

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

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

: プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、今回は業務とは全く関係ないプログラミングをやってみました。全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。初心者の目線から作成方法をつらつ …

: Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発・保守を担当しています。エンジニアの皆さん、デザインってどうしてます？わたくしはプライベートでとあるW …

: Qiita Team API と Google Spread Sheet でチーム日報を生成する

チーム日報を活用する MarketOne 開発チームでは複数拠点に分かれての開発を行っています。リモート開発が中心となると口頭でのコミュニケーションに限界があるため、テキストベースのコミュニケーションの比重が高い状態にあります。チケットシステムやソースコード管理ツール上の議論はもちろんおこなってい …

: TypeScriptについてまとめてみた

はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何？ TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …

: Polymer core-ajax の使い方

Polymerのcore-ajaxの使い方。まずは、index.html [code language=”html” title=”index.html”] <!doctype html> <html> <head&gt …

: Railsたった14行でアドサーバーAPIができた話

こんにちは。駆け出しエンジニアの近江です。最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …

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

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

: modern.IEを使ってMac上でWindows10を動かす

Microsoftが提供している modern.IE というプロジェクトがある。そこで提供されている仮想環境を使って、MacにWindows10をインストールしてみる。ちなみに、このプロジェクトの本来の目的はInternet Explorerの表示確認やデバッグの支援。 VirtualBoxの準備 …

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