Login dengan Omniauth pada Rails Part 1 (Facebook)

Sebelumnya kita pernah membahas apa itu User Authentication, bila Anda ketinggalan artikelnya, bisa klik link ini http://www.belajarrubyonrails.com/2015/06/apa-itu-user-authentication.html untuk mendapat pengertian dan penjelasannya. Kali ini kita akan mencoba menerapkannya di dalam sebuah aplikasi Ruby on Rails.

Kita akan mencoba memanfaatkan gem Omniauth dan account facebook. Secara singkat langkah-langkah yang harus kita lakukan adalah:

1. Buat sebuah aplikasi di facebook developer  dan buat sebuah aplikasi baru Ruby on Rails
2. Masukan Gem Omniauth dan Gem Omniauth-Facebook
3. Buat sebuah model User
4. Buat Sessions Controller
5. Membuat Omniauth initializer
6. Menghubungkan login user dengan facebook.

  

Oke, pertama kita harus membuat dahulu sebuah aplikasi di facebook developer. Lalu bila sudah, kita catat dulu app_id dan app_secret-nya. Kemudian kita lanjutkan dengan membuat sebuah aplikasi sederhana Ruby on Rails. Jangan lupa untuk memasukan gem omniauth di dalam Gemfile:

gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'

Jalankan bundle install.

Selanjutnya kita buat dulu halaman root untuk aplikasi baru kita. Seperti biasa kita akan menggunakan controller home dan action index sebagai root aplikasi. Kita buat secara sederhana saja.

home_controller.rb :

class HomeController < ApplicationController
  def index    
  end
end

app/views/home/index.html.erb:

<%if current_user %>
  Congratulation, you login with facebook
<%else%>
  <%= link_to "Login with facebook", "auth/facebook"%>
<%end%>  

Membuat Model User

Sekarang kita akan membuat model User

rails g model User provider uid name oauth_token
oauth_expires_at:datetime

keterangannya adalah:

• uid : untuk menyimpan id dari facebook
• name: menyimpan nama user yang diambil dari facebook
• oauth_token: token yang diberikan facebook
• oauth_expires_at: untuk mengetahui masa berlaku token.

Jalankan rake db:migrate untuk membuat tabel users di database. Kemudian kita isi model User tadi dengan beberapa logic code agar bisa menampung data dari facebook dan diisikan ke dalam database kita.

model user.rb

class User < ActiveRecord::Base
  def self.from_omniauth(auth)
    where(provider: auth.provider
      , uid: auth.uid).first_or_initialize.tap do |user|
      user.provider = auth.provider
      user.uid = auth.uid
      user.name = auth.info.name
      user.oauth_token = auth.credentials.token
   user.oauth_expires_at = Time.at(auth.credentials.expires_at)
      user.save!
    end
  end
end

Lalu sekarang kita akan mengisi application_controller.rb dengan logic code, agar bisa menyimpan session current_user.

application_controller.rb :

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  private
  def current_user   
    if session[:user_id]
      @current_user ||= User.find(session[:user_id])
    end
  end
  helper_method :current_user
end

Membuat Session Controller

Session controller dibuat agar nantinya aplikasi kita bisa menerima callback dari auth facebook, yang kemudian memprosesnya agar bisa menjadi login user di aplikasi  kita.

sessions_controller.rb :

class SessionsController < ApplicationController
  def create
    user = User.from_omniauth(env["omniauth.auth"])
    session[:user_id] = user.id
    redirect_to root_url
  end

  def destroy
    session[:user_id] = nil
    redirect_to root_url
  end
end

Owh iya, tadi untuk halaman home, kita belum mendaftarkannya di routes.rb, oleh karena itu kita daftarkan dulu sekaligus kita daftarkan path-path yang dibutuhkan agar aplikasi kita bisa berjalan.

yang perlu kita daftarkan di config/routes.rb :

root 'home#index'
match 'auth/:provider/callback', to: 'sessions#create', via: [:get, :post]
match 'auth/failure', to: redirect('/'), via: [:get, :post]
match 'signout', to: 'sessions#destroy', as: 'signout', via: [:get, :post] 

Membuat Omniauth initializer
Kali ini kita akan memanfaatkan gem yang sudah kita instal tadi dengan membuat initializer-nya.
Buat sebuah file omniauth.rb di dalam path config/initializers

isi dari config/initializers/omniauth.rb adalah:

OmniAuth.config.logger = Rails.logger

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, 
  'YOUR APP_ID', 
  'YOUR APP_SECRET'
end

 keterangan: 
'YOUR APP_ID'   => Di isi dengan app_id yang kita dapat dari aplikasi facebook tadi.
'YOUR APP_SECRET' => Di isi dengan app_secret_code.
bila masih bingung letaknya, ada di halaman apps, lalu pilih setting :

Kemudian kita akan membuat sebuah file coffescript yang bernama facebook.js.coffescript yang akan membantu kita dalam memunculkan authentikasi pada account facebook. Letakan file facebook.js.coffescript di dalam path app/assets/javascripts .
Isi dari  app/assets/javascripts/facebook.js.coffescript:

jQuery ->
  $('body').prepend('<div id="fb-root"></div>')

  $.ajax
    url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
    dataType: 'script'
    cache: true


window.fbAsyncInit = ->
  FB.init(appId: 'YOUR APP_ID', cookie: true)

  $('#sign_in').click (e) ->
    e.preventDefault()
    FB.login (response) ->
      window.location = '/auth/facebook/callback' if response.authResponse

  $('#sign_out').click (e) ->
    FB.getLoginStatus (response) ->
      FB.logout() if response.authResponse
    true

Nah kita kembali harus memasukan app_id dari aplikasi facebook kita tadi ke dalam code coffescript.

Menghubungkan User dengan Login Facebook

Untuk langkah terakhirnya, kita cukup menampilkan Nama user yang login dari facebook di halaman index atau di layout. Kali ini saya akan mencotohkan bila ditulis di dalam layout.

Di file app/views/layouts.application.html.erb tambahka kode:

<% if current_user %>
   Welcome <strong><%= current_user.name %></strong>!
   <%= link_to "Sign out", signout_path, id: "sign_out" %>
<% end %>

sebelum <%= yield %>

Dan selesailah percobaan kita. Bila tidak ada kesalahan seharusnya hasilnya kurang lebih seperti ini:
1. Saat pertama masuk ke halaman home

2. Saat mekalukan authentikasi facebook

3. Selesai, selamat Anda telah sukses login dengan facebook, EUREKAAAA !!!

Yup, dari tutorial sederhana ini kita bisa mengembangkannya menjadi lebih bermacam-macam sesuai kebutuhan.
Demikian belajar bareng kali ini, semoga bisa bermanfaat buat kita semua, Happy Coding (^.^)

Sumber:
- Authentication with Facebook and OmniAuth.
- Rails and OmniAuth
- Rails 4.1.5 omniauth strong parameters