[RoR] FB會員登入APP -- YTChen

Step1: 裝載模板
cp -r rails_app/ YTChen 
bundle install
Step2: Devise 使用初步設定
用 devise 串接 facebook 登入
寄信參考資料
去Gemfile裡面找個空位加上
gem 'devise'
然後
bundle install
然後產生 devise 的設定檔
rails generate devise:install
Step3:  產生一個devise的MODEL 叫做 User
  • rails generate devise User
如果上面用的 MODEL 的名字是 User，那之後就會有以下好用的方法：
user_signed_in?   詢問是否已登入
current_user   取得目前登入的使用者
這些都是使用 devise 這個 gem 送的
做完這步驟後要 
  • rake db:migrate
因為這個指令他會幫忙做一個migration
Step4: 建一個首頁
  • rails generate controller welcome
去app/views/welcome資料夾下面建一個 index.html.erb檔
接著去
config/routes.rb裡面把首頁指到welcome/底下的index
加入這一行即可
root 'welcome#index'
撰寫剛剛的 index.html.erb 檔案內容
  • <% if user_signed_in? %>
  •   <h1> <%= current_user.email %>，你好 </h1>
  •   <%= link_to '登出', destroy_user_session_path, method: :delete %>
  • <% else %>
  •   <%= link_to '註冊', new_user_registration_path %>
  •   <%= link_to '登入', new_user_session_path %>
  • <% end %>

User會員登入做完了
接著做網站後台
Step5: 網站後台
首先先產生一個admin的controller：
  • rails g controller admin/dashboard
接著在views/admin/dashboard/ 新增一個  index.html.erb
加入產品products  
  • rails g scaffold admin/products name price:integer publish_date:date
  • rake db:migrate
再去指令路徑 config/routes.rb 裡面加入
  • namespace :admin do
  •     root 'dashboard#index'
  •     resources :products
  • end
[筆記]導入bootstrap
使用方法看這篇
Gemfile裡面加上這個
  • gem 'bootstrap-sass'
然後做
  • bundle install
接著去app/assets/stylesheets/application.scss 裡面
加入兩行程式
  • @import "bootstrap-sprockets";
  • @import "bootstrap";
到 app/assets/javascripts/application.js 裡面
加上這兩行
  • //= require jquery
  • //= require bootstrap-sprockets
到這一步驟就可以使用bootstrap了
實驗看看去剛剛的
app/views/admin/products/index.html.erb裡面
<table>加上一個class成這樣<table class="table">
 目前可以看到的畫面長這樣： 
加一個門神來檢查有沒有登入
  • 登入檢查
  • before_action :authenticate_user!
這行程式碼把它貼到
app/controller/admin/products_controller.rb
以及
app/controller/admin/dashboard_controller.rb
Step6: FB登入
用 devise 串接 facebook 登入參考資料
  • step 6-0: 
facebook 會有 user name 跟 user image欄位
所以我們可以先把User 除了email跟password之外再另建name跟image這兩個欄位
先使用 rails g migration Useru
產生一個migration檔案(檔案名稱不要跟user撞到所以我叫它 Useru)
然後去 db/migrate/ 找到migration檔案並且修它
加上 add_column :users(devise產生的model名稱), :想要的欄位 , 資料型態 
做完後 rake db:migrate
  • step 6-1:
Gemfile 裡面加入
  • gem 'omniauth-facebook'
然後 bundle install
  • step 6-2:
  • rails g migration AddColumnsToUsers provider uid
  • rake db:migrate
  • step 6-3:
去 config/initializers/devise.rb:  加上這行
  • config.omniauth :facebook, "APP_ID", "APP_SECRET"
這裏需要我的APP_ID 以及 APP_SECRET
這兩個要去 Facebook developer申請

config.omniauth :facebook 把App ID App Secret 申請後的頁面
按下 Add Platform
點選 Website
去App Details
加入1024 x 1024的 icon

  • step 6-4:
去app/models/user.rb 加入這一行
  • devise :omniauthable, :omniauth_providers => [:facebook]

  • step 6-5:
config/routes.rb裡面加入
  • devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }
這裏要小心 devise_for :users 已經有了！所以要把上面那個舊的刪掉！
才不會在rake db:migrate時候出問題！

  • step 6-6:
先去 app/controllers/建立一個資料夾 users/
去app/controllers/users/裡面建立一個新檔案
檔名叫做 omniauth_callbacks_controller.rb
(add the file "app/controllers/users/omniauth_callbacks_controller.rb")
檔案裡面寫
  • class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  •   def facebook
  •     # You need to implement the method below in your model (e.g. app/models/user.rb)
  •     @user = User.from_omniauth(request.env["omniauth.auth"])

  •     if @user.persisted?
  •       sign_in_and_redirect @user, :event => :authentication #this will throw if @user is not activated
  •       set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
  •     else
  •       session["devise.facebook_data"] = request.env["omniauth.auth"]
  •       redirect_to new_user_registration_url
  •     end
  •   end
  • end

  • step 6-7:
去app/models/user.rb 加上這個
  • def self.from_omniauth(auth)
  •   where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
  •     user.email = auth.info.email
  •     user.password = Devise.friendly_token[0,20]
  •     user.name = auth.info.name   # assuming the user model has a name
  •     user.image = auth.info.image # assuming the user model has an image
  •   end
  • end

測試看看!!
成功！

留言

張貼留言