rails devise OmniAuth facebook gmail 登入註冊 login 安全性

Facebook端開啟帳號+設定

登入developer facebook 網站

https://developers.facebook.com/

右上角。我的應用程式>+建立應用程式

建立新的應用程式編號

開始將 Facebook 整合到你的應用程式或網站

輸入兩個資料1.app名稱2.聯絡email>按下建立應用程式編號

選擇facebook login
Facebook 登入

左上角應用程式點開。選擇<建立測試應用程式>
點開後会遇到機器人測試，成功之後看到你正在編輯XXX的測試版本

點選左邊設定>基本資料
設定應用程式網域。localhost:3000(開發的網域)

按下右下角儲存變更

我們最後會拿到這兩串文字
"APP_ID", "APP_SECRET"

rails端devise OmniAuth設定

配合官方文檔使用

https://github.com/heartcombo/devise/wiki/OmniAuth:-Overview

crtlp>gemfile
加上
...
gem 'devise'
gem 'omniauth-facebook'
...

既然更動了gemfile,那就需要安裝 bundle install

創造migration檔案（文檔的原文）
＄ rails g migration AddOmniauthToUsers provider:string uid:string
也可以一起幹後面的事情
＄ rails g migration AddOmniauthToUsers provider:string uid:text name avatar

加入下面兩行
..原本的兩行..

add_column :users , :provider, :string #可以抓到提供者為誰？gmail,facebook,twitter?
add_column :users , :uid, :string #可以抓到user_id>建議更改為text,因為可能會很長
add_column :users , :name, :string  #可以獲取使用者的名字
add_column :users , :avatar, :string #可以獲取使用者的大頭貼
搞好要增加的欄位之後就rails db:migrate
＄ rake db:migrate

宣告資料提供者 declare the provider

ctrlp>config/initializers/devise.rb
config.omniauth :facebook, "APP_ID", "APP_SECRET" #(填入剛剛申請的app的id跟secrect)

make your model omniauthable
ctrlp>app/models/user.rb
的devise底下的最後面增加後面的文字（記得後面要加逗點）
:omniauthable, omniauth_providers: %i[facebook]


在登入畫面放link_helper
<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path %>
但是沒有route，也沒有controller。後面一起做

創route
ctrlp>route
+ devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }
當使用者打到這個 omniauth_callbacks 的時候，我們會希望使用 users/omniauth_callbakcs去處里

創造controller
touch 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

  def failure
    redirect_to root_path
  end
end

implement the from_omniauth method in our model 
ctrlp>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
    # If you are using confirmable and the provider(s) you use validate emails, 
    # uncomment the line below to skip the confirmation emails.
    # user.skip_confirmation!
  end
end

！！與git配合的安全性
app_secret沒有設定的話，會被放在git裡面上傳出去，別人拿去用會引發很大的事情。但是假如整個放在.gitignore裡面，又很麻煩。所以可以把認證資料做引用。
如何引用呢？
創造config檔案
touch config/fb.yml
yml是rails裡面用來做設定檔的東西。可以引用。
development:
    app_id: OOOOOOO
    secrect: XXXXXXX

在devise.rb修改
＋ fb_config = Rails.application.config_for(:fb)
- config.omniauth :facebook, "APP_ID OOOOOOO", "APP_SECRET XXXXXXX"
+ config.omniauth :facebook, "fb_config[:app_id]", "fb_config[:secrect]" ＃讓他可以引用

在.gitignore裡面增加
/config/fb.yml
讓git不要上傳fb.yml裡面的敏感資料

ch02_Rails_gem_devise_使用者驗證/安裝(2)

加在某某的controller下面的before_action,限制登入的使用者才能夠操作

若是before_action比較複雜，也可以抽出來做一個function放在private隱私下面，以免創造了被url叫出來弄錯。

before_action :authenticate_user! ,except: [:index,:show]
before_action :authenticate_user! ,only: [:new,:create]
before_action :find_group_and_check_permission ,except: [:index}
private
  def find_group_and_check_permission
    @group = Group.find(params[:id])

    if current_user != @group.user
      redirect_to root_path, alert: "You have no permission."
    end
  end

ch02_Rails gem devise安裝 使用者/登入(1)

安裝devise gem

ctrl-p>Gemfile
gem'devise'

bundle install

terminal
/bundle install

安裝devise使用User

rails generate devise:install

確定有設定root首頁first page

2. Ensure you have defined root_url to *something* in your config/routes.rb.

在routes裡面加進下面的文字
 For example:
root to: “home#index”

當登入或是發生錯誤要顯示彈跳視窗給使用者可以使用這組設定加到layout

3. Ensure you have flash messages in app/views/layouts/application.html.erb.
 For example:
<p class=”notice”><%= notice %></p>
<p class=”alert”><%= alert %></p>

讓Table的名稱叫做User

rails generate devise User

刷新資料庫結構

rails  db:migrate

使用者登入

http://localhost:3000/users/sign_in

帶判斷的devise登入登出功能

ctrl-p>application.html.erb

  <% if current_user %>
    <%=current_user.email%> |
    <%= link_to('登出', destroy_user_session_path, :method => :delete) %> |
    <%= link_to('修改密碼', edit_registration_path(:user)) %>
  <% else %>
    <%= link_to('註冊', new_registration_path(:user)) %> |
    <%= link_to('登入', new_session_path(:user)) %>
  <% end %>

加上自訂欄位到 Devise 的註冊和編輯頁面

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

跟增加欄位一樣，只是是加進users裡面的欄位，但是會影響的層面有很多歐，以下這三動了一個都會很慘歐。

增加欄位

rails g migration add_nickname_to_users nickname:string >注意為users，複數

rails db:migrate

注意要補上permitted_parameters方法

ctrl-p>application_controller.rb>

  class ApplicationController < ActionController::Base
    before_action :configure_permitted_parameters, if: :devise_controller?

    # ...

    protected

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
      devise_parameter_sanitizer.permit(:account_update, keys: [:nickname])
    end
  end

創devise的view

$ rails generate devise:views

編輯views/devise/registrations/edit.html.erb和views/devise/registrations/new.html.erb，加上username欄位

  <div><%= f.label :nickname %><br />

  <%= f.text_field :nickname %></div>