Advertisement
  1. Code
  2. Ruby

Bagaimana Menggunakan OmniAuth-Twitter di Aplikasi Rails

Scroll to top
Read Time: 8 min

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Dalam tutorial Anda akan belajar untuk mengizinkan pengguna aplikasi Anda masuk dengan akun Twitter mereka. Melakukan hal ini telah dimudahkan dengan sarana seperti OAuth.

Anda akan memanfaatkan penggunaan OmniAuth-Twitter, yang mengandung strategi Twitter untuk OmniAuth.

Mari menyelam lebih dalam!

Memulai

Mulailah dengan membuka aplikasi Rails Anda. Dari terminal, jalankan perintah untuk melakukan hal tersebut:

1
rails new Tuts-Social -T 

Buka Gemfile Anda dan masukkan bootstrap gem.

1
#Gemfile
2
...
3
4
gem 'bootstrap-sass'

Pasang gem-nya dengan menjalankan perintah:

1
bundle install

Ubah nama app/assets/stylesheets/application.css menjadi app/assets/stylesheets/application.scs.

Apabila sudah selesai, tambahkan baris kode berikut untuk mengimpor bootstrap.

1
#app/assets/stylesheets/application.scss
2
...
3
@import 'bootstrap-sprockets';
4
@import 'bootstrap';

Buat parsial yang dinamai _navigation.html.erb untuk menangani kode navigasi Anda; parsialnya harus diletakkan di app/views/layouts directory.

Masukkan kode di bawah ini ke dalam suatu IDE. Kodenya menggunakan Bootstrap untuk membuat suatu bilah navigasi untuk aplikasi Anda.

1
#app/views/layouts/_navigation.html.erb
2
3
<nav class="navbar navbar-inverse">
4
  <div class="container">
5
    <div class="navbar-header">
6
      <%= link_to 'Tuts Social', root_path, class: 'navbar-brand' %>
7
    </div>
8
    <div id="navbar">
9
 
10
    <ul class="nav navbar-nav pull-right">
11
      <li><%= link_to 'Home', root_path %></li>
12
  </ul>
13
    </div>
14
  </div>
15
</nav>

Untuk navigasi yang akan digunakan, Anda harus me-render-nya di layout aplikasinya. Tata layout aplikasi Anda supaya terlihat seperti punya saya di bawah ini.

1
#app/views/layouts/application.html.erb
2
3
<!DOCTYPE html>
4
<html>
5
  <head>
6
    <title>Tuts Social</title>
7
    <%= csrf_meta_tags %>
8
9
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
11
  </head>
12
13
  <body>
14
    <%= render "layouts/navigation" %>
15
    <div id="flash">
16
      <% flash.each do |key, value| %>
17
        <div class="flash <%= key %>"><%= value %></div>
18
      <% end %>
19
    </div>
20
    <div class="container-fluid">
21
      <%= yield %>
22
    </div>
23
  </body>
24
</html>

Buat suatu PagesController dengan suatu indeks aksi dengan memasukkan perintah di bawah ini ke dalam terminal Anda.

1
rails generated controller Pages index

Di tampilan indeks yang dihasilkan, sunting supaya terlihat seperti ini.

1
#app/views/pages/index.html.erb 
2
3
<div class="jumbotron">
4
  <h1>Welcome to Tuts Social!</h1>
5
  <p>Thanks for checking us out!</p>
6
</div>

Dalam kode di atas, kita menggunakan kelas yang dinamai jumbotron—ini adalah komponen Bootstrap yang memungkinkan kita memperluas area pandang untuk menampilkan pesan pemasaran. Anda bisa menemukan lebih banyak lagi tentangnya di dokumentasi Bootstrap.

Buka file rute Anda untuk menambahkan root_path.

1
#config/routes.rb
2
3
Rails.application.routes.draw do
4
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
5
6
  root to: "pages#index"
7
end

Pengaturan Awal OmniAuth-Twitter

Anda harus membuat  suatu aplikasi Twitter baru. Kunjungi halaman ini di halaman Twitter Developer untuk membuatnya. Masukkan semua perincian yang dibutuhkan, seperti milik saya di screenshot di bawah ini.

Twitter Application Management Twitter Application Management Twitter Application Management

Untuk URL callback, masukkan alamat website Anda plus "auth/twitter/callback". Jika Anda menggunakan mesin lokal maka URL callback Anda seharusnya adalah: http://127.0.0.1:3000/auth/twitter/callback.

Anda akan diarahkan ke halaman informasi aplikasi di Twitter. Buka tab Keys and Access Tokens untuk mendapatkan kunci Anda. Salin Consumer Key dan Consumer Secret dan tempelkan ke tempat yang aman—kita akan menggunakannya dalam waktu dekat ini.

Callback URL adalah URL yang dengannya pengguna bisa diarahkan ke dalam aplikasi setelah autentikasi yang berhasil dan autorisasi yang diterima (permintaan juga akan menganding data dan token pengguna). Semua strategi OmniAuth mengekspektasikan callback URL untuk setara dengan “/auth/:provider/callback”. :provider mengambil namanya sebagai strategi. Dalam hal ini, strategi ini nantinya adalah "twitter" begitu Anda akan memasukkannya di initializer.

Buka Gemfile Anda dan tambahkan gem omniauth-twitter.

1
#Gemfile
2
...
3
4
gem 'omniauth-twitter'

Sekarang buat suatu initializer untuk OmniAuth dalam direktori config/initializer Anda. Itu akan menangani konfigurasi untuk OmniAuth. Jadikan seperti yang saya punya di bawah ini.

1
#config/initializers/omniauth.rb
2
3
Rails.application.config.middleware.use OmniAuth::Builder do
4
  provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET']
5
end

Di titik ini Anda harus menggunakan kuncinya dan mengakses token yang Anda simpan dengan aman. Anda harus menyimpannya dengan aman karena Anda tidak ingin mendorongnya ke repositori umum ketikan Anda memasukkan kode Anda.

Anda akan menggunakan suatu gem untuk ini. Buka Gemfile Anda lagi dan tambahkan ke gem di bawah ini. Tambahkan ke Gemfile Anda seperti ini:

1
#Gemfile
2
3
...
4
group :development, :test do
5
  ...
6
  gem 'dotenv-rails'
7
...

Untuk memasang gem, jalankan.

1
bundle install

Di direktori home aplikasi Anda, buat file yang bernama .env.

Buka dan tambahkan kunci-kunci Anda seperti ini:

1
#.env
2
3
TWITTER_KEY=xxxxxxxxxxxxxx
4
TWITTER_SECRET=xxxxxxxxxxxxxx

Buka .gitignore dan tambahkan file yang baru Anda buat.

1
#.gitignore
2
3
...
4
# Ignore .env used for storing keys and access tokens
5
.env

Setelah melakukan ini, kunci dan akses token Anda aman! Untuk belajar lebih banyak bagaimana menggunakan dotenv-rails, merujuklah ke halaman GitHub.

Waktunya mengerjakan rute Anda. Buka file rutenya dan masukkan rute berikut.

1
#config/routes.rb
2
3
...
4
  get '/auth/:provider/callback', to: 'sessions#create'

Anda harus menambahkan tautan untuk masuk dengan Twitter ke navigasi Anda. Buka file navigasi Anda dan atur supaya terllihat seperti ini.

1
<nav class="navbar navbar-default">
2
    <div class="container-fluid">
3
    <!-- Brand and toggle get grouped for better mobile display -->
4
    <div class="navbar-header">
5
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
6
        <span class="sr-only">Toggle navigation</span>
7
        <span class="icon-bar"></span>
8
        <span class="icon-bar"></span>
9
        <span class="icon-bar"></span>
10
      </button>
11
      <a class="navbar-brand" href="#">Tuts Social</a>
12
    </div>
13
    <div class="collapse navbar-collapse" id="navbar-collapse">
14
      <ul class="nav navbar-nav navbar-right">
15
        <li><%= link_to 'Home', root_path %></li>
16
        <% if current_user %>
17
          <li>Signed in as <%= current_user.name %></li>
18
        <% else %>
19
          <li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li>
20
        <% end %>
21
    	</ul>
22
    </div>
23
  </div>
24
</nav>

Dari hal-hal di atas, Anda ingin menunjukkan tautan untuk masuk dengan Twitter hanya ketika penggunanya tidak masuk.

Membuat Sesi

Anda harus membuat kontroller sesi untuk menangani masuknya pengguna. Buat file yang ada di direktori kontroller Anda; penampakannya seharusnya seperti ini.

Aksi pembuatan membantu untuk membuat sesi untuk pengguna sehingga mereka bisa masuk ke dalam aplikasi Anda. Tanpa hal ini, pengguna tidak bisa masuk.

1
#app/controllers/sessions_controller.rb
2
3
class SessionsController < ApplicationController
4
  def create
5
    @user = User.find_or_create_from_auth_hash(auth_hash)
6
    session[:user_id] = @user.id
7
    redirect_to root_path
8
  end
9
10
  protected
11
12
  def auth_hash
13
    request.env['omniauth.auth']
14
  end
15
end

Anda akan membutuhkan metode current_user di titik ini. Hal ini akan membantu Anda memeriksa apakah penggunanya masuk atau keluar.

Buka app/controllers/application_controller.rbdan tambahkan yang berikut ini.

1
#app/controllers/application_controller.rb
2
3
...
4
  def current_user
5
    @current_user ||= User.find(session[:user_id]) if session[:user_id]
6
  end
7
  helper_method :current_user
8
...

Model Pengguna

Sekarang buat model untuk Pengguna Anda. Jalankan perintah berikut untuk melakukannya.

1
rails generated modoel User provider:string uid:string name:string token:string secret:string profile_image:string

Hal itu harus menghasilkan file migrasi yang terlihat seperti ini.

1
#xxxxxx_create_users.rb
2
3
class CreateUsers < ActiveRecord::Migration[5.0]
4
  def change
5
    create_table :users do |t|
6
      t.string :provider
7
      t.string :uid
8
      t.string :name
9
      t.string :token
10
      t.string :secret
11
      t.string :profile_image
12
13
      t.timestamps
14
    end
15
  end
16
end

Sekarang migrasikan database Anda dengan menjalankan:

1
rake db:migrate

Buka model Pengguna Anda dan buatlah agar terlihat seperti ini:

1
#app/models/user.rb
2
3
class User < ApplicationRecord
4
  def self.find_or_create_from_auth_hash(auth_hash)
5
    user = where(provider: auth_hash.provider, uid: auth_hash.uid).first_or_create
6
    user.update(
7
      name: auth_hash.info.nickname,
8
      profile_image: auth_hash.info.image,
9
      token: auth_hash.credentials.token,
10
      secret: auth_hash.credentials.secret
11
    )
12
    user
13
  end
14
end

Kode di atas menyimpan sejumlah informasi yang menjadi milik pengguna. Ini akan mencakup nama, profile_image, token, dan rahasia pengguna. Jika aplikasi Anda membutuhkan lebih dari ini, Anda bisa mengecek halaman OmniAuth-Twitter:

Menghapus Sesi

Dalam aplikai Anda, akan disediakan bagi pengguna kemampuan untuk keluar (log out). Anda butuh aksi destroy di SessionsController untuk melakukan hal ini. Lalu suatu tautan akan ditambahkan ke navigasi Anda.

Tambahkan aksi destroy ke SessionsController Anda.

1
#app/controllers/sessions_controller.rb
2
3
...
4
  def destroy
5
    if current_user
6
      session.delete(:user_id)
7
      flash[:success] = "Sucessfully logged out!"
8
    end
9
    redirect_to root_path
10
  end
11
...

Lalu tambahkan tautan ini untuk keluar ke navigasi Anda, jadi navigasinya akan tampak seperti ini.

1
#app/views/layouts/_navigation.html.erb
2
3
<nav class="navbar navbar-default">
4
    <div class="container-fluid">
5
    <!-- Brand and toggle get grouped for better mobile display -->
6
    <div class="navbar-header">
7
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
8
        <span class="sr-only">Toggle navigation</span>
9
        <span class="icon-bar"></span>
10
        <span class="icon-bar"></span>
11
        <span class="icon-bar"></span>
12
      </button>
13
      <a class="navbar-brand" href="#">Tuts Social</a>
14
    </div>
15
    <div class="collapse navbar-collapse" id="navbar-collapse">
16
    	<ul class="nav navbar-nav navbar-right">
17
        <li><%= link_to 'Home', root_path %></li>
18
        <% if current_user %>
19
          <li>Signed in as <%= current_user.name %></li>
20
          <li><%= link_to 'Log Out', logout_path, method: :delete %></li>
21
        <% else %>
22
          <li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li>
23
        <% end %>
24
    	</ul>
25
    </div>
26
  </div>
27
</nav>

Buka config/route.rb untuk memperbarui rute Anda dengan aksi yang baru saja dibuat.

1
#config/routes.rb
2
3
...
4
  delete '/logout', to: 'sessions#destroy'
5
...

Mulai server rails Anda dan arahkan peramban Anda ke http://localhost:3000 untuk melihat apa yang Anda miliki.

Kesimpulan

Dalam tutorial ini Anda telah mempelajari cara mengaktifkan OmniAuth-Twitter dalam aplikasi Rails Anda. Anda melihat cara mendapatkan data pengguna dengan menggunakan OmniAuth-Twitter, yang Anda lakukan dalam model Pengguna Anda. Anda mampu membuat SessionsControllers untuk menangani proses masuk (log in) dan keluar (log out) dari aplikasi Anda.

Saya harap Anda menikmatinya. Di waktu yang akan datang, Anda akan melihat cara yang sama untuk Facebook, Google, dan LinkedIn.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.