IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

omniauth-facebook を使ってみる

はじめに

ここでは以下の動画を参考にして、omniauth-facebook を使ってみることにする。なお、ソースコードGitHub で公開されている。

 

使ってみる

ざっくりとアプリを作成する。

 

gem をインストールする。

  • echo "" >> Gemfile
  • echo "gem 'devise'" >> Gemfile
  • echo "gem 'omniauth-facebook'" >> Gemfile
  • bundle

 

初期設定をする。

 

Facebook for Developers アカウントを作成する

f:id:matt-note:20190228124733p:plain

f:id:matt-note:20190228124854p:plain

 

f:id:matt-note:20190228132001p:plain

f:id:matt-note:20190228132121p:plain

f:id:matt-note:20190228134044p:plain

-> 「設定」→「ベーシック」から、アプリID と app secret の値を確認できる。

コーデイングする

User モデルに属性を追加する。

  • bin/rails g migration AddOmniauthToUsers provider:string uid:string name:string image:text
  • bin/rails db:migrate

 

config/initializer/devise.rb に、アプリID と app secret の設定を入力する。


app/models/users.rb に、omniauth の設定を追加する。

 

facebook でログインボタンを作成する。

 

f:id:matt-note:20190228141157p:plain

-> ユーザーがログイン(Facebook への OAuth リクエスト)する時に、user_facebook_omniauth_authorize_path を使用する(認証)。認証後、user_facebook_omniauth_callback_path を使用する。

 

Facebook からデータを受け取る機能を作成する。

 

サーバーを起動して、アクセスしてみる。

f:id:matt-note:20190228151049p:plain

f:id:matt-note:20190228151200p:plain

f:id:matt-note:20190228151105p:plain

-> current_user メソッドが返す User オブジェクトからデータにアクセスすることができる。

 

f:id:matt-note:20190228152059p:plain

f:id:matt-note:20190228152206p:plain

-> このようにして、ユーザーの名前や画像にアクセスすることができる。

 

その他

request.env["omniauth.auth"] の値を出力してみる

f:id:matt-note:20190228153630p:plain

f:id:matt-note:20190228154001p:plain

-> request.env["omniauth.auth"] の戻り値は OmniAuth::AuthHash オブジェクトとして、Rails アプリ内で処理できるようになっている。

 

AuthHash の説明は、ドキュメントを参照する。

 

日本語でデータを取得してみる

作成したユーザーデータを削除しておく。

  • rails c
  • User.first.destroy!

 

config/initializers/devise.rb に locale: 'ja_JP' オプションを追加する。

f:id:matt-note:20190228202948p:plain

 

サーバーを再起動して、アクセスしてみる。

f:id:matt-note:20190228210419p:plain

-> 日本語名を取得して表示することができる。

 

location を取得してみる

作成したデータを削除しておく。

  • rails c
  • User.first.destroy!

 

User モデルに location を追加する。

  • bin/rails g migration AddLocationToUsers location
  • bin/rails db:migrate

 

もう一度、新しいアプリIDを作成する。

f:id:matt-note:20190228204945p:plain

 

config/initializers/devise.rb を修正する。scope に user_location を追加して、 info_fields に location を追加する。また、新しいアプリID と app secret も入力しておく。

f:id:matt-note:20190228205438p:plain


その他、モデルとビューを修正する。

f:id:matt-note:20190228205259p:plain

f:id:matt-note:20190228205308p:plain

サーバーを再起動して、アクセスしてみる。

f:id:matt-note:20190228210534p:plain

-> 日本語でロケーションを取得することができた。

 

API のバージョンを変更してみる

ユーザーを削除しておく。

  • rails c
  • User.first.destroy!

 

config/initializers/devise.rbを修正する。ここでは v3.2 を使用してみる。

f:id:matt-note:20190228213154p:plain

f:id:matt-note:20190228213428p:plain

->  API のバージョンを変更して、実行することができた。

 

remember_me 機能を追加してみる

app/controllers/users/omniauth_callbacks_controller.rb に以下のコードを追加する。

f:id:matt-note:20190406011710p:plain

 

これでログインすると、users テーブルの remember_created_at カラムの値を UPDATE する処理が実行される。

f:id:matt-note:20190406011854p:plain

 

これでブラウザを閉じてからアクセスしてもログイン状態が持続することになる。【参考:RailsでFacebook認証する(Devise + OmniAuth) - Qiita

 

ユーザーのリンクを取得してみる

config/initializer/devise.rb で scope に user_link を追加して、info_fields に link を追加する。

f:id:matt-note:20190419001931p:plain

 

User モデルに facebook_link を追加する。

 

app/models/user.rb で設定を追加する。

f:id:matt-note:20190419002614p:plain

 

サーバーを再起動して、Facebookログインボタンを押すと、Facebook のリンクを取得できる。

 

コンソールで確認してみる。

f:id:matt-note:20190419003048p:plain

f:id:matt-note:20190419003155p:plain

-> User のリンクを取得できた。