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

Step1: 裝載模板

git clone https://github.com/kaochenlong/rails_app

cp -r rails_app/ YTChen 

bundle install

Step2: Devise 使用初步設定

使用 devise https://github.com/plataformatec/devise

用 devise 串接 facebook 登入

https://github.com/plataformatec/devise/wiki/OmniAuth%3A-Overview

寄信參考資料

https://ihower.tw/rails4/auth.html

去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

使用方法看這篇

https://github.com/twbs/bootstrap-sass

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 登入參考資料

https://github.com/plataformatec/devise/wiki/OmniAuth%3A-Overview

• 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

測試看看!!

成功！