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


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

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

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

しかしついに、、、

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

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




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



っです!

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

Gemfileにdevise用のgem追記し保存

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

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

:omniauthableを追記しOmniAuthを有効にし、self.find_for_google_oauth2 メソッドを追加

/app/models/user.rb

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

Google側での設定

https://console.developers.google.com/project

上記URLにログインする

Client IDの取得

1. 新規プロジェクトの作成

2. Google Apps API、Contacts APIを有効にする

Google_console_library

3. 認証情報を作成、OAuthクライアントIDを選択

4. アプリケーションの種類、ウェブアプリケーションを選択

5. 承認済みのリダイレクト URIに下記追加

Google_console_authinfo

Client IDとClient secretを追記する

config/secrets.yml

config/initializers/devise.rb

 

ルートにもdevise用に定義

config/routes.rb

コールバックで呼び出されるコントローラーの定義

app/controllers/配下にusersディレクトリを作成

app/controllers/users/omniauth_callbacks_controller.rb

rails serverを起動

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

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

http://localhost:8081/home/index

 

view:home:index.erb

 

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

 

Google_auth

 

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

devise_signin

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

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

その場合は、

デフォルトのviewを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/


DACエンジニア採用情報

  関連記事

【未経験からの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 …

no image
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 …