初心者が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の基本的な使い方については下 …

いまさらですが… GNU screen チートシート

最近はローカル環境で開発するようになってきたので、screen コマンドを使う機会も少なくなって来たような気がします。で、使ってないと忘れてしまうので、チートシートを作ってみました。 参照サイト GNU screen [quick_reference] 起動 コマンド 動作 screen -S &l …

TypeScriptについてまとめてみた

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

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

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

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

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

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

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

クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。 弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。 そこで問題になるのが、障害などによる深夜対応・・・。 データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に 電話連絡をもらっていたのですが、クラウド環境では …

GoogleスプレッドシートからTreasureDataへデータを取り込む

AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …

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

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

Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する

はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …