[Ruby On Rails] Sign In using Google and Facebook account

Untuk memudahkan proses sign in pada aplikasi yang dikembangkan, kita dapat menambahkan google atau facebook login dimana pengguna cukup menekan satu tombol saja. Beberapa gem yang dapat digunakan untuk proses ini adalah gem omniauth yang dibantu dengan gem devise, omniauth-google-oauth2, dan omniauth-facebook.  Bagaimana cara membuat fitur signin dengan facebook dan google? berikut langkah-langkahnya:

• Pertama-tama tambahkan gem yang dibutuhkan ke dalam aplikasi kita dengan menambahkan code berikut pada gemfile:

gem 'devise'
gem 'omniauth'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'

• Jalankan “bundle install” pada command.
• Lakukan installasi dan konfigurasi gem devise pada aplikasi (proses ini sudah dijelaskan pada tautan berikut), jalankan perintah berikut pada terminal :

rails generate devise:install

•  Pada file “config/environments/development.rb” tambahkan konfigurasi seperti berikut :

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

Sesuaikan host dan port pada aplikasi anda.

• Jalankan perintah “rails generate devise MODEL” (rubah MODEL sesuai dengan nama model yang terhubung dengan tabel autentifikasi, misal tabel user, admin, dll). Perintah ini akan menambahkan sebuah file migrate dan memodifikasi file model yang dituju, serta memodifikasi routes aplikasi. File migrate yang telah dibuat oleh perintah sebelumnya akan menambahkan beberapa field yang dibutuhkan oleh devise, pastikan anda menjalankan “rails db:migrate” untuk melakukan perubahan sesuai dengan data migrasi.

Catatan: pastikan table pada model devise anda sudah ada field “id” sebagai primary key dan field “name” yang akan digunakan pada proses autentikasi

Gem tidak tersimpan di dalam aplikasi sehingga kita tidak dapat memodifikasinya, tetapi devise menyediakan banyak fitur yang memudahkan kita untuk memodifikasi code bawaan devise. Code yang cukup sering dimodifikasi untuk keperluan requirement aplikasi adalah code controller dan view dari devise. Untuk memodifikasi “view” devise, jalankan perintah berikut pada terminal:

$ rails generate devise:views

Perintah di atas akan men-generate sebuah folder “devise” pada direktori view. Tampilan devise dapat diatur dengan memodifikasi code di dalam direktori ini.

Sedangkan untuk memodifikasi code bawaan pada controller devise, harus di generate controller devise dengan perintah:

$ rails generate devise:controllers [scope]

Perintah di atas akan menambahkan controller khusus untuk devise. Ganti code “[scope]” dengan nama folder yang diinginkan akan di generate pada controller.

• Setelah melakukan konfigurasi untuk menggunakan devise, kita dapat menggunakan beberapa fungsi yang dimiliki devise. Salah satu fungsi yang akan digunakan adalah fungsi untuk membatasi agar suatu controller hanya dapat diakses oleh user yang telah melakukan sign in. Untuk menerapkan fitur tersebut, letakkan code berikut pada controller yang mewajibkan proses sign in:

class MainController < ApplicationController
    before_action :authenticate_user!

    def index
    end
end

Code pada baris kedua mewajibkan semua action pada MainController hanya dapat diakses pengguna yang telah melakukan proses sign in. Fungsi ini secara otomatis akan mengarahkan pengguna yang belum melakukan proses sign in ke halaman sign in.

• Untuk memperindah tampilan URL, perbaharui file routes.rb menjadi seperti berikut:

Rails.application.routes.draw do
  devise_for :users, 
      controllers: { omniauth_callbacks: 'omniauth_callbacks' },
      path: '', path_names: { sign_in: 'login', sign_out: 'logout', sign_up: 'register', edit: 'settings' }
  root 'main#index'
end

Selain memperindah routes dari devise, kode di atas juga mendefinisikan controller untuk proses dari omniauth. Pastikan juga routes anda memiliki route untuk halaman utama (root) dan restart server.

Tambahkan file omniauth_callbacks_controller.rb pada direktori controller. Masukkan code berikut:

class OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def google_oauth2
      # 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?
        flash[:notice] = I18n.t 'devise.omniauth_callbacks.success', kind: 'Google'
        sign_in_and_redirect @user, event: :authentication
      else
        session['devise.google_data'] = request.env['omniauth.auth'].except(:extra) # Removing extra as it can overflow some session stores
        redirect_to new_user_registration_url, alert: @user.errors.full_messages.join("\n")
      end
  end

  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, alert: @user.errors.full_messages.join("\n")
    end
  end

  def failure
    redirect_to root_path
  end
end

Code di atas akan digunakan untuk menangani hal terkait sign in dengan oauth google atau facebook. Action google_oauth2 dijalankan pada proses sign in dengan google dan action facebook dijalankan pada proses sign in dengan facebook. Pada setiap action akan menjalankan fungsi “from_omniauth” dari model “User”, modifikasi model “User” menjadi seperti berikut:

class User < ApplicationRecord
  devise  :database_authenticatable, :registerable,
          :recoverable, :rememberable, :trackable, :validatable,
          :omniauthable, omniauth_providers: [:google_oauth2,:facebook]
         

  def self.from_omniauth(access_token)
    data = access_token.info
    user = User.where(email: data['email']).first

    unless user
        user = User.create(
          name: data['nama']
          email: data['email'],
          password: Devise.friendly_token[0,20]
        )
    end
    user
  end
end

Fungsi from_omniauth digunakan untuk memproses nilai yang sudah di dapat dari google atau facebook oauth. Proses ini memberikan perintah untuk mengambil nilai pada tabel user yang memiliki email sesuai data kembalian dari oauth API. Jika data dengan email tersebut tidak ditemukan, program akan secara otomatis membuat data user baru dengan nama, email dan password sesuai data kembalian dari oauth API.

Pada direktori “config/initializers/devise.rb” tambahkan code berikut :

config.omniauth :google_oauth2, 'YOUR_GOOGLE_CLIENT_ID', 'YOUR_GOOGLE_CLIENT_SECRET', {}
config.omniauth :facebook, "YOUR_APP_ID", "YOUR_APP_SECRET", callback_url: "http://localhost:3000/auth/facebook/callback"

Bagi anda yang belum memiliki code untuk google dan facebook, berikut panduan untuk mendapatkannya:

Untuk Google:

1. Masuk ke alamat https://console.developers.google.com/
2. Pilih atau buat project baru
3. Pada tab “Dashboard” pilih “Enable API” dan aktifkan “Contacts API” dan “Google+ API”
4. Masuk ke tab “Credentials” dan dapatkan code anda

Untuk Facebook silahkan baca dokumentasinya pada alamat http://developers.facebook.com/docs/authentication

Setelah menambahkan konfigurasi diatas, tambahkan tautan untuk mengakses login dengan facebook dan google. Berikut contoh code tautannya:

<%= link_to raw(" Sign in with Google"), user_google_oauth2_omniauth_authorize_path, 
    class:"btn" %>

<%= link_to raw(" Sign in with Facebook"), user_facebook_omniauth_authorize_path, 
    class:"btn" %>

Code tersebut dapat anda sisipkan misalnya pada halaman login di direktori “views/devise/sessions/new.html.erb”

Proses konfigurasi selesai, silahkan jalankan program anda..

Happy coding 🙂