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

: ECMAScript6を使ってみた～「Promise」編

ECMAScript6とは一応ちょっとだけ説明しておくと、 ECMAScript（エクマスクリプト）は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。（以下、ES6と呼びます） ES6ではcon …

: Charlesを使ってスマホアプリ(iOS)のUAを調べてみた

はじめにここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …

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

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

: AWSにRailsアプリをデプロイする(準備編)

今回は、せっかくRailsで開発したアプリをAWS上に公開してみたいのでその構築方法をまとめていきたいと思います。 (前回の記事：初心者がRailsで開発 – deviseでユーザー認証設定 ) AWSの設定はすでに社内で使用できるようになっていたので割愛します。 ★やりたいこと Gitlabでコ …

: x-callback-urlを使ってみた

x-callback-urlとは？ iOSのアプリ間連携の仕様の一つみたいです。簡単に言うと、ディープリンクを行うためにカスタムURLスキームを利用するが、アプリ毎にバラバラな規則でURLスキームを設定するとアプリ間連携をスムーズに行うことができないため、どのような規則でURLスキームを設定するかを …

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

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

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

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

: kubernetes の全ノード上で同じコンテナを動かす

今回は、kubernetes上で同一コンテナを全ノードで動かす方法を紹介したいと思います。kubernetes自体の起動方法はここでは割愛します。はじめに以前、CoreOSのFleet上でmackerel-agentを動かすということを行いました。今回は、kubernetes上で同じようにクラス …

: fastavroとjqでAVRO形式のファイルからデータを取得しよう

AVRO形式のファイルを取り扱いたい AVROとはApacheプロジェクトのひとつとして開発されているデータ交換形式です。　コンパクトなバイナリで高速なシリアライズ・デシリアライズが行えるため、サーバーログなどに利用されています。弊社内での一部システムのログデータにも利用されているのですが、専用の …

: ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめにこんにちは。システム開発部の中村です。機械学習についての理解を促進するため、データから分類モデルを自動で構築する古典的な方法である、ナイーブベイズ分類器を実装してみました。最近はCloudVisionAPIなど専ら画像解析が流行っていますが、自分のような初学者には敷居が高そうだっ …

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