初心者が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エンジニア採用情報

  関連記事

Burpの使い方!

こんにちは、第二ソリューション開発部の谷口です。 受託開発の部署で開発を担当してます。 APIを扱う機会が多く、今回は通信内容を確認するためのローカルプロキシツール「Burp」について書かせて頂きます。 Burpとは Webアプリケーション開発時の検証において、Webサーバとブラウザ間の通信内容を確 …

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …

no image
AWSにRailsアプリをデプロイする(公開編)

次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるので とりあえずこれを設定していきます。   アプリのsecret_key_baseの設定 [crayon-5fbf2bef53fec802203 …

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

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

【クラウド初心者向け】Google Cloud Platform(GCP)でWebサイトを公開してみよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 背景 わたくしは最近プライベートで開発したWebサービスをインターネット上に公開しまし …

【小ネタ】JSで要素の組み合わせを列挙する

下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …

no image
Polymer core-ajax の使い方

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

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

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

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

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

no image
【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 [code language=”javascript” …