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

  関連記事

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

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

ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編

前回のおさらいと今回やること 前回(はじめてのアプリ編)では、Angular で簡単なチャットアプリを作るところまでやりました。ディレクトリ構成については説明できていなかったのですが、次のようになっています。(主なディレクトリとファイルのみ抜粋) + dist (ビルド・コンパイル後のファイルのディ …

PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …

MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか? わた …

(社内新卒・PHPビギナー向け)MacでPHP7開発環境を構築しよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 えっ!?新卒のプログラミング研修はPHPで行われるって?!俺の得意言語やないか!! は …

SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

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

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

Burpの使い方!

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

最強のSQLクライアント(GUIツール)「TeamSQL」を使ってみた!

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

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

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